title: Adding row to end of table with ajax
body: <p>I have a table with three columns [1]type, [2]name, &amp; [3] delete. The table's id is "physicianTable".</p>
  
  <p>This is the format of the table.</p>
  
  <pre><code>&lt;table width="100%" border="0" cellspacing="0" cellpadding="3" style="font-size:12px;" id="physicianTable"&gt;
        &lt;tr&gt;
          &lt;td align="right" valign="top"&gt;&lt;strong&gt;Type&lt;/strong&gt;&lt;/td&gt;
          &lt;td align="left" valign="top"&gt;&lt;strong&gt;Name&lt;/strong&gt;&lt;/td&gt;
          &lt;td width="55" align="center" valign="top"&gt;&lt;strong&gt;Remove&lt;/strong&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;?php echo $doctorRow;?&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>Also the $doctorRow looks like this:</p>
  
  <pre><code>$doctorRow .= '&lt;tr class="residentDoctorID_'.$docRecid.' doctorRow '.$docRecid.'"&gt;
                 &lt;td align="right"&gt;&lt;strong&gt;'.$type.':&lt;/strong&gt;&lt;/td&gt;
                 &lt;td align="left"&gt;'.$name.'&lt;/td&gt;
                 &lt;td align="center"&gt;
                   &lt;a href="'.$docRecid.'" class="remove"&gt;
                     &lt;img src="../../../images/1307661708_delete.png" width="16" height="16"&gt;
                   &lt;/a&gt;
                 &lt;/td&gt;
  
                 &lt;/tr&gt;';
  </code></pre>
  
  <p>When I load a page the table appears with types and name with a img with the class "remove" to delete the row. I have got the deletion of the row working well.</p>
  
  <p>The part that I can't get working is adding a new row to the table. The data that is to be loaded is in the form of a tr. The page that I call has a php echo to return a table row.</p>
  
  <pre><code>echo '&lt;tr&gt;
         &lt;td align="right"&gt;&lt;strong&gt;'.$recordType.'&lt;/strong&gt;&lt;/td&gt;
         &lt;td class="name"&gt;'.$doctorName.'&lt;/td&gt;
         &lt;td align="center"&gt;
         &lt;a href="'.$recordID.'" class="remove"&gt;
           &lt;img src="../../../images/1307661708_delete.png" width="16" height="16"&gt;
         &lt;/a&gt;
         &lt;/td&gt;
        &lt;/tr&gt;';
  </code></pre>
  
  <p>This is the jquery ajax that I call:</p>
  
  <pre><code>$('.addPysician').live('click', function(){
          var recordID = $('.doctorID option:selected').val();
          var reskey = $('.reskey').val();
          var href = 'doctor/editResidentDoctor.php'
          $('.fade').remove();
          $.ajax({
              url: href,
              type: 'get',
              dataType: 'html',
              data: 'action=add&amp;doctorID='+recordID+'&amp;reskey='+reskey,
              success: function(resp){
                  $('#physicianTable &gt; tbody').append(($(resp).html()));
                  $('.doctorID').val('');
                  alert(resp);
              }
          });
      });
  </code></pre>
  
  <p>What I intend this to do is to [1] take the value of the dropdown box .doctorID (this works), [2] get the value of the hidden field .reskey (this works), [3] get the target url as the variable 'href' (this works), [4] call a get ajax request and return the information (table row) and insert it at the end of the #physicianTable (this is the part that is not working), and [5] set dropdown .doctorID to be blank (this works).</p>
  
  <p>When I press the button .addPhysician I get this as the resp from the success clause in the ajax request:</p>
  
  <pre><code>&lt;tr class="residentDoctorID_2308 doctorRow 2308"&gt;
     &lt;td align="right"&gt;&lt;strong&gt;MMS, PA-C&lt;/strong&gt;&lt;/td&gt;
     &lt;td class="name"&gt;Dr. lastName, firstName&lt;/td&gt;
     &lt;td align="center"&gt;
       &lt;a href="2308" class="remove"&gt;
         &lt;img src="../../../images/1307661708_delete.png" width="16" height="16"&gt;
       &lt;/a&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>However, only this is inserted into my table:</p>
  
  <pre><code>&lt;td align="right"&gt;&lt;strong&gt;MMS, PA-C&lt;/strong&gt;&lt;/td&gt;
  &lt;td class="name"&gt;Dr. lastName, firstName&lt;/td&gt;
  &lt;td align="center"&gt;
    &lt;a href="2308" class="remove"&gt;
      &lt;img src="../../../images/1307661708_delete.png" width="16" height="16"&gt;
    &lt;/a&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>As you can see I am missing the tr with its classes that I need. To try to solve the problem  I put table tags around the tr that is in the php echo. This didn't work in Firefox because it did return the tr that I wanted but it wrapped it in a tbody tag messing up the table formatting.</p>
  
  <p>Can anyone help by telling me a way to insert the full php into the end of my table? I tried to be thorough in my examples, but please let me know if you need more info to help answer my question.</p>