CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tabs
Janis Peisenieks
Janis Peisenieks

Reputation: 4988

jQuery ui-tabs load after the page loads

I need to create some tabs after the DOM has loaded. I create the neccessary markup using jQuery's append, and then create the tabs, but they are not working. The style is applied as it should, the tabs are shown, but all of the tab content is displayed immediately, and the tabs do nothing, when clicked upon. Do the tabs have to be initialized in some specific way?

Here's the code:

$(".edit-element").livequery(function() {
      $(".edit-element").click(
              function() {

                  //alert("Clicked");
                var id=$(this).parent().attr('id');
                 $(this).parent().append("<div id=\""+id+"_tabs\"><ul>
<li><a href=\""+id+"_tab0\">Nunc tincidunt</a></li>
<li><a href=\""+id+"_tab1\">Nunc tincidunt</a></li></ul>
<div id=\""+id+"_tab0\">Proin elit</div>
<div id=\""+id+"_tab1\">Proin elit arcu, rutrum commodo</div></div>");
$(this).remove();
$("#"+id+"_tabs").tabs();       
              }
           );

    });

The livequery() is there, because I'm loading those elements remotely, via Ajax.

Upvotes: 1

Views: 1082

Answers (2)

Janis Peisenieks
Janis Peisenieks

Reputation: 4988

I found the answer myself.

I had forgotten the # sign before the div name in the link i have. So, instead of 

<li><a href=\""+id+"_tab0\">Nunc tincidunt</a></li>

it should have been

<li><a href=\"#"+id+"_tab0\">Nunc tincidunt</a></li>

As simple as that.

Thanks for everyone that provided help!

Upvotes: 1

Alpesh
Alpesh

Reputation: 5405

Your tabs might not work because you are asigining id to tabs which already exists on that page. The id on the page should always be unique (ie you cannot use same id more then once on same page)

The below two code lines of yours indicate that you are assigning the tabs same id as it's parent and hence it might not work as expected when clicked.

 var id=$(this).parent().attr('id');
 $(this).parent().append("<div id=\""+id+"_tabs\"><ul>

Upvotes: 0

Related Questions