CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialogjquery-ui-tabs
Justin
Justin

Reputation: 4539

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

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.

Upvotes: 1

Views: 1873

Answers (1)

BLSully
BLSully

Reputation: 5929

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 ;)

Upvotes: 2

Related Questions