Loading ...
Sorry, an error occurred while loading the content.

Tabs, dynamic content and GET vars

Expand Messages
  • cristopher pierson ewing
    Ho there, I m working on a tabbed interface for managing courses. Each tab contains data that is related to some sub-group of information about the course one
    Message 1 of 12 , May 1, 2007
    • 0 Attachment
      Ho there,

      I'm working on a tabbed interface for managing courses. Each tab contains
      data that is related to some sub-group of information about the course one
      is editing. I've been transferring the whole thing over to YUI and
      dynamically-generated pages from an earlier, self-built version with
      static tab content and I have a few questions. My test environment is OS
      X and I'm using Firefox as my testing browser.

      On to the questions:

      1. There are eight tabs on the page. Each is generated from some
      PHP-built HTML code that is transformed like in the example code here:

      http://developer.yahoo.com/yui/examples/tabview/module_tabs.html

      The problem is that about 15% of the time, the tab interface never
      finished building. I get the first three or four tabs, and the rest
      aren't there. Reloading the page builds the complete set, but that's a
      step my users shouldn't need to take, no?

      I am using the YAHOO.util.Event.onContentReady() to delay building the tab
      set until the content is completely generated, but I'm guessing that this
      isn't actually working right. Are there any suggestions out here for
      ensuring that the full tab set gets built every time?


      2. The content of each tab is generated dynamically by a request object
      that calls another PHP script. I'd like to be able to pass variables on
      to that script based on conditions that arise in the PHP document before
      the 'tab modules' get built. The only way I can see so far to do so is to
      write certain HTML elements into the PHP-genrated tab modules that get
      consumed by the YUI javascript process and translated into GET variables
      passed on in the 'dataSrc' property of the tab it generates. Is there a
      better way to do this?

      My biggest problem is that sometimes the javascript processing of the tab
      modules seems to get ahead of the PHP generation of the HTML modules, and
      errors get thrown because elements that are supposed to be in the module
      have not yet been written. When this condition arises, execuction of the
      Javascript halts, and the page is left in a partially-processed state that
      looks terrible and will be confusing to my users. Perhaps there's a way
      to throw an error that gets caught and generates a fall-back error page,
      but I con't see what it would be.

      Any suggestions.

      I'm enjoying working with the YUI library a great deal. I hope I can
      solve these little issues and get this up and running so my users can
      enjoy the juicy goodness!

      Thanks for any help in advance!

      Cris

      ********************************
      Cris Ewing
      CME and Telehealth Web Services
      Department of Radiology Web Services
      University of Washington
      School of Medicine
      Work Phone: (206) 685-9116
      Home Phone: (206) 365-3413
      E-mail: cewing@...
      *******************************


      On Tue, 1 May 2007, Caridy Patiño Mayea wrote:

      > ragtek_ragga, why you don´t try another technique to solve your
      > problem? I think that you may use the event bubble up technique to
      > generate each tooltip on the fly, without worry about the IDs and you
      > don´t need verify each link (at the beginning) to attach the
      > corresponding tooltip object. If you have a dynamic ID for each link
      > (as you mention in your first post), you can render the active tooltip
      > (mouse over a link), on the fly using the corresponding dynamic ID.
      >
      > You can see an example of tooltips on the fly here:
      > http://bubbling.comarq.com/themes/bubbling/examples/behavior-dynamic-tooltips-bubbling.html
      >
      > Full Explination here:
      > http://bubbling.comarq.com/eng/node/tooltip-behavior
      >
      > Regards
      > Caridy (caridy at gmail.com)
      >
      > --- In ydn-javascript@yahoogroups.com, "ragtek_ragga"
      > <ragtek_ragga@...> wrote:
      >>
      >> could you help me a second time pls
      >>
      >> i'd like to build that in a second script now
      >>
      >> so i included the scriptfiles, added the id="event" tag to the links
      >> and put <script type="text/javascript">YAHOO.example.container.tt2 =
      >> new YAHOO.widget.Tooltip("tt2", { context:"event" });
      >> </script> at the end of the template
      >>
      >> the link looks like this now
      >> <a href="calendar.php?do=getinfo&e=409&day=2007-5-1&c=1"
      >> title="http://www.euromayday.at .. treffpunkt(...)</a>
      >> at the first link it works
      >> on the others not, although the link looks right
      >> <a href="calendar.php?do=getinfo&e=417&day=2007-5-3&c=1"
      >> title="Toxic Sound
      >> No Entry
      >> only Tekkno" id="event">Toxic</a>
      >>
      >
      >
      >
    • alexshusta
      Hey there Cris, 1. PHP generated tabs not building reliably - Just to clarify, the problem is in the javascript but the HTML is _always_ there, right? Then
      Message 2 of 12 , May 1, 2007
      • 0 Attachment
        Hey there Cris,

        1. PHP generated tabs not building reliably - Just to clarify, the
        problem is in the javascript but the HTML is _always_ there, right?
        Then there's an old school work-around for dealing with elements that
        may not yet be rendered into the HTML tree - call your js function
        from the bottom of the page after the HTML has already been parsed by
        the client.

        2. How to pass variables from the current page back to your server
        with the YUI XHR class - You can append as many variable values as
        you'd like to on a request if you use POST instead of GET. See:
        http://developer.yahoo.com/yui/connection/#forms. However, I'm not
        sure if that really addresses your problem.

        You'll still have to iterate over an array of values on the server
        side using the $_POST array. You said that the variables you'd like to
        share with the second script occur within the first PHP script, right?
        You could use local file storage or a database to write the conditions
        out to a known location (say a file with the same name as the current
        userId, you'll need a unique location for each user as many people may
        hit your server at once and you really really don't want to store any
        sensitive data in this way).

        Or you could cheat (not really) and make PHP controller class that
        handles all your connection requests, making calls into the two
        discreet functions that you currently have and passing any data back
        and forth that way. E.g. your controller is instantiated and waits for
        a connection, connection arrives asking for tabs, the controller calls
        the first script, first script returns an array of notable conditions
        to the controller upon completion, controller waits for a connection,
        connection arrives asking for tab contents, controller calls second
        script passing in the array of conditions from the first script.

        That's just off the top of my head though, and there's probably
        (definitely) a more elegant solution available.

        Hope that makes sense, and helps.
        ~Alexander

        --- In ydn-javascript@yahoogroups.com, cristopher pierson ewing
        <cewing@...> wrote:
        >
        > Ho there,
        >
        > I'm working on a tabbed interface for managing courses. Each tab
        contains
        > data that is related to some sub-group of information about the
        course one
        > is editing. I've been transferring the whole thing over to YUI and
        > dynamically-generated pages from an earlier, self-built version with
        > static tab content and I have a few questions. My test environment
        is OS
        > X and I'm using Firefox as my testing browser.
        >
        > On to the questions:
        >
        > 1. There are eight tabs on the page. Each is generated from some
        > PHP-built HTML code that is transformed like in the example code here:
        >
        > http://developer.yahoo.com/yui/examples/tabview/module_tabs.html
        >
        > The problem is that about 15% of the time, the tab interface never
        > finished building. I get the first three or four tabs, and the rest
        > aren't there. Reloading the page builds the complete set, but that's a
        > step my users shouldn't need to take, no?
        >
        > I am using the YAHOO.util.Event.onContentReady() to delay building
        the tab
        > set until the content is completely generated, but I'm guessing that
        this
        > isn't actually working right. Are there any suggestions out here for
        > ensuring that the full tab set gets built every time?
        >
        >
        > 2. The content of each tab is generated dynamically by a request
        object
        > that calls another PHP script. I'd like to be able to pass
        variables on
        > to that script based on conditions that arise in the PHP document
        before
        > the 'tab modules' get built. The only way I can see so far to do so
        is to
        > write certain HTML elements into the PHP-genrated tab modules that get
        > consumed by the YUI javascript process and translated into GET
        variables
        > passed on in the 'dataSrc' property of the tab it generates. Is
        there a
        > better way to do this?
        >
        > My biggest problem is that sometimes the javascript processing of
        the tab
        > modules seems to get ahead of the PHP generation of the HTML
        modules, and
        > errors get thrown because elements that are supposed to be in the
        module
        > have not yet been written. When this condition arises, execuction
        of the
        > Javascript halts, and the page is left in a partially-processed
        state that
        > looks terrible and will be confusing to my users. Perhaps there's a
        way
        > to throw an error that gets caught and generates a fall-back error
        page,
        > but I con't see what it would be.
        >
        > Any suggestions.
        >
        > I'm enjoying working with the YUI library a great deal. I hope I can
        > solve these little issues and get this up and running so my users can
        > enjoy the juicy goodness!
        >
        > Thanks for any help in advance!
        >
        > Cris
        >
        > ********************************
        > Cris Ewing
        > CME and Telehealth Web Services
        > Department of Radiology Web Services
        > University of Washington
        > School of Medicine
        > Work Phone: (206) 685-9116
        > Home Phone: (206) 365-3413
        > E-mail: cewing@...
        > *******************************
        >
        >
        > On Tue, 1 May 2007, Caridy Patiño Mayea wrote:
        >
        > > ragtek_ragga, why you don´t try another technique to solve your
        > > problem? I think that you may use the event bubble up technique to
        > > generate each tooltip on the fly, without worry about the IDs and you
        > > don´t need verify each link (at the beginning) to attach the
        > > corresponding tooltip object. If you have a dynamic ID for each link
        > > (as you mention in your first post), you can render the active tooltip
        > > (mouse over a link), on the fly using the corresponding dynamic ID.
        > >
        > > You can see an example of tooltips on the fly here:
        > >
        http://bubbling.comarq.com/themes/bubbling/examples/behavior-dynamic-tooltips-bubbling.html
        > >
        > > Full Explination here:
        > > http://bubbling.comarq.com/eng/node/tooltip-behavior
        > >
        > > Regards
        > > Caridy (caridy at gmail.com)
        > >
        > > --- In ydn-javascript@yahoogroups.com, "ragtek_ragga"
        > > <ragtek_ragga@> wrote:
        > >>
        > >> could you help me a second time pls
        > >>
        > >> i'd like to build that in a second script now
        > >>
        > >> so i included the scriptfiles, added the id="event" tag to the links
        > >> and put <script type="text/javascript">YAHOO.example.container.tt2 =
        > >> new YAHOO.widget.Tooltip("tt2", { context:"event" });
        > >> </script> at the end of the template
        > >>
        > >> the link looks like this now
        > >> <a href="calendar.php?do=getinfo&e=409&day=2007-5-1&c=1"
        > >> title="http://www.euromayday.at .. treffpunkt(...)</a>
        > >> at the first link it works
        > >> on the others not, although the link looks right
        > >> <a
        href="calendar.php?do=getinfo&e=417&day=2007-5-3&c=1"
        > >> title="Toxic Sound
        > >> No Entry
        > >> only Tekkno" id="event">Toxic</a>
        > >>
        > >
        > >
        > >
        >
      • ragtek_ragga
        theres just one more problem here if i have long url s it would be nice if the part would be cut off just for demo what i mean:
        Message 3 of 12 , Sep 13, 2007
        • 0 Attachment
          theres just one more problem here
          if i have long url's it would be nice if the part would be "cut off"

          just for demo what i mean: http://www.ragtek.org/help.jpg
        • ragtek_ragga
          hi i m putting a tooltip this way on my site: YAHOO.namespace( example.container ); YAHOO.example.container.tt1 = new
          Message 4 of 12 , Nov 18, 2007
          • 0 Attachment
            hi
            i'm putting a tooltip this way on my site:



            <script type="text/javascript">
            YAHOO.namespace("example.container");
            YAHOO.example.container.tt1 = new YAHOO.widget.Tooltip("tt1", {
            context:"hide_unread", text:"Diese Tabelle kann in den Einstellungen
            (später auch durch einen klick hier) deaktiviert werden!" });
            </script>
            <table class="tborder" cellpadding="$stylevar[cellpadding]"
            cellspacing="$stylevar[cellspacing]" border="0" width="100%"
            align="center">
            <tr>
            <td class="alt1"><span id="hide_unread" style="float:right;"><img
            src="http://www.ragtek.org/forum/images/bgold/buttons/collapse_thead.gif"
            /></span>Es gibt <strong><a href="search.php?do=getnew"> neue
            Beiträge</a></strong> seit deinem letzten Besuch!</if></td>
            </tr>
            </table>

            it looks now like this: www.ragtek.org/tool.jpg
            the blue is the point where the mouse should be to show the tooltip
            the red is the tooltip
            1. how can i set the style?
            2. i'd like to show the tooltip more right! because now nobody is
            seeing it because it is left and the hoverpoint is right
          • ragtek_ragga
            ... src= http://www.ragtek.org/forum/images/bgold/buttons/collapse_thead.gif ... solved it, i thought that the css is global included, but it wasn t
            Message 5 of 12 , Nov 18, 2007
            • 0 Attachment
              --- In ydn-javascript@yahoogroups.com, "ragtek_ragga"
              <ragtek_ragga@...> wrote:
              >
              > hi
              > i'm putting a tooltip this way on my site:
              >
              >
              >
              > <script type="text/javascript">
              > YAHOO.namespace("example.container");
              > YAHOO.example.container.tt1 = new YAHOO.widget.Tooltip("tt1", {
              > context:"hide_unread", text:"Diese Tabelle kann in den Einstellungen
              > (später auch durch einen klick hier) deaktiviert werden!" });
              > </script>
              > <table class="tborder" cellpadding="$stylevar[cellpadding]"
              > cellspacing="$stylevar[cellspacing]" border="0" width="100%"
              > align="center">
              > <tr>
              > <td class="alt1"><span id="hide_unread" style="float:right;"><img
              >
              src="http://www.ragtek.org/forum/images/bgold/buttons/collapse_thead.gif"
              > /></span>Es gibt <strong><a href="search.php?do=getnew"> neue
              > Beiträge</a></strong> seit deinem letzten Besuch!</if></td>
              > </tr>
              > </table>
              >
              > it looks now like this: www.ragtek.org/tool.jpg
              > the blue is the point where the mouse should be to show the tooltip
              > the red is the tooltip
              > 1. how can i set the style?
              > 2. i'd like to show the tooltip more right! because now nobody is
              > seeing it because it is left and the hoverpoint is right
              >
              solved it, i thought that the css is global included, but it wasn't
            • Huynh Cao Ky
              Hi Ragtek! 1. You can change your tooltip by CSS. The Tootip object will use create a DOM with id is in your argument. Example: new YAHOO.widget.Tooltip( tt1 ,
              Message 6 of 12 , Nov 20, 2007
              • 0 Attachment
                Hi Ragtek!

                1. You can change your tooltip by CSS.
                The Tootip object will use create a DOM with id is in your argument.
                Example:
                new YAHOO.widget.Tooltip("tt1",
                { context:"ctx",
                text:"My text was set using the 'text'
                configuration property" });
                => HTML of this object is:
                <div id="tt1" class="yui-module yui-overlay yui-tt" style="z-index:
                2; left: 127px; top: 147px; visibility: hidden;">
                <div class="bd">My text was set using the 'text' configuration
                property</div><div class="yui-tt-shadow"/>
                </div>
                => You can change your tip's style in CSS:
                #tt1 {
                [Css Code]
                }

                Regard,

                ragtek_ragga wrote:
                >
                > hi
                > i'm putting a tooltip this way on my site:
                >
                > <script type="text/javascript">
                > YAHOO.namespace("example.container");
                > YAHOO.example.container.tt1 = new YAHOO.widget.Tooltip("tt1", {
                > context:"hide_unread", text:"Diese Tabelle kann in den Einstellungen
                > (später auch durch einen klick hier) deaktiviert werden!" });
                > </script>
                > <table class="tborder" cellpadding="$stylevar[cellpadding]"
                > cellspacing="$stylevar[cellspacing]" border="0" width="100%"
                > align="center">
                > <tr>
                > <td class="alt1"><span id="hide_unread" style="float:right;"><img
                > src="http://www.ragtek.org/forum/images/bgold/buttons/collapse_thead.gif
                > <http://www.ragtek.org/forum/images/bgold/buttons/collapse_thead.gif>"
                > /></span>Es gibt <strong><a href="search.php?do=getnew"> neue
                > Beiträge</a></strong> seit deinem letzten Besuch!</if></td>
                > </tr>
                > </table>
                >
                > it looks now like this: www.ragtek.org/tool.jpg
                > the blue is the point where the mouse should be to show the tooltip
                > the red is the tooltip
                > 1. how can i set the style?
                > 2. i'd like to show the tooltip more right! because now nobody is
                > seeing it because it is left and the hoverpoint is right
                >
                >


                --

                *HUYNH CAO KY *.
                HTK-INC
                http://www.htk-inc.com <http://www.key-king.com/>
                MSN Messenger huynhcaoky@...
                Skype huynhcaoky
              Your message has been successfully submitted and would be delivered to recipients shortly.