jQuery DOM manipulation

Question

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.

Answer 1

The problem is not in your jQuery but in your PHP code ..

you need to break after each case in the switch code. Otherwise all subsequent cases get executed..

so

switch ($name) {
    case "t1":
    query_and_output_1();
    break;

    case "t2":
    query_and_output_2();
    break;

is the correct way ..
reference: http://php.net/manual/en/control-structures.switch.php