0

I have a set a jQuery UI tabs that pull in a multitude of information. On one of those tabs is a table. In the table, I have a click event on one of the columns. When the user clicks on that column, an event is supposed to execute some code and then programatically change a tab selection.

I've used an "on" function for the click event, since the table does not yet exist at the time the DOM originally renders. I can interact with the Ajax-created data, but I'm not able to update the tab selection. Can someone please explain to me what's going on?

Here's my click event: 

$("#summaryTable td").live("click",function() {
    var myCol = $(this).index();
    if (myCol == 0) {
        var $tr = $(this).closest('tr');
        var myRow = $tr.index();
        $("#divSummary").show();
        $("#storeDetails").hide();   
        selectedStoreTab = $.trim($(this).html());
        $("#store").val(selectedStoreTab);
        lastSelectedStoreTab = selectedStoreTab;
        //loadData();

        var tabDivSelector = "#tab-container-" + selectedMarketTab;
        var tabSelector = "#tab-" + selectedStoreTab;
        var index = $(tabDivSelector + " a[href='" + tabSelector + "']").parent().index();  // Gets the index correctly!

        $(tabDivSelector).tabs( "select", index );  // Doesn't set the tab!
    }
});

I've validated that the index gets set properly in Firebug and that the DIV is named correctly. The index just isn't being applied to the tab set and I cannot figure out why. I've also tried "live" and "delegate" in place of "on" with no success.

Y0lk
  • 396
  • 5
  • 18
Fast Old Man
  • 95
  • 3
  • 13
  • 1
    `.live` is deprecated. use `$(document).on('click', '#summaryTable td', function () {...});` A jsfiddle would help though. – Pedro Estrada Jul 29 '13 at 18:38
  • where is `selectedMarketTab` coming from? – Pedro Estrada Jul 29 '13 at 18:40
  • Thanks for your reply, @Pedro Estrada. selectedMarketTab is set in the tab definition "select" method, which I did not include above. I tried using the `$(document).on` reference above, but there is no change. I'm able to do alerts on tabDivSelector, tabSelector, and index; however I'm unable to use those variables to update the tab selection. Unfortunately, I'm unable to access jsfiddle at work. – Fast Old Man Jul 29 '13 at 18:48
  • Have a look at this http://jsfiddle.net/vpJC3/ I found this here http://stackoverflow.com/a/4646118/1524085 it seems like jquery UI is constantly changing. – Pedro Estrada Jul 29 '13 at 19:29
  • Yes, I saw this post while poking around for an answer originally. I'm using jQuery 1.8, which I believe coincides with the method being used here to set tabs programmatically. I'm somehow convinced that I'm unable to interact with pre-ajax rendered objects from this method. Can that be true? Perhaps I'm not placing the `$(document).on` reference in the appropriate place? – Fast Old Man Jul 29 '13 at 19:48
  • Which jquery ui version are you using? – Pedro Estrada Jul 29 '13 at 19:52
  • I mentioned in my previous comment that I'm using jQuery UI 1.8. – Fast Old Man Jul 29 '13 at 20:26
  • I made a jsfiddle with somewhat your requirements. I didnt have your full javascript or your html. http://jsfiddle.net/8rb49/ I'm using jquery 1.8.2 and jquery UI 1.8. I know you dont have access at work. If you can get to it some other way, it will help you greatly – Pedro Estrada Jul 29 '13 at 20:51
  • Thank you so much for taking the time to review my problem. I had a chance to review and run your jsfiddle and I can see that it's working properly. From my standpoint, I've checked that the tab container and the tab id are correct (via alert and Firebug) and that the fragment that is supposed to set the tab is the same (`$(tabDivSelector).tabs("select", index);`); however the tab is still not changing. No errors. Just nothing. Is there anything else that you, or someone else, can suggest? – Fast Old Man Jul 30 '13 at 00:33
  • Is the website you're working on live? – Pedro Estrada Jul 30 '13 at 01:34
  • No, sir. I wish it were. Would posting more code help? Would it be beneficial to know that these are nested tabs? Is there some tool I can use to help determine what is happening? There's no console messages in Firebug. Just nothing happens. – Fast Old Man Jul 30 '13 at 01:40
  • if you could set up a jsfiddle to recreate the problem it would be ideal. I can help you debug from there and solve this dilemma haha – Pedro Estrada Jul 30 '13 at 01:46
  • I wish I could - I haven't used jsFiddle before and the complexity of my situation (nested tabs, ajax-loaded content, and binding of events) makes it unrealistic for me to recreate. Would it help if I posted more code? Is there some way for me to trace what's going on on a more granular level? – Fast Old Man Jul 30 '13 at 02:15
  • In this situation what i would do is use chrome (cause i don't like firebug) and put a break point in this event and step through it, making sure that all the variables are getting set correctly, and try to see if one of them is causing a hiccup. Also during the break point you can run jQuery methods from the console. Posting more code would help, just to see if maybe there's a typo somewhere. – Pedro Estrada Jul 30 '13 at 03:06

1 Answers1

0

I placed the bind event in a function and called the function on document load and again after the AJAX called completed, therefore reinitializing the click event on the tabs and content.

Fast Old Man
  • 95
  • 3
  • 13