title: How to get ID on the fly with Ajax
body: <p>I have a question for you to upgrade my knowledge.</p>
  
  <p>I am trying to create an inline editing page, the data are stored in a database.
  In the table "content" I create 2 fields for testing purpose, the "id" and the "text" field.</p>
  
  <p>If I want to modify the field with the "id=25" or id=X, I know how to do it manually, just specify in the MySQL Query "WHERE id=25", but if I have a list of 1000 entries, how can I modify the query to get the ID on the fly?</p>
  
  <p>Here is the code, I am playing on:</p>
  
  <p><strong>index.php</strong> file</p>
  
  <pre><code>&lt;style&gt;
  body {      
      font-family: Helvetica,Arial,sans-serif;
      color:#333333;
      font-size:13px;
  }
  
  h1{
      font-family: Georgia, Times, serif;
      font-size: 28px;        
  }
  
  a{
      color: #0071D8;
      text-decoration:none;
  }
  
  a:hover{
      text-decoration:underline;
  }
  
  :focus {
      outline: 0;
  }
  
  #wrap{
      width: 500px;
      margin:0 auto;              
      overflow:auto;      
  }
  
  #content{
      background: #f7f7f7;
      border-radius: 10px;
  }
  
  #editable {     
      padding: 10px;      
  }
  
  #status{
      display:none; 
      margin-bottom:15px; 
      padding:5px 10px; 
      border-radius:5px;
  }
  
  .success{
      background: #B6D96C;
  }
  
  .error{
      background: #ffc5cf; 
  }
  
  #footer{
      margin-top:15px;
      text-align: center;
  }
  
  #save{  
      display: none;
      margin: 5px 10px 10px;      
      outline: none;
      cursor: pointer;    
      text-align: center;
      text-decoration: none;
      font: 12px/100% Arial, Helvetica, sans-serif;
      font-weight:700;    
      padding: 5px 10px;  
      -webkit-border-radius: 5px; 
      -moz-border-radius: 5px;
      border-radius: 5px; 
      color: #606060;
      border: solid 1px #b7b7b7;  
      background: #fff;
      background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
      background: -moz-linear-gradient(top,  #fff,  #ededed);
      filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
  }   
  
  #save:hover
  {
      background: #ededed;
      background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
      background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
      filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
  }
  
  &lt;/style&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
   &lt;script&gt;
   $(document).ready(function() {
  
  $("#save").click(function (e) {         
      var content = $('#editable').html();    
  
      $.ajax({
          url: 'save.php',
          type: 'POST',
          data: {
          content: content
          },              
          success:function (data) {
  
              if (data == '1')
              {
                  $("#status")
                  .addClass("success")
                  .html("Data saved successfully")
                  .fadeIn('fast')
                  .delay(3000)
                  .fadeOut('slow');   
              }
              else
              {
                  $("#status")
                  .addClass("error")
                  .html("An error occured, the data could not be saved")
                  .fadeIn('fast')
                  .delay(3000)
                  .fadeOut('slow');   
              }
          }
      });   
  
  });
  
  $("#editable").click(function (e) {
      $("#save").show();
      e.stopPropagation();
  });
  
  $(document).click(function() {
      $("#save").hide();  
  });
  
   });
   &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="wrap"&gt;
  
      &lt;div id="status"&gt;&lt;/div&gt;
  
      &lt;div id="content"&gt;
  
      &lt;div id="editable" contentEditable="true"&gt;
      &lt;?php
          //get data from database.
          include("db.php");
          $sql = mysql_query("select * from content");
          $row = mysql_fetch_array($sql);     
          echo $row['id'];
          echo "&lt;br /&gt;";
          echo $row['text'];
      ?&gt;      
      &lt;/div&gt;  
  
      &lt;button id="save"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>And here is the <strong>save.php</strong> file:</p>
  
  <pre><code>include("db.php");
  
  
  $content = $_POST['content']; //get posted data
  $content = mysql_real_escape_string($content);  //escape string 
  
  $sql = "UPDATE content SET text = '$content' WHERE id = '$id' ";
  
  if (mysql_query($sql))
  {
      echo 1;
  }
  </code></pre>
  
  <p>I know that this could be a stupid question but I am a newbie.</p>
  
  <p>Thank you in advance for the help.</p>
  
  <p><strong>UPDATE:</strong>
  thanx to Luis I fixed my old problem but I don't know why if I put all the code in a while only the "Save" button of the first entry is working good, the rest not, any hint?
  At the moment I am testing only "description_text".</p>
  
  <p>Here is the "while" code:</p>
  
  <pre><code>&lt;?php 
  
      /////////// Now let us print the table headers //////////////// 
  
      $query =" SELECT * FROM gallery ORDER BY id DESC ";
  
      $result = mysql_query($query) or die(mysql_error());
  
      echo "&lt;div style='width: 100%; text-align: center;'&gt;";                   
      echo "&lt;table style='margin: auto auto;'&gt;";
      echo "&lt;tr&gt;&lt;th&gt;ID&lt;/th&gt;&lt;th&gt;Image&lt;/th&gt;&lt;th&gt;Category&lt;/th&gt;&lt;th&gt;Description&lt;/th&gt;&lt;th&gt;Added on&lt;/th&gt;&lt;/tr&gt;";
  
      while($ordinate = mysql_fetch_array($result))
      {
  
      $id     = $ordinate['id'];
      $img_name    = $ordinate['img_name'];
      $category     = $ordinate['category'];
      $description_text = $ordinate['description_text'];
      $insert_datetime    = $ordinate['insert_datetime'];
  
      echo "&lt;tr&gt;&lt;td style='width: 20px;'&gt;".$id."&lt;/td&gt;&lt;td style='width: 210px;'&gt;&lt;img src='../../upload/content/uploaded_images/". $img_name ."' width='200px'&gt;&lt;/td&gt;&lt;td style='width: 100px;'&gt;".$category."&lt;/td&gt;&lt;td style='width: 100px;'&gt;&lt;div id='status'&gt;&lt;/div&gt;&lt;div id='content'&gt;&lt;div id='editable' contentEditable='true'&gt;".$description_text."&lt;/div&gt;&lt;button id='save'&gt;Save&lt;/button&gt;&lt;/div&gt;&lt;/td&gt;&lt;td style='width: 100px;'&gt;".$insert_datetime."&lt;/td&gt;&lt;/tr&gt;";        
  
      }
      echo "&lt;/table&gt;&lt;br /&gt;&lt;br /&gt;&lt;/div&gt;";
  ?&gt;
  </code></pre>