jQuery - Load data by ajax

This is whole explore.php

<head>

<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta name="keywords" content="keywords, go, here, seperated, by, commas" />
<meta name="description" content="Short description of the site goes here." />

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

<!-- jQuery -->
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
 $(function()
 {

  $('#close').live("click", function()
  {
   $("#information").animate({"height": "toggle"}, { duration: 0 });
   $("#close").animate({"height": "toggle"}, { duration: 0 });
   $("#blackout").animate({"height": "toggle"}, { duration: 0 });
  });

  $('td').live("click", function()
  {
   var currentId = $(this).attr('id');
   $('td.add').removeClass('add');
   $(this).addClass('add');
   $("#information").animate({"height": "toggle"}, { duration: 0 });
   $("#blackout").animate({"height": "toggle"}, { duration: 0 });
   $("#close").animate({"height": "toggle"}, { duration: 0 });
   $("#information").load("info.php" + "?coords=" + currentId); 
  });

 });
</script>


<!-- Tiitel -->
<title>MiterRa</title>
</head>

<body>

<div id="blackout"></div>

<div class="container">

<div id="information">
</div>
<div id="close">
</div>

<?php

   mysql_connect("localhost", "root", "") or die(mysql_error());
 mysql_select_db("grid") or die(mysql_error());

 $query = "SELECT * FROM grid";
 $result = mysql_query($query) or die(mysql_error());

 $login = "Ardivaba";

 $map_width = 10;
 $map_height = 10;
 $id = null;

   $map = array();
 for($r = 0; $r < $map_width; $r++)
 {
    $map[$r] = array();
    for($c = 0; $c < $map_width; $c++)
    {
       $map[$r][$c] = array("type" => null, "user" => null);
    }
 }

 // Population, here i will create an array map
 while($row = mysql_fetch_assoc($result))
   {
      $x = $row['x'] -1;
      $y = $row['y'] -1;
      $type = $row['type'];
      $user = $row['user'];

      $map[$x][$y] = array("type" => $type, "user" => $user);
   }

   // Generation, here i will display table
   echo "<div id=\"map\">";
   echo "<table>";

 $x_id = 0;
 $y_id = 0;

   for($r = 0; $r < $map_width; $r++)
   {
     if($x_id >= $map_width){
  $x_id = 1;
  }
  else
   $x_id = $x_id+1;

      // Begin Row
      echo "<tr>";
      for($c = 0; $c < $map_height; $c++)
      { 

  if($y_id >= $map_height){
  $y_id = 1;
  }
  else
   $y_id = $y_id+1;

         $space = $map[$c][$r];
         if($space['type'] == "base")
         {
            // Base in position
            if($space['user'] == $login)
               $class = "user_base";
            else
               $class = "enemy_base";
         }
         else
            $class = "free";

         if($space['type'] == "deployable")
         {
            // Can i deploy squads here?
            if($space['user'] == $login)
               $class = "deployable";
         }

         if($space['type'] == "squad")
         {
            // Base in position, mine or enemies?
            if($space['user'] == $login){
               $class = "user_squad";
   }
   else
      $class = "enemy_squad";

         }

         // Print Column
         echo "<td class=\"$class\" id=\"" . $y_id . "M" . $x_id . "\" ><p></p></td>
   ";
       }
       // End Row
       echo "</tr>";
   }
   echo "</table>";
   echo "</div>";
?>

</div>

</body>

</html>

This is my coordinate table: http://www.upload.ee/image/642815/table.jpg

This is my database structure upload.ee/image/642819/database.jpg

Now, if you underastand the code, you see that first i generate array for map (table), and then i will add coordinates from database. What i'm asking is that, what changes i should do in case i could start an ajax script (by jQuery), that will refresh data from database every 5 seconds and display that data on map? I wouldt not want to refresh the whole table, only the data from database.

I would really appreciate any help, as i've been strugling with that almost two days now.

ansaurus

tags:

views:

answers:

jQuery - Load data by ajax

related questions