CODEWITHSUNDEEP
jqueryhtmluser-interfacetabs
vrushali
vrushali

Reputation: 19

Jquery ui tabs load tab content only when tab is clicked

I am using jquery ui tab i want to load tab content only when tab is clicked. tab content is getting dyanamically through ajax

<html>
   <head>
   </head>
   <body>
      <div id="tabs" >
        <ul>
           <li ><a href="#tabs-1" >new tab1</a> </li>
           <li ><a href="#tabs-2" >new tab2</a> </li>
        </ul>
       <div id="tabs-1">
              Tab 1
       </div>
       <div id="tabs-2">
              Tab 2
       </div>
      </div>
   </body>
</html>

Upvotes: 1

Views: 6938

Answers (2)

kamesh
kamesh

Reputation: 2424

jQuery UI tab

I have done this using jquery tab show and based on you need you can also try beforeLoad,load

DEMO

html

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Foo</a></li>
        <li><a href="#tabs-2">Bar</a></li>
    </ul>
<div id="tabs-1">
   Tab1 
</div>
<div id="tabs-2">
    Tabe2
</div>
</div>

jquery

 $("#tabs").tabs({
    show: function( e,ui ){
        alert("working");
        $( ui.panel ).html('<p>Load ajax here...</p>');
            $.ajax({
                url:'',
                type:'',
                success:function(){

                }
            });
        }
});

Upvotes: 1

Moeed Farooqui
Moeed Farooqui

Reputation: 3622

You can identify the Tabs in PHP by giving random ids. 

<div class="load_content" id="tabs" >
    <ul>
    <li ><a href="#tabs-1" >new tab1</a> </li>
    <li ><a href="#tabs-2" >new tab2</a> </li>
    </ul>

jQuery

   $(".load_content").click(function () {
        tabId = $(this).attr("id");
        $.ajax({
            type: "POST",
            url: "your/desried/path",
            data: tabId,
            success: function (data) {
                $(this).html(data);
            }
        });
    })

Upvotes: 0

Related Questions