CODEWITHSUNDEEP
phpjqueryjquery-uijquery-ui-tabs
Scrappy Cocco
Scrappy Cocco

Reputation: 1204

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

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.....

Upvotes: 1

Views: 4534

Answers (4)

Krish R
Krish R

Reputation: 22711

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>

Upvotes: 0

Dmitriy.Net
Dmitriy.Net

Reputation: 1500

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

Upvotes: 0

Dirgh
Dirgh

Reputation: 507

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.

Upvotes: 1

fidel castro
fidel castro

Reputation: 1607

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

Upvotes: 0

Related Questions