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

Hyperlinks and dynamic pages inside Tabview contents

Expand Messages
  • otrorichard
    Hi everyone, Two questions: The simplest, How make a hyperlink inside tabview content and the new page keeps inside the tab and no outside, like a new page?
    Message 1 of 10 , Nov 24, 2006
    • 0 Attachment
      Hi everyone,

      Two questions:

      The simplest, How make a hyperlink inside tabview content and the new
      page keeps inside the tab and no outside, like a new page?

      All the hyperlinks in the tabview examples point to "#".


      The second one.
      I need to put inside a tabview content a php-based search page,I can
      get the first page, but the paging is impossible.
      Note: Outside the tabview my search pages work fine.

      thanks in advanced.

      Richard
    • Nige White
      You ll have to search for them all (document.getElementsByTagName( a )) and use YAHOO.util.Event to give them onclick listeners which stop the event, and load
      Message 2 of 10 , Nov 27, 2006
      • 0 Attachment
        You'll have to search for them all (document.getElementsByTagName("a"))
        and use YAHOO.util.Event to give them onclick listeners which stop the
        event, and load the url into the tab using YAHOO.util.Connect.

        otrorichard wrote:

        > Hi everyone,
        >
        > Two questions:
        >
        > The simplest, How make a hyperlink inside tabview content and the new
        > page keeps inside the tab and no outside, like a new page?
        >
        > All the hyperlinks in the tabview examples point to "#".
        >
        > The second one.
        > I need to put inside a tabview content a php-based search page,I can
        > get the first page, but the paging is impossible.
        > Note: Outside the tabview my search pages work fine.
        >
        > thanks in advanced.
        >
        > Richard
        >
        >
        > _____________________________________________________________________
        > This message has been checked for all known viruses. Virus scanning
        > powered by Messagelabs http://www.messagelabs.com For more information
        > e-mail : hostmaster@...



        _____________________________________________________________________
        This message has been checked for all known viruses. Virus scanning
        powered by Messagelabs http://www.messagelabs.com For more information
        e-mail : hostmaster@...
      • otrorichard
        Sorry my delayed answer (my job), but I think is very hard catch every event and filtering its tags. Is there a simpler way?
        Message 3 of 10 , Dec 1, 2006
        • 0 Attachment
          Sorry my delayed answer (my job), but I think is very hard catch every
          event and filtering its tags. Is there a simpler way?



          --- In ydn-javascript@yahoogroups.com, Nige White <nigelw@...> wrote:
          >
          > You'll have to search for them all (document.getElementsByTagName("a"))
          > and use YAHOO.util.Event to give them onclick listeners which stop the
          > event, and load the url into the tab using YAHOO.util.Connect.
          >
          > otrorichard wrote:
          >
          > > Hi everyone,
          > >
          > > Two questions:
          > >
          > > The simplest, How make a hyperlink inside tabview content and the new
          > > page keeps inside the tab and no outside, like a new page?
          > >
          > > All the hyperlinks in the tabview examples point to "#".
          > >
          > > The second one.
          > > I need to put inside a tabview content a php-based search page,I can
          > > get the first page, but the paging is impossible.
          > > Note: Outside the tabview my search pages work fine.
          > >
          > > thanks in advanced.
          > >
          > > Richard
          > >
          > >
          > > _____________________________________________________________________
          > > This message has been checked for all known viruses. Virus scanning
          > > powered by Messagelabs http://www.messagelabs.com For more information
          > > e-mail : hostmaster@...
          >
          >
          >
          > _____________________________________________________________________
          > This message has been checked for all known viruses. Virus scanning
          > powered by Messagelabs http://www.messagelabs.com For more information
          > e-mail : hostmaster@...
          >
        • exguardianreader
          Well, you want to defeat HTML links in the browser; you ll have to do a little work! It s not hard at all. Create a YAHOO.ext.Element from the element into
          Message 4 of 10 , Dec 2, 2006
          • 0 Attachment
            Well, you want to defeat HTML links in the browser; you'll have to do
            a little work!

            It's not hard at all. Create a YAHOO.ext.Element from the element into
            which you are loading content.

            Use getElementsByTagname on the element. You get back an array of <a>
            elements. Loop through the array adding a click handling function (it
            can be the same function) as a listener to each one.

            In the handling function, call update() on the Element.

            Docs: http://www.yui-ext.com/deploy/yui-ext/docs/

            Download the YAHOO.ext library from http://www.jackslocum.com/blog/

            It's a piece of cake!
            --- In ydn-javascript@yahoogroups.com, "otrorichard"
            <richardworking@...> wrote:
            >
            > Sorry my delayed answer (my job), but I think is very hard catch every
            > event and filtering its tags. Is there a simpler way?
            >
            >
            >
            > --- In ydn-javascript@yahoogroups.com, Nige White <nigelw@> wrote:
            > >
            > > You'll have to search for them all
            (document.getElementsByTagName("a"))
            > > and use YAHOO.util.Event to give them onclick listeners which stop
            the
            > > event, and load the url into the tab using YAHOO.util.Connect.
            > >
            > > otrorichard wrote:
            > >
            > > > Hi everyone,
            > > >
            > > > Two questions:
            > > >
            > > > The simplest, How make a hyperlink inside tabview content and
            the new
            > > > page keeps inside the tab and no outside, like a new page?
            > > >
            > > > All the hyperlinks in the tabview examples point to "#".
            > > >
            > > > The second one.
            > > > I need to put inside a tabview content a php-based search page,I can
            > > > get the first page, but the paging is impossible.
            > > > Note: Outside the tabview my search pages work fine.
            > > >
            > > > thanks in advanced.
            > > >
            > > > Richard
            > > >
            > > >
            > > >
            _____________________________________________________________________
            > > > This message has been checked for all known viruses. Virus scanning
            > > > powered by Messagelabs http://www.messagelabs.com For more
            information
            > > > e-mail : hostmaster@
            > >
            > >
            > >
            > > _____________________________________________________________________
            > > This message has been checked for all known viruses. Virus scanning
            > > powered by Messagelabs http://www.messagelabs.com For more information
            > > e-mail : hostmaster@
            > >
            >
          • exguardianreader
            Of course that will only work on links to the same domain. If you want to handle links to anywhere, you ll have to use an iframe, and then you won t need to do
            Message 5 of 10 , Dec 2, 2006
            • 0 Attachment
              Of course that will only work on links to the same domain. If you want
              to handle links to anywhere, you'll have to use an iframe, and then
              you won't need to do any link defeating. (Well, you just might want to
              check the "target" attribute)
            • Matt Sweeney
              Another approach would be to listen for clicks on the containing element, and if the target element meets certain critera (its an anchor, has an href, etc.),
              Message 6 of 10 , Dec 4, 2006
              • 0 Attachment
                Another approach would be to listen for clicks on the containing element, and if the target element meets certain critera (its an anchor, has an href, etc.), handle as needed. 

                This can be accomplished with a single listener, and then you can avoid managing listeners on your dynamic content.

                Matt

                otrorichard wrote:
                Sorry my delayed answer (my job), but I think is very hard catch every
                event and filtering its tags. Is there a simpler way?
                
                
                
                --- In ydn-javascript@yahoogroups.com, Nige White <nigelw@...> wrote:
                  
                You'll have to search for them all (document.getElementsByTagName("a")) 
                and use YAHOO.util.Event to give them onclick listeners which stop the 
                event, and load the url into the tab using YAHOO.util.Connect.
                
                otrorichard wrote:
                
                    
                Hi everyone,
                
                Two questions:
                
                The simplest, How make a hyperlink inside tabview content and the new
                page keeps inside the tab and no outside, like a new page?
                
                All the hyperlinks in the tabview examples point to "#".
                
                The second one.
                I need to put inside a tabview content a php-based search page,I can
                get the first page, but the paging is impossible.
                Note: Outside the tabview my search pages work fine.
                
                thanks in advanced.
                
                Richard
                
                
                _____________________________________________________________________
                This message has been checked for all known viruses. Virus scanning
                powered by Messagelabs http://www.messagelabs.com For more information
                e-mail : hostmaster@...
                      
                
                _____________________________________________________________________
                This message has been checked for all known viruses. Virus scanning
                powered by Messagelabs http://www.messagelabs.com For more information
                e-mail : hostmaster@...
                
                    
                
                
                
                 
                Yahoo! Groups Links
                
                <*> To visit your group on the web, go to:
                    http://groups.yahoo.com/group/ydn-javascript/
                
                <*> Your email settings:
                    Individual Email | Traditional
                
                <*> To change settings online go to:
                    http://groups.yahoo.com/group/ydn-javascript/join
                    (Yahoo! ID required)
                
                <*> To change settings via email:
                    mailto:ydn-javascript-digest@yahoogroups.com 
                    mailto:ydn-javascript-fullfeatured@yahoogroups.com
                
                <*> To unsubscribe from this group, send an email to:
                    ydn-javascript-unsubscribe@yahoogroups.com
                
                <*> Your use of Yahoo! Groups is subject to:
                    http://docs.yahoo.com/info/terms/
                 
                
                
                
                  

              • Eric Miraglia
                Richard, Matt s suggestion is a good one. Note that there are a few good resources for you if that approach — Event Delegation — is a new one to you:
                Message 7 of 10 , Dec 4, 2006
                • 0 Attachment
                  Richard,

                  Matt's suggestion is a good one.  Note that there are a few good resources for you if that approach — Event Delegation — is a new one to you:


                  Regards,
                  Eric

                  _____________________________________________
                  Eric Miraglia
                  Yahoo! Presentation Platform Engineering



                  On Dec 4, 2006, at 10:34 AM, Matt Sweeney wrote:

                  Another approach would be to listen for clicks on the containing element, and if the target element meets certain critera (its an anchor, has an href, etc.), handle as needed. 

                  This can be accomplished with a single listener, and then you can avoid managing listeners on your dynamic content.

                  Matt

                  otrorichard wrote:

                  Sorry my delayed answer (my job), but I think is very hard catch every
                  event and filtering its tags. Is there a simpler way?
                  
                  
                  
                  --- In ydn-javascript@yahoogroups.com , Nige White <nigelw@...> wrote:
                    
                  You'll have to search for them all (document.getElementsByTagName("a")) and use YAHOO.util.Event to give them onclick listeners which stop the event, and load the url into the tab using YAHOO.util.Connect. otrorichard wrote:
                  Hi everyone,
                  
                  Two questions:
                  
                  The simplest, How make a hyperlink inside tabview content and the new
                  page keeps inside the tab and no outside, like a new page?
                  
                  All the hyperlinks in the tabview examples point to "#".
                  
                  The second one.
                  I need to put inside a tabview content a php-based search page,I can
                  get the first page, but the paging is impossible.
                  Note: Outside the tabview my search pages work fine.
                  
                  thanks in advanced.
                  
                  Richard
                  
                  
                  _____________________________________________________________________ This message has been checked for all known viruses. Virus scanning powered by Messagelabs http://www.messagelabs.comFor more information e-mail : hostmaster@...
                  _____________________________________________________________________ This message has been checked for all known viruses. Virus scanning powered by Messagelabs http://www.messagelabs.com For more information e-mail : hostmaster@...
                  
                   
                  Yahoo! Groups Links
                  
                  <*> To visit your group on the web, go to:
                      http://groups.yahoo.com/group/ydn-javascript/ 
                  
                  <*> Your email settings:
                      Individual Email | Traditional
                  
                  <*> To change settings online go to:
                      http://groups.yahoo.com/group/ydn-javascript/join 
                      (Yahoo! ID required)
                  
                  <*> To change settings via email:
                      mailto:ydn-javascript-digest@yahoogroups.com 
                      mailto:ydn-javascript-fullfeatured@yahoogroups.com 
                  
                  <*> To unsubscribe from this group, send an email to:
                      ydn-javascript-unsubscribe@yahoogroups.com 
                  
                  <*> Your use of Yahoo! Groups is subject to:
                      http://docs.yahoo.com/info/terms/ 
                   
                  
                  
                  
                    



                • jcyrnh
                  This seems like a good approach, and I am about half way there. i can see events triggering and get the src of the link to travel to, etc. However I have two
                  Message 8 of 10 , Dec 13, 2006
                  • 0 Attachment
                    This seems like a good approach, and I am about half way there. i can
                    see events triggering and get the src of the link to travel to, etc.
                    However I have two stumbling blocks.

                    1) How do I tell the active tab to load the new source. I imagine it
                    is something like tabView.getTab(0).set('dataSrc',elTarget); but it
                    doesn't recognize tabView. Further I am unclear how to determinine
                    the index of the tab during the event.

                    2) How do I tell it not to trigger on clicking on the tab labels? If
                    I was coding the tabs in html that would be easy, but they are
                    dynamically made so I don't have an ID for just the content divs, only
                    the div that holds everything including the labels.

                    YAHOO.example.init = function() {
                    var tabView = new YAHOO.widget.TabView({id: 'savvyUserTabs'});

                    <cfset counter = 1>
                    <cfloop collection="#tabsystem#" item="Temp">
                    <cfoutput>
                    tabView.addTab(new YAHOO.widget.Tab({
                    label: '#tabsystem[temp].label#',
                    dataSrc: '#tabsystem[temp].src#&page_ID=#page_ID#',
                    active: <cfif tabsystem[temp].label eq activetab OR activetab
                    eq temp>true<cfelse>false</cfif>,
                    cacheData: #tabsystem[temp].cache# /* only load once */
                    }));
                    </cfoutput>
                    <cfset counter = counter + 1>
                    </cfloop>


                    YAHOO.util.Event.onContentReady('savvyUserTabsContainer', function() {
                    tabView.appendTo('savvyUserTabsContainer');
                    });

                    };


                    function clickHandler(e) {
                    //get the resolved (non-text node) target:
                    var elTarget = YAHOO.util.Event.getTarget(e);
                    //walk up the DOM tree looking for an <li>
                    //in the target's ancestry; desist when you
                    //reach the container div
                    while (elTarget.id != "savvyUserTabsContainer") {
                    //are you an A?
                    if(elTarget.nodeName.toUpperCase() == "A") {
                    //yes, an A: so write out a message to the log
                    tabView.getTab(0).set('dataSrc',elTarget);
                    //and then stop looking:
                    break;
                    } else {
                    //wasn't the container, but wasn't an li; so
                    //let's step up the DOM and keep looking:
                    elTarget = elTarget.parentNode;
                    }
                    }
                    }
                    //attach clickHandler as a listener for any click on
                    //the container div:
                    YAHOO.util.Event.on("savvyUserTabsContainer", "click", clickHandler);

                    YAHOO.example.init();

                    --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...> wrote:
                    >
                    > Richard,
                    >
                    > Matt's suggestion is a good one. Note that there are a few good
                    > resources for you if that approach — Event Delegation — is a new one
                    > to you:
                    >
                    > http://developer.yahoo.com/yui/examples/event/event-delegation.html
                    > http://icant.co.uk/sandbox/eventdelegation/
                    >
                    > Regards,
                    > Eric
                    >
                    > _____________________________________________
                    > Eric Miraglia
                    > Yahoo! Presentation Platform Engineering
                    >
                    >
                    >
                    > On Dec 4, 2006, at 10:34 AM, Matt Sweeney wrote:
                    >
                    > > Another approach would be to listen for clicks on the containing
                    > > element, and if the target element meets certain critera (its an
                    > > anchor, has an href, etc.), handle as needed.
                    > >
                    > > This can be accomplished with a single listener, and then you can
                    > > avoid managing listeners on your dynamic content.
                    > >
                    > > Matt
                    > >
                    > > otrorichard wrote:
                    > >> Sorry my delayed answer (my job), but I think is very hard catch
                    > >> every
                    > >> event and filtering its tags. Is there a simpler way?
                    > >>
                    > >>
                    > >>
                    > >> --- In ydn-javascript@yahoogroups.com, Nige White <nigelw@> wrote:
                    > >>
                    > >>> You'll have to search for them all (document.getElementsByTagName
                    > >>> ("a")) and use YAHOO.util.Event to give them onclick listeners
                    > >>> which stop the event, and load the url into the tab using
                    > >>> YAHOO.util.Connect. otrorichard wrote:
                    > >>>> Hi everyone,
                    > >>>>
                    > >>>> Two questions:
                    > >>>>
                    > >>>> The simplest, How make a hyperlink inside tabview content and
                    > >>>> the new
                    > >>>> page keeps inside the tab and no outside, like a new page?
                    > >>>>
                    > >>>> All the hyperlinks in the tabview examples point to "#".
                    > >>>>
                    > >>>> The second one.
                    > >>>> I need to put inside a tabview content a php-based search page,I
                    > >>>> can
                    > >>>> get the first page, but the paging is impossible.
                    > >>>> Note: Outside the tabview my search pages work fine.
                    > >>>>
                    > >>>> thanks in advanced.
                    > >>>>
                    > >>>> Richard
                    > >>>>
                    > >>>>
                    > >>>>
                    ___________________________________________________________________
                    > >>>> __ This message has been checked for all known viruses. Virus
                    > >>>> scanning powered by Messagelabs http://www.messagelabs.comFor
                    > >>>> more information e-mail : hostmaster@
                    > >>>
                    ____________________________________________________________________
                    > >>> _ This message has been checked for all known viruses. Virus
                    > >>> scanning powered by Messagelabs http://www.messagelabs.com For
                    > >>> more information e-mail : hostmaster@
                    > >>
                    > >>
                    > >>
                    > >> Yahoo! Groups Links
                    > >>
                    > >>
                    > >>
                    > >>
                    > >>
                    > >>
                    > >>
                    > >
                    > >
                    > >
                    >
                  • Matt Sweeney
                    ... You can pass the tabView instance as the 4th arg to your Event listener. See: for
                    Message 9 of 10 , Dec 13, 2006
                    • 0 Attachment
                      1) How do I tell the active tab to load the new source.  I imagine it
                      is something like  tabView.getTab(0).set('dataSrc',elTarget); but it
                      doesn't recognize tabView.  Further I am unclear how to determinine
                      the index of the tab during the event.
                        

                      You can pass the tabView instance as the 4th arg to your Event listener.  See: <http://developer.yahoo.com/yui/docs/YAHOO.util.Event.html#addListener> for more details on Event listeners.

                      From what I understand, these clicks will always occur in the "activeTab", so you can just do:
                      tabView.get('activeTab').set('dataSrc',elTarget);
                      2) How do I tell it not to trigger on clicking on the tab labels?  If
                      I was coding the tabs in html that would be easy, but they are
                      dynamically made so I don't have an ID for just the content divs, only
                      the div that holds everything including the labels.

                      The simplest approach would be to assign the listener to the content container rather than the entire tabview.

                      You can avoid adding an ID to the content container by using getElementsByClassName:
                      YAHOO.util.Event.on(tabView.getElementsByClassName('yui-content', 'div')[0], 'click', clickHandler);
                      But keep in mind the content needs to be ready in that case.

                      Matt

                      jcyrnh wrote:
                      This seems like a good approach, and I am about half way there.  i can
                      see events triggering and get the src of the link to travel to, etc. 
                      However I have two stumbling blocks.
                      
                      1) How do I tell the active tab to load the new source.  I imagine it
                      is something like  tabView.getTab(0).set('dataSrc',elTarget); but it
                      doesn't recognize tabView.  Further I am unclear how to determinine
                      the index of the tab during the event.
                      
                      2) How do I tell it not to trigger on clicking on the tab labels?  If
                      I was coding the tabs in html that would be easy, but they are
                      dynamically made so I don't have an ID for just the content divs, only
                      the div that holds everything including the labels.
                      
                      YAHOO.example.init = function() {
                          var tabView = new YAHOO.widget.TabView({id: 'savvyUserTabs'});
                          
                      	<cfset counter = 1>
                      	<cfloop collection="#tabsystem#" item="Temp">
                        		<cfoutput>
                        		tabView.addTab(new YAHOO.widget.Tab({
                              label: '#tabsystem[temp].label#',
                              dataSrc: '#tabsystem[temp].src#&page_ID=#page_ID#',
                              active: <cfif tabsystem[temp].label eq activetab OR activetab
                      eq temp>true<cfelse>false</cfif>,
                      		cacheData: #tabsystem[temp].cache# /* only load once */
                          }));  	
                       		 </cfoutput>
                      		<cfset counter = counter + 1>
                      	</cfloop>
                      
                          
                          YAHOO.util.Event.onContentReady('savvyUserTabsContainer', function() {
                              tabView.appendTo('savvyUserTabsContainer');
                          });
                      
                      };
                      
                      
                      function clickHandler(e) {
                      	//get the resolved (non-text node) target:
                      	var elTarget = YAHOO.util.Event.getTarget(e);	
                      	//walk up the DOM tree looking for an <li>
                      	//in the target's ancestry; desist when you
                      	//reach the container div
                      	while (elTarget.id != "savvyUserTabsContainer") {
                      		//are you an A?
                      		if(elTarget.nodeName.toUpperCase() == "A") {
                      			//yes, an A: so write out a message to the log
                      			  tabView.getTab(0).set('dataSrc',elTarget);
                      			//and then stop looking:
                      			break;
                      		} else {
                      			//wasn't the container, but wasn't an li; so
                      			//let's step up the DOM and keep looking:
                      			elTarget = elTarget.parentNode;
                      		}
                      	}
                      }
                      //attach clickHandler as a listener for any click on
                      //the container div:
                      YAHOO.util.Event.on("savvyUserTabsContainer", "click", clickHandler);
                      
                      YAHOO.example.init();
                      
                      --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...> wrote:
                        
                      Richard,
                      
                      Matt's suggestion is a good one.  Note that there are a few good  
                      resources for you if that approach — Event Delegation — is a new one  
                      to you:
                      
                      http://developer.yahoo.com/yui/examples/event/event-delegation.html
                      http://icant.co.uk/sandbox/eventdelegation/
                      
                      Regards,
                      Eric
                      
                      _____________________________________________
                      Eric Miraglia
                      Yahoo! Presentation Platform Engineering
                      
                      
                      
                      On Dec 4, 2006, at 10:34 AM, Matt Sweeney wrote:
                      
                          
                      Another approach would be to listen for clicks on the containing  
                      element, and if the target element meets certain critera (its an  
                      anchor, has an href, etc.), handle as needed.
                      
                      This can be accomplished with a single listener, and then you can  
                      avoid managing listeners on your dynamic content.
                      
                      Matt
                      
                      otrorichard wrote:
                            
                      Sorry my delayed answer (my job), but I think is very hard catch  
                      every
                      event and filtering its tags. Is there a simpler way?
                      
                      
                      
                      --- In ydn-javascript@yahoogroups.com, Nige White <nigelw@> wrote:
                      
                              
                      You'll have to search for them all (document.getElementsByTagName 
                      ("a")) and use YAHOO.util.Event to give them onclick listeners  
                      which stop the event, and load the url into the tab using  
                      YAHOO.util.Connect. otrorichard wrote:
                                
                      Hi everyone,
                      
                      Two questions:
                      
                      The simplest, How make a hyperlink inside tabview content and  
                      the new
                      page keeps inside the tab and no outside, like a new page?
                      
                      All the hyperlinks in the tabview examples point to "#".
                      
                      The second one.
                      I need to put inside a tabview content a php-based search page,I  
                      can
                      get the first page, but the paging is impossible.
                      Note: Outside the tabview my search pages work fine.
                      
                      thanks in advanced.
                      
                      Richard
                      
                      
                      
                                  
                      ___________________________________________________________________ 
                        
                      __ This message has been checked for all known viruses. Virus  
                      scanning powered by Messagelabs http://www.messagelabs.comFor  
                      more information e-mail : hostmaster@
                                  
                      ____________________________________________________________________ 
                        
                      _ This message has been checked for all known viruses. Virus  
                      scanning powered by Messagelabs http://www.messagelabs.com For  
                      more information e-mail : hostmaster@
                                
                      
                      Yahoo! Groups Links
                      
                      
                      
                      
                      
                      
                      
                              
                      
                            
                      
                      
                      
                       
                      Yahoo! Groups Links
                      
                      <*> To visit your group on the web, go to:
                          http://groups.yahoo.com/group/ydn-javascript/
                      
                      <*> Your email settings:
                          Individual Email | Traditional
                      
                      <*> To change settings online go to:
                          http://groups.yahoo.com/group/ydn-javascript/join
                          (Yahoo! ID required)
                      
                      <*> To change settings via email:
                          mailto:ydn-javascript-digest@yahoogroups.com 
                          mailto:ydn-javascript-fullfeatured@yahoogroups.com
                      
                      <*> To unsubscribe from this group, send an email to:
                          ydn-javascript-unsubscribe@yahoogroups.com
                      
                      <*> Your use of Yahoo! Groups is subject to:
                          http://docs.yahoo.com/info/terms/
                       
                      
                      
                      
                        

                    • jcyrnh
                      That was what I was looking for. Ok, I have now confirmed that tabView.get( activeTab ).set( dataSrc ,elTarget); is setting the dataSrc correctly. However I
                      Message 10 of 10 , Dec 14, 2006
                      • 0 Attachment
                        That was what I was looking for. Ok, I have now confirmed that
                        tabView.get('activeTab').set('dataSrc',elTarget);

                        is setting the dataSrc correctly. However I mistakenly thought that
                        would cause the tab to reload with that new dataSrc. Which it does
                        not. Either that or I have gone down the wrong path. Should I be
                        doing a listener for contentChange instead?

                        Basically I want the link to trigger the new page to open into the tab
                        and not the whole window.

                        --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@...> wrote:
                        >
                        > >
                        > >
                        > >1) How do I tell the active tab to load the new source. I imagine it
                        > >is something like tabView.getTab(0).set('dataSrc',elTarget); but it
                        > >doesn't recognize tabView. Further I am unclear how to determinine
                        > >the index of the tab during the event.
                        > >
                        > >
                        >
                        > You can pass the tabView instance as the 4th arg to your Event
                        > listener. See:
                        > <http://developer.yahoo.com/yui/docs/YAHOO.util.Event.html#addListener>
                        > for more details on Event listeners.
                        >
                        > From what I understand, these clicks will always occur in the
                        > "activeTab", so you can just do:
                        >
                        > tabView.get('activeTab').set('dataSrc',elTarget);
                        >
                        > >2) How do I tell it not to trigger on clicking on the tab labels? If
                        > >I was coding the tabs in html that would be easy, but they are
                        > >dynamically made so I don't have an ID for just the content divs, only
                        > >the div that holds everything including the labels.
                        > >
                        >
                        > The simplest approach would be to assign the listener to the content
                        > container rather than the entire tabview.
                        >
                        > You can avoid adding an ID to the content container by using
                        > getElementsByClassName:
                        >
                        > YAHOO.util.Event.on(tabView.getElementsByClassName('yui-content',
                        'div')[0], 'click', clickHandler);
                        >
                        > But keep in mind the content needs to be ready in that case.
                        >
                        > Matt
                        >
                        > jcyrnh wrote:
                        >
                        > >This seems like a good approach, and I am about half way there. i can
                        > >see events triggering and get the src of the link to travel to, etc.
                        > >However I have two stumbling blocks.
                        > >
                        > >1) How do I tell the active tab to load the new source. I imagine it
                        > >is something like tabView.getTab(0).set('dataSrc',elTarget); but it
                        > >doesn't recognize tabView. Further I am unclear how to determinine
                        > >the index of the tab during the event.
                        > >
                        > >2) How do I tell it not to trigger on clicking on the tab labels? If
                        > >I was coding the tabs in html that would be easy, but they are
                        > >dynamically made so I don't have an ID for just the content divs, only
                        > >the div that holds everything including the labels.
                        > >
                        > >YAHOO.example.init = function() {
                        > > var tabView = new YAHOO.widget.TabView({id: 'savvyUserTabs'});
                        > >
                        > > <cfset counter = 1>
                        > > <cfloop collection="#tabsystem#" item="Temp">
                        > > <cfoutput>
                        > > tabView.addTab(new YAHOO.widget.Tab({
                        > > label: '#tabsystem[temp].label#',
                        > > dataSrc: '#tabsystem[temp].src#&page_ID=#page_ID#',
                        > > active: <cfif tabsystem[temp].label eq activetab OR activetab
                        > >eq temp>true<cfelse>false</cfif>,
                        > > cacheData: #tabsystem[temp].cache# /* only load once */
                        > > }));
                        > > </cfoutput>
                        > > <cfset counter = counter + 1>
                        > > </cfloop>
                        > >
                        > >
                        > > YAHOO.util.Event.onContentReady('savvyUserTabsContainer',
                        function() {
                        > > tabView.appendTo('savvyUserTabsContainer');
                        > > });
                        > >
                        > >};
                        > >
                        > >
                        > >function clickHandler(e) {
                        > > //get the resolved (non-text node) target:
                        > > var elTarget = YAHOO.util.Event.getTarget(e);
                        > > //walk up the DOM tree looking for an <li>
                        > > //in the target's ancestry; desist when you
                        > > //reach the container div
                        > > while (elTarget.id != "savvyUserTabsContainer") {
                        > > //are you an A?
                        > > if(elTarget.nodeName.toUpperCase() == "A") {
                        > > //yes, an A: so write out a message to the log
                        > > tabView.getTab(0).set('dataSrc',elTarget);
                        > > //and then stop looking:
                        > > break;
                        > > } else {
                        > > //wasn't the container, but wasn't an li; so
                        > > //let's step up the DOM and keep looking:
                        > > elTarget = elTarget.parentNode;
                        > > }
                        > > }
                        > >}
                        > >//attach clickHandler as a listener for any click on
                        > >//the container div:
                        > >YAHOO.util.Event.on("savvyUserTabsContainer", "click", clickHandler);
                        > >
                        > >YAHOO.example.init();
                        > >
                        > >--- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@> wrote:
                        > >
                        > >
                        > >>Richard,
                        > >>
                        > >>Matt's suggestion is a good one. Note that there are a few good
                        > >>resources for you if that approach -- Event Delegation -- is a new
                        one
                        > >>to you:
                        > >>
                        > >>http://developer.yahoo.com/yui/examples/event/event-delegation.html
                        > >>http://icant.co.uk/sandbox/eventdelegation/
                        > >>
                        > >>Regards,
                        > >>Eric
                        > >>
                        > >>_____________________________________________
                        > >>Eric Miraglia
                        > >>Yahoo! Presentation Platform Engineering
                        > >>
                        > >>
                        > >>
                        > >>On Dec 4, 2006, at 10:34 AM, Matt Sweeney wrote:
                        > >>
                        > >>
                        > >>
                        > >>>Another approach would be to listen for clicks on the containing
                        > >>>element, and if the target element meets certain critera (its an
                        > >>>anchor, has an href, etc.), handle as needed.
                        > >>>
                        > >>>This can be accomplished with a single listener, and then you can
                        > >>>avoid managing listeners on your dynamic content.
                        > >>>
                        > >>>Matt
                        > >>>
                        > >>>otrorichard wrote:
                        > >>>
                        > >>>
                        > >>>>Sorry my delayed answer (my job), but I think is very hard catch
                        > >>>>every
                        > >>>>event and filtering its tags. Is there a simpler way?
                        > >>>>
                        > >>>>
                        > >>>>
                        > >>>>--- In ydn-javascript@yahoogroups.com, Nige White <nigelw@> wrote:
                        > >>>>
                        > >>>>
                        > >>>>
                        > >>>>>You'll have to search for them all (document.getElementsByTagName
                        > >>>>>("a")) and use YAHOO.util.Event to give them onclick listeners
                        > >>>>>which stop the event, and load the url into the tab using
                        > >>>>>YAHOO.util.Connect. otrorichard wrote:
                        > >>>>>
                        > >>>>>
                        > >>>>>>Hi everyone,
                        > >>>>>>
                        > >>>>>>Two questions:
                        > >>>>>>
                        > >>>>>>The simplest, How make a hyperlink inside tabview content and
                        > >>>>>>the new
                        > >>>>>>page keeps inside the tab and no outside, like a new page?
                        > >>>>>>
                        > >>>>>>All the hyperlinks in the tabview examples point to "#".
                        > >>>>>>
                        > >>>>>>The second one.
                        > >>>>>>I need to put inside a tabview content a php-based search page,I
                        > >>>>>>can
                        > >>>>>>get the first page, but the paging is impossible.
                        > >>>>>>Note: Outside the tabview my search pages work fine.
                        > >>>>>>
                        > >>>>>>thanks in advanced.
                        > >>>>>>
                        > >>>>>>Richard
                        > >>>>>>
                        > >>>>>>
                        > >>>>>>
                        > >>>>>>
                        > >>>>>>
                        > >___________________________________________________________________
                        > >
                        > >
                        > >>>>>>__ This message has been checked for all known viruses. Virus
                        > >>>>>>scanning powered by Messagelabs http://www.messagelabs.comFor
                        > >>>>>>more information e-mail : hostmaster@
                        > >>>>>>
                        > >>>>>>
                        > >____________________________________________________________________
                        > >
                        > >
                        > >>>>>_ This message has been checked for all known viruses. Virus
                        > >>>>>scanning powered by Messagelabs http://www.messagelabs.com For
                        > >>>>>more information e-mail : hostmaster@
                        > >>>>>
                        > >>>>>
                        > >>>>
                        > >>>>Yahoo! Groups Links
                        > >>>>
                        > >>>>
                        > >>>>
                        > >>>>
                        > >>>>
                        > >>>>
                        > >>>>
                        > >>>>
                        > >>>>
                        > >>>
                        > >>>
                        > >>>
                        > >
                        > >
                        > >
                        > >
                        > >
                        > >Yahoo! Groups Links
                        > >
                        > >
                        > >
                        > >
                        > >
                        > >
                        > >
                        > >
                        >
                      Your message has been successfully submitted and would be delivered to recipients shortly.