Jquery ui tabs load tab content only when tab is clicked

Question

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>

Hi, and welcome to StackOverflow. Can you please provide some more information about what you've tried, and your existing Javascript code? — andrewdotnich
– andrewdotnich, Commented Jul 3, 2014 at 6:27

kamesh · Accepted Answer · 2014-07-03 06:41:02Z

1

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(){

                }
            });
        }
});

edited Jul 3, 2014 at 6:41

answered Jul 3, 2014 at 6:32

kamesh

2,4343 gold badges28 silver badges33 bronze badges

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

1 Comment

Manoj De Mel Over a year ago

Removed: show event jQuery UI 1.10 changelog Use activate or beforeActivate

Moeed Farooqui · Accepted Answer · 2014-07-03 06:20:32Z

0

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

answered Jul 3, 2014 at 6:20

Moeed Farooqui

3,6281 gold badge20 silver badges23 bronze badges

Collectives™ on Stack Overflow

Jquery ui tabs load tab content only when tab is clicked

2 Answers 2

1 Comment

jQuery

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

jQuery

Comments

Your Answer

Sign up or log in

Post as a guest

Related