JQuery UI Buttons, Within jQuery UI tabs doesn't work after switching back and forth

Question

Beginner. I have some tabs, and for each tab content is dynamically loaded from text file kinda thing. So each tab is click, text file with content is loaded for that tab.

$('#thisMainTabs').tabs({selected:0});

<div id='thisMainTabs'>
<ul>
<li><a href='/scripts/thisMainTabs1.txt'>Tab 1 Content</a></li>
<li><a href='/scripts/thisMainTabs2.txt'>Tab 2 Content</a></li>
<li><a href='/scripts/thisMainTabs3.txt'>Tab 3 Content</a></li>
<li><a href='/scripts/thisMainTabs4.txt'>Tab 4 Content</a></li>
<li><a href='/scripts/thisMainTabs5.txt'>Tab 5 Content</a></li>
</ul>
</div>

as basic as it gets i suppose. In a few of these tabs I have jQuery buttons that are also very basic

within the document ready:

$('#btnNumber1').button({icons: {primary: 'ui-icon-circle-plus' secondardy: null} });

$('#btnNumber1').click(function () {
     alert('working');
});


<div id='btnNumber1'>add new<div>

so as an example i just used these alerts but actually these things open dialog (yeah jquery dialogs too). what seems to be happening is that each tab when selected the first time will render the button and it will work, but if I return to the tab, the button is there but doesn't do anything when clicked. not sure if its the dialogs or the buttons? but everything works the first time through.

I am new so greatly appreciate any help with this. Thanks!

EDIT: Should have clarified a few things a bit more. apologies.

So the above .tabs() and #thisMainTabs is the only thing in the main page content. with the exception of the default tabs content...nothing but text really. in each of the other tabs (there are about 5 more) I have the href pointing at links to text files. Each one of these text files contains that tabs content (markups, js, css, etc) and in each one I have a $(document).ready....which is kinda of a weird idea, but with everything else it seems to work?? I will claim beginner once again :) . So I have accordions, I have buttons, I have dialogs (all jQ), and everything was working fine, until I noticed the above mentioned behaviour. If I select each tab the first time, the content loads, the button is there, I click it, and it works (most are dialogs). switch between tabs and aslong as its that tabs first time being clicked, they all work.

However if I come back to a tab, the button is there, but does nothing.

The one I have above is an example of how I am using all the buttons deeming them buttons and setting up the click functions. Each one of these is in the document ready for each text file for each tab. I have double and triple checked all ids to ensure everything is unique; went to the extreme with IDs to ensure this wouldn't happen since collectively its A LOT of script. to me anywany....

UPDATE: Not sure if its the buttons or the dialogs I am having trouble with, the above mentioned problem seems to be isolated to those buttons that fire dialogs. Same thing though, first time fine, second time not so fine. Attached alerts to some and that works fine.

dialogs are built like this (also inside the text file completely and on document ready of that text file).

$('#thisDialogDiv').dialog({ 
                        resizable:false, 
                        width:200, 
                        modal: true, 
                        autoOpen: false, 
                        buttons: { 
                        "Ok": function() { $(this).dialog("close"); } } 
                        }); //not bothering with buttons

<div id="thisDialogDiv">
<h3>Here is the Title</h3>
<p>Here is some content on the dialog</p>
</div>

on the buttons that are referenced above call the dialogs like this

$('#btnNumber1').click(function () {
    $('#thisDialogDiv').dialog("open");
});

and that is basically it for each instance....pretty basic I guess.

I had an answer but deleted as I think I misunderstood your problem...Are you trying to add that <div id="btnNumber1">add new</div> to the contents of each tab? And is the javascript you have in the second code block in your parent file w/ thisMainTabs? or the content files? — BLSully
– BLSully, Commented Aug 31, 2012 at 12:59

BLSully · Accepted Answer · 2012-08-31 13:21:01Z

2

I think i understand better your problem now.

You have a div with an id="btnNumber1" in each tab. But those tabs all exist in the same window (or more correctly, frame) and html ids must be unique in a given document.

So you need to give the button id = btnNumber2 in your second tab, btnNumber3 in your third, etc. The reason it only works on your first tab is ALL of your code is finding the first one that existed in the DOM.

EDIT:

Justin, what if you do delegated bindings in your parent document? E.g.:

$('#thisMainTabs').on('click', '#btnNumber1', function() { alert('Button 1 clicked'); });

Does this fire 100% of the time then? I'm not suggesting that this is the solution... I think it's good you're keeping related code with the content... it becomes a maintenance nightmare otherwise, but I feel like there's something going on w/ the on-demand loading....maybe the .ready() isn't firing after the first time the tab loads? Dunno, making WAGs ;)

edited Aug 31, 2012 at 13:21

answered Aug 31, 2012 at 12:49

BLSully

5,9291 gold badge29 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Justin Over a year ago

@BLSully...thanks for the reply. I see your point, I can clarify a bit more in the question. Actually the IDs are all unique for every button, dialog, etc.

BLSully Over a year ago

@Justin: well then I'm a bit confused. It sounds to me then like there is a $(document).ready() in each of your 'content files'? I don't generally load tab contents from URLs like that (my personal method is to have skeleton code in each tab, and then populate tables/lists/etc from AJAX calls when individual tabs are activated), but I would first question whether all of your 'doc-readys' are firing. Put a console.log('ready fired') and see if you get one each time a tab loads?

Justin Over a year ago

yes the alert that i added fires...the dialog doesn't open. so perhaps this is an issue with the dialogs then. now I am really confused as well.

Justin Over a year ago

marked yours as answered as it led me to the problem. I did find a dup id of tag wrapping the divs in a table like panel. so geez all this for a dup ID!?!?! i appreciate your help though greatly! also, I will say that after correcting this, this way in which I am doing this works real well, and fast bringing data back, but I am sure that there are more sophisticated approaches like the skeleton idea...this is just kinda how I learned and am still learning. if there are any resources for learning a better way, i would appreciate that as well! thanks again!

Justin Over a year ago

yeah man....i didnt mean that in a negative way or anything. just thinking that perhaps if this approach looks good to me now, its because I am not in deep enough to know that it will cause problems later, and if you did, i appreciate the knowledge. thats all. take it easy. nah seriously i really appreciate the help!

|

Collectives™ on Stack Overflow

JQuery UI Buttons, Within jQuery UI tabs doesn't work after switching back and forth

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related