views:

92

answers:

3

I'm just not getting event delegation with jquery ui tabs, or at all!

I got the code for jquery ui tabs and loading the pages with ajax working perfectly. However I'm having trouble understanding event-delegation. I load 4 tabs with external content, depending on the tab which is opened. Inside those tabs I would like to attach the same widgets to the input buttons and links. So far my code looks like this

JS for rest of page already loaded

$("button, input:submit, a", ".create_button").button();
 $("a.edit_button").button({
         icons: {primary: 'ui-icon-pencil'}
    });
   $("a.delete_button").button({
         icons: {primary: 'ui-icon-circle-close'}
    });
   $("a.active_button").button({
         icons: {primary: 'ui-icon-lightbulb'}
    });

JS For Tabs:

<script type="text/javascript">
         $(document).ready(function() {
          $("#tabs").tabs({
           ajaxOptions: {error: function(xhr, status, index, anchor) 
                                         {$(anchor.hash).html("Could not load");}},
           selected: 0})
         });
</script>

HTML

<div id="tabs">
  <ul>
    <li><a href="ajax_passes/member_id/9">Pass Information</a></li>
    <li><a href="ajax_entries/member_id/9">Entries</a></li>
    <li><a href="ajax_event/member_id/9">Event Administration</a></li>
    <li><a href="ajax_profile/member_id/9">Profile</a></li>
  </ul>
</div>

I've learned here on stack overflow that I have to attach a click event to my #tabs div with live(). Best guess anyway.

however I cannot find any examples that work for me and my limited understanding of event delegation.

Any help is appreciated. Rick

A: 

Right now, you have "error" being handled, but nothing else. You need to handle "success" or "complete"... actually, why are you using AJAX at all? You don't appear to be requesting any data from off of the page?

ThatSteveGuy
Thanks for your response Steve,I took the error handling directly from the jquery ui example for ajax.I am loading 3 seperate forms from the tabs successfully, I would like for the submit buttons on those forms to populate with the ui theme from the rest of the page. The css is attaching but the javascript is not.<input type="submit" class="create_button" /> on the ajax loaded content does not work. I want to either "rebind" or use the "event delegation" method to make that input to behave, but I'm not sure how.http://www.learningjquery.com/2008/03/working-with-events-part-1Thanks
Rick Weston
A: 

It seems like the key to your question is this:

Inside those tabs I would like to attach the same widgets to the input buttons and links.

Sounds like you want to use the "show" method of the tabs widget:

 $(document).ready(function() {
      $("#tabs").tabs({
       ajaxOptions: {error: function(xhr, status, index, anchor) 
                                     {$(anchor.hash).html("Could not load");}},
       selected: 0,
       show: function() {
         $([selectors for buttons or jQuery UI widgets in your tabs]).button();
       }
    })
 });

FWIW, this question is not really about event delegation. That article is useful in understanding the concept.

RwL
Thanks RwL,It was my understanding that show was to effect the display and easement of the div you are selecting for. But I'm very new at this, coming from php and not sure of anything. I tried your code snippet with the appropriate selectors and it does not work.I'm trying for the event delegation method mentioned on the faq http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3FSeems to be a very common question, but I'm so unsure of syntax at this point that I can't seem to make the examples work to my particular needs
Rick Weston
Yeah, show is just an event that the tabs fire when a tab is shown, so you can script whatever you want to happen: http://jqueryui.com/demos/tabs/#event-showAnyway, if it didn't work, it may be that the tabs' show event is firing before the ajax content is loaded. Try that line I provided -- $([your selectors]).button(); -- in the success: function of your ajaxOptions object.
RwL
Also, again, you really don't need to be too concerned with delegation. What you need to do here is much more like the Re-binding example on the link in your comment, except instead of re-binding event handlers to something, you'll need to be re-initializing button widgets on the selectors that have been newly inserted into your DOM. It's a shame that livequery plugin stuff is still there in the docs; that's old -- that plugin has been baked into the core since then: http://api.jquery.com/live/
RwL
To be a litte more clear, .live() works via event delegation, but I don't think this is appropriate to your case, because .live() is used for attaching event handlers to future-added elements, not running other methods like .button() on them.
RwL
Still isn't working, but thru this process of talking to you my syntax is getting better. Is there a way to show you my adjusted code on this site?
Rick Weston
Sure; have you got a publicly-accessible dev link?
RwL
A: 

Turns out that .live() only works on events. So though I could bind something to the links, it would not actually take affect until the link has an event take place, i.e. click or hover.

A workaround would be to dynamically add events to the links with the loaded content, but that is quite tricky and adds a lot of overhead to the application. Instead I chose to style things within loaded content in a different way. In the process of learning about this, I did end up using live() for form submission and a reload of the content after the submission takes place.

Thanks guys for your help. RwL. You ended up not actually answering the question, but your prodding sent me in the right direction and I learned a lot. I was ultimately able to solve the problem myself. You know, give a man fish or teach him to fish, yadi yadi yadi...

Thanks!

Rick Weston