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

Re: Hyperlinks and dynamic pages inside Tabview contents

Expand Messages
  • 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 1 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.