CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
Undermine2k
Undermine2k

Reputation: 1491

load jquery tabs on dynamically added content

So i'm trying to load tabs in a modal window, and it's not calling the JS .tabs() method im wondering what i'm doing wrong:

http://jsfiddle.net/uMTC7/24/

I don't know if there is a conflict between the bootstrap tab() method, but i suppose it could be a possibility.

$('.launcher').on('click',function() {

var domhtml ='<div id="tabs">'+
'<ul>'+
'<li><a href="#tabs-1">Nunc tincidunt</a></li>'+
'<li><a href="#tabs-2">Proin dolor</a></li>'+
'<li><a href="#tabs-3">Aenean lacinia</a></li>'+
'</ul>'+
'<div id="tabs-1"><p>Tab 1 Stuff</p></div>'+
'<div id="tabs-2">'+
'<p>Tab 2 Stuff</p></div>'+
'<div id="tabs-3"><p>Tab 3 Stuff</p></div></div>';


               BootstrapDialog.show({
            title: 'Draggable Dialog',
            message: domhtml,
            draggable: true,
                        buttons: [{
                label: 'Cloze',
                cssClass: 'btn-primary',
                action: function(dialog){
                    dialog.close();
                }
            }]
        });    
    //this does not load:
    $( "#tabs" ).tabs();

});

Upvotes: 0

Views: 105

Answers (1)

rakhi4110
rakhi4110

Reputation: 9281

Your script would start executing as soon as your document is ready, binding all the events to the corresponding elements. Since your div#tabs is created only on click of the button, and is not available prior to that, none of the events would get bound to it.

Hence, you have to pass your elements with all the handlers attached. You can do that either as shown below, or you can bind them within your click function and pass the final variable to the message option. Updated fiddle here

BootstrapDialog.show({
            title: 'Draggable Dialog',
            message: function(dialog){
                var $content = $(domhtml);
                $($content).tabs();
                return $content;
            },
            draggable: true,
                        buttons: [{
                label: 'Cloze',
                cssClass: 'btn-primary',
                action: function(dialog){
                    dialog.close();
                }
            }]
        });

Upvotes: 2

Related Questions