title: Update a table row with Jquery and Ajax
body: <p><strong>The Problem:</strong></p>
  
  <p>When I attempt to update a table row using AJAX/JQUERY, the row is updated, but instead of replacing the old row, it appears at the top of the table. See the attached image:</p>
  
  <p><img src="https://i.stack.imgur.com/ejg4O.png" alt="The Problem"></p>
  
  <p><strong>The Code</strong></p>
  
  <p>Here is the function that calls the update and refresh:</p>
  
  <pre><code>function ajaxRefresh(sid, dbitem, newinfo)
      {   
          // sid -&gt; spiceID
          // dbitem -&gt; image, fill, etc
          // newinfo -&gt; what to update
          // refreshDiv -&gt; image/spice
  
  
          var loadUrl = "update.php"; // 
          var ajax_load = "&lt;img src='images/load.gif' alt='loading...' /&gt;"; // loading gif/image
          var toBeReloaded = "#siditemrow" + sid;
  
          alert("Sid: " + sid + " dbitem: " + dbitem + " newinfo: " + newinfo);
  
  
          $(toBeReloaded).html(ajax_load);
  
          $.get(
              loadUrl,
              {sid: sid,
               dbitem: dbitem,
               newinfo: newinfo},
              function(responseText){
                  $(toBeReloaded).html(responseText);
              },
              "html"
          );
      }
  </code></pre>
  
  <p>And here is a an example of my table's architecture, assuming that there is only a single row:</p>
  
  <pre><code>&lt;table cellspacing="0"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th class="image"&gt;Image&lt;/th&gt;
                      &lt;th class="spice"&gt;Spice&lt;/th&gt;
                      &lt;th class="cost"&gt;Cost&lt;/th&gt;
                      &lt;th class="notes"&gt;Notes&lt;/th&gt;
                      &lt;th class="coupons"&gt;Coupons&lt;/th&gt;
                      &lt;th class="control"&gt;Chef Controls&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
  
              &lt;!-- Ajax Refresh of entire row--&gt;
              &lt;div id="siditemrow#"&gt;
                  &lt;tr class="alt"&gt; OR &lt;tr&gt;
                      &lt;td class="image" align="center"&gt;
                          &lt;!-- Ajax Refresh of fill update --&gt;
                          &lt;div id="siditemfill#"&gt;
                              &lt;div class="outergreen"&gt;
                                  &lt;div class="imagegreen"&gt;                                 
                                      &lt;!-- Ajax Refresh of image update --&gt;
                                      &lt;div id="siditemimage#"&gt;
                                          &lt;img class="itemimage" src="resources/images/imagesource.png"/&gt;
                                      &lt;/div&gt;
                                      &lt;!-- Ajax Refresh of image update --&gt;                                  
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!-- Ajax Refresh of fill update --&gt;                      
                      &lt;/td&gt;
                      &lt;td class="spice"&gt;spicename&lt;/td&gt;
                      &lt;td class="cost"&gt;~$#.##&lt;/td&gt;
                      &lt;td class="notes"&gt;description&lt;/td&gt;
                      &lt;td class="coupons"&gt;link &amp; store&lt;/td&gt;
                      &lt;td class="control"&gt;
                          &lt;!-- Ajax Refresh of fill update --&gt;
                          &lt;div id="siditemchefcontrols&lt;?php print $row['sid']; ?&gt;"&gt;
                              &lt;img class="more" src="images/uparrow.png" onClick="itemFill('up','currentquantity','id#')" /&gt;
                              &lt;img class="less" src="images/downarrow.png" onClick="itemFill('down','currentquantity','id#')" /&gt;
                              &lt;img class="addimage" src="images/photoupload.png" onClick="openImageUpload('id#')" /&gt;
                              &lt;img class="settings" src="images/settings.png" /&gt;
                          &lt;/div&gt;
                          &lt;!-- Ajax Refresh of fill update --&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/div&gt;
              &lt;!-- Ajax Refresh of row update --&gt;
  
  
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>The code created by the php script that is placed above the table is an identical match to the code between </p>
  
  <pre><code>&lt;div id="siditemrow#"&gt;
  </code></pre>
  
  <p>and it's closing</p>
  
  <pre><code>&lt;/div&gt;
  </code></pre>
  
  <p><strong>Questions:</strong></p>
  
  <ol>
  <li>How do I update a table row without it appearing above the content it's supposed to replace? (What am I doing wrong?)</li>
  <li>What is the most efficient (quickest response time) way to go about JQuery and Ajax for user initiated updates? (both CODE and Approach)</li>
  <li>Any other tips/tricks for increasing AJAX/JQuery efficiency/times?</li>
  </ol>
  
  <p>Any and all help appreciated! Thanks! </p>
  
  <p><strong>Edit:</strong>
  It should probably be mentioned that the code for the table structure has had PHP portions replaced to make reading easier. Every row has unique identifiers for its divs and content generated by PHP.</p>