Dynamically load ajax contents in the jQuery-UI- tabs on clicking on a link inside the tab contents

Question

I have a basic jQuery UI tab which loads ajax contents by default.

Example given below :

<script>
$(function() {
    $( "#tabs" ).tabs();
});
</script>

<div id="tabs">
<ul>
<li><a href="http://localhost/demotabs/users/list">List Users</a></li>
<li><a href="http://localhost/demotabs/jobs/list">List Jobs</a></li>
</ul>
<div id="tabs-1">
... ajax contents of user's list comes here....
plus a link <a href="http://localhost/demotabs/users/add">add new user</a>
</div>
<div id="tabs-2">
... ajax contents of jobs's list comes here....
plus a link <a href="http://localhost/demotabs/jobs/add">add new job</a>
</div>
</div>

What I want to achieve is when I click on add new user link, clear the tab 1 content and show contents of add user form loaded via ajax, keeping tab 1 selected.

Similarly if add new job is clicked, show clear the inital job listing content from tab 2 and show the contents of add job form loaded via ajax, keeping tab 2 selected.

I don't know how to make this happen, please guide me in the right direction to solve this puzzle...

Thankz.....

Answer 1

Can you try this,

    <div id="tabs-1">
    ... ajax contents of user's list comes here....
    plus a link <a href="users/add" onclick="return LoadData(this,'1')">add new user</a>
    </div>
    <div id="tabs-2">
    ... ajax contents of jobs's list comes here....
    plus a link <a href="jobs/add" onclick="return LoadData(this, '2')">add new job</a>
    </div>


     <script>
      $(function() {
        $( "#tabs" ).tabs();
     });

      function LoadData(ths, d){ 
            var baseUrlpath ='Your base url here';
             var url = baseUrlpath + $(ths).attr('href'); 
             console.log(url); 
             $( "#tabs-"+d ).load(url, function() {
                 console.log( "Load was performed." );
             });

             return false;
      }
    </script>

Answer 2

You can do something like this. set class to link and create onClick event for that link. specify url you want to call in ajaxurl in html param.

<script>
    $(function(){
         $(".tab_list).click(function(){
          var url=$(this).attr("param");
          $.ajax{
              // ....
          url: "http://yourdomain.com/path/to/file/url
              // ....
          }
       });
    })
 </script>
 <ul>
    <li><a href="http://localhost/demotabs/users/list" class="tab_list" param="users">List Users</a></li>
     <li><a href="http://localhost/demotabs/jobs/list" class="tab_list" param="jobs">List Jobs</a></li>
  </ul>

Hope this helps.

Answer 3

create a div tag inside the tab1 after the static text you want to show. in the script by using the div tag's id you can able to display the elements dynamically which comes inside of the tab1. instead of div you can also use span

Answer 4

Use closest funciton

// Use "on", when your content loading via ajax
$('#tabs div').on('click', 'a', function()
{
    var container = $(this).closest('div');
    $.post($(this).attr('href'), function(data){
        container.html(data);
    })

    return false;
})