title: Dynamically updating a table row using AJAX
body: <p>Normally, I'm a big stickler for jfGit, but I've been looking all over the web and can't get this code to work.</p>
  
  <p><strong>My setup:</strong></p>
  
  <ul>
  <li>index.php - a page containing a table populated by data from a mysql database.</li>
  <li>update.php - a php script able to output a table row in html</li>
  </ul>
  
  <p><strong>Intention</strong></p>
  
  <p>What I want to do: by clicking on a link or button, a specific table row is updated.</p>
  
  <p><strong>Current solution</strong></p>
  
  <p>This is the code as I tried it so far.</p>
  
  <p>Ajax/jQuery code, right under the body tag (is that the right location?):</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
  $('a.pop').click(function() { 
  var popID = $(this).attr('rel');
  $.ajax({
          url: 'update.php',
          method: 'GET',
          data: 'userID=' + popID,
          success: function(returnData){
               $(popID).html(data);
                $(popID).dialog();
                alert('Load was performed.');
          }
      });
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>And the table code (printed using php):</p>
  
  <pre><code>echo "&lt;div id=\"$ID\"&gt;";
  // all tr + td from table
  echo "&lt;td&gt;&lt;a href=\"#\" id=\"clickingEvent\" class=\"pop\" rel=\"$ID\"&gt;Update&lt;/a&gt;&lt;/td&gt;\n";
  echo "&lt;/tr&gt;\n";
  echo "&lt;/div&gt;";
  </code></pre>
  
  <p><strong>Result</strong></p>
  
  <p>Currently, I don't get any result at all, AJAX isn't even loading the php page. After I click the update button, nothing happens.</p>
  
  <p>Any help would be greatly appreciated, thank you in advance :)</p>
  
  <p>EDIT:</p>
  
  <p><strong>The partial solution</strong></p>
  
  <p>The Ajax part of the code now properly works, thanks to all for your input!</p>
  
  <p>What happens now though is that it <strong>adds</strong> a NEW row in front of the table tag, and the old row remains. When I take a look at the generated source it says that there's a new row with the div id of 'popID' that I specified. Scrolling down, it appears that the div tag of the old row was removed.</p>
  
  <p>Any way I could solve that?</p>