jQuery DOM manipulation
- by ufw
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.
