jQuery DOM manipulation

Posted by ufw on Stack Overflow See other posts from Stack Overflow or by ufw
Published on 2010-03-14T13:55:37Z Indexed on 2010/03/14 14:15 UTC
Read the original article Hit count: 321

Filed under:
|
|
|

I have different php output in jQuery-based tabs. This output is formed from database and it consists of several <div>'s. Every time I click any tab it sends AJAX request to the php script which performs "SELECT" request and gives result back as response to AJAX request from the tab.

$(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 data = thisClass;

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

//Server-side PHP script:

<?php

$name = $_GET[name];
switch ($name) {
    case "t1":
    query_and_output_1();

    case "t2":
    query_and_output_2();

    // etc...
}
?>

The problem is that the first tab contains output that must be in second and third ones as well, the second also contains the third tab output.

Sorry for such a rubbishy question, I used to work with server side and unfortunately I'm not familiar with DOM and jQuery yet.

Thanks.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about dom