jquery and php,the data send from my jquery code is not posted on php

Question

Below is my jquery code. It selects the corresponding tabs and according to that. It sends the html data

$(document).ready(function(){
   var $tabs = $(".tabs").tabs();
   $tabs.bind('tabsselect', function(event, ui) {
      if(ui.index==0)
      {
         var data=$('div.display').html();
         $.post("echo.php", {index:data},function success(dat){
            // returnedData
            alert(dat);
         });
      }
      else if(ui.index==1)
      {
         var data=$('div.map').html();
         alert(data); 
      }
      else if(ui.index==2)
      {
         var data=$('div.system').html();
         alert(data); 
      }
      else if(ui.index==3)
      {
         var data=$('div.control').html();
         alert(data); 
      }
   });
});

My php (echo.php):

<?php

echo $_POST["index"];

?>

I'm posting the html code too:

<div class="tabs">
<ul>
    <li><a href="echo.php"><span><div class="display">DISPLAY DATA</div></span></a></li>
    <li><a href="#fragment-2"><span><div class="map">MAP</div></span></a></li>

As brief i have to get the value display data in $_POST["index"]. Any other suggestions are welcome. Why is not working?

Answer 1

You callback in $.post should be an anonymous function. Try this:

$.post("echo.php", {index:data}, function(dat){
   // returnedData
   alert(dat);
});

Answer 2

Use browser console for debug client-side requests (firebug, dragonfly, etc) and do some debug actions on server e.g. file_put_contents('log.txt', serialize($_POST));