如何通过ajax / php在选项卡之间切换内容？

Question

I have divided my content in two tabs and switching between two tabs with javascript.

<div class='tab-container'>
<div class='tab-1'>
<?php 
$sql="SELECT * FROM posts WHERE status='tab1'";
echo "<div class='db'
<h2>post</h2></div>";
?>
</div>
<div class='tab-2'>
<?php
$sql="SELECT * FROM posts WHERE status='tab2'";
echo "<div class='db'
<h2>post</h2></div>";
?>
</div>
</div>   

Php code divides content between tabs through WHERE clause select * from posts where status='tab1'; so to remove post from one tab ajax request given below triggers php code which updates status of content from tab1 to tab2.

<script type="text/javascript">
$(function() {
$(".restore").click(function(){
var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
if(confirm("Restore?"))
  {
$.ajax({
type: "GET",
url: "restore.php",
data: info,
success: function(){ 
}
});
     $(this).parents(".db").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
});
</script>

So that post is removed from tab1. Idea here is to move post from one tab to another through ajax. javascript works good on removing post from one tab however for making that post appear in another tab I have to reload page as I haven't used ajax for that. So problem is I don't get how to add that post dynamically to another tab through ajax without refreshing page.

Answer 1

To get content from ajax call, you have to echo it in server side.

May be something like this

echo "hi, this is new content";

Now in ajax success

success: function(data){  
     alert(data); this will alert what was echoed in php(hi, this is new content)
}

If you want to add the content to some div in view,

$("class or id for the div").html(data);