jQuery AJAX tabs + PHP

Question

Hi, seems like I'm stuck with jQuery tabs. I'm trying to pass selected tab name to some php script but is seems like it doesn't get any data.

This is how tabs normally work without any response from server side: http://pastebin.com/KBxj7p5k

And this is how I try to pass the the current tab name to the server:

$(document).ready(function() { 

    $('ul.tabs li').css('cursor', 'pointer'); 
    $('ul.tabs.tabs1 li').click(function(){ 
          var thisClass = this.className.slice(0,2); 
          $('div.t1').hide(); 
          $('div.t2').hide(); 
          $('div.t3').hide(); 
          $('div.t4').hide(); 
          $('div.' + thisClass).show('fast'); 

         $('ul.tabs.tabs1 li').removeClass('tab-current'); 
         $(this).addClass('tab-current'); 

         var name = thisClass; 
         var data = 'name='+name; 
         $.ajax ({ 
             type:"GET",
             url:"handler.php", 
             data:data, 
             success:function(html) { 
                 thisClass.html(html); 
             } 
         }); 

    });

Thanks.

Answer 1

Try this:

success:function(html) { 
    $('div.' + thisClass).html(html); 
} 

You can also restructure your code a little bit to:

$('ul.tabs.tabs1 li').click(function(){ 
     var thisClass = this.className.slice(0,2); 
     $('div.t1, div.t2, div.t3, div.t4').hide(); 

     $('ul.tabs.tabs1 li').removeClass('tab-current'); 
     $(this).addClass('tab-current'); 

     var data = 'name='+thisClass; 
     $.ajax ({ 
         type:"GET",
         url:"handler.php", 
         data:data, 
         success:function(html) { 
             $('div.' + thisClass).html(html);
             //shows the div after content is loaded:
             $('div.' + thisClass).show('fast'); 
         } 
     }); 

});