I have a table with three columns [1] type, [2] name and [3] delete. The table identifier is "doctorTable".
This is a table format.
<table width="100%" border="0" cellspacing="0" cellpadding="3" style="font-size:12px;" id="physicianTable"> <tr> <td align="right" valign="top"><strong>Type</strong></td> <td align="left" valign="top"><strong>Name</strong></td> <td width="55" align="center" valign="top"><strong>Remove</strong></td> </tr> <?php echo $doctorRow;?> </table>
Also $ doctorRow looks like this:
$doctorRow .= '<tr class="residentDoctorID_'.$docRecid.' doctorRow '.$docRecid.'"> <td align="right"><strong>'.$type.':</strong></td> <td align="left">'.$name.'</td> <td align="center"> <a href="'.$docRecid.'" class="remove"> <img src="../../../images/1307661708_delete.png" width="16" height="16"> </a> </td> </tr>';
When I load the page, the table displays the types and name using img with the class "delete" to delete the row. I have a line delete that works well.
The part I cannot work with adds a new row to the table. The data to be uploaded is tr. The page I call has a php echo to return a table row.
echo '<tr> <td align="right"><strong>'.$recordType.'</strong></td> <td class="name">'.$doctorName.'</td> <td align="center"> <a href="'.$recordID.'" class="remove"> <img src="../../../images/1307661708_delete.png" width="16" height="16"> </a> </td> </tr>';
This is jquery ajax, which I call:
$('.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&doctorID='+recordID+'&reskey='+reskey, success: function(resp){ $('#physicianTable > tbody').append(($(resp).html())); $('.doctorID').val(''); alert(resp); } }); });
What I intend to do is [1] accept the value of the .doctorID drop-down list (this works), [2] get the value of the hidden field .reskey (this works), [3] get the target url as the "href" variable (this works ), [4] calls the ajax request and returns the information (table row) and inserts it at the end of #physicianTable (this is the part that does not work), and [5] set dropdown.doctorID to empty (this works).
When I click the .addPhysician button, I get this as a response from the success clause in the ajax request:
<tr class="residentDoctorID_2308 doctorRow 2308"> <td align="right"><strong>MMS, PA-C</strong></td> <td class="name">Dr. lastName, firstName</td> <td align="center"> <a href="2308" class="remove"> <img src="../../../images/1307661708_delete.png" width="16" height="16"> </a> </td> </tr>
However, only this is inserted into my table:
<td align="right"><strong>MMS, PA-C</strong></td> <td class="name">Dr. lastName, firstName</td> <td align="center"> <a href="2308" class="remove"> <img src="../../../images/1307661708_delete.png" width="16" height="16"> </a> </td>
As you can see, I am missing tr with its classes that I need. To try to solve the problem, I put table tags around tr, which are echoed by php. This did not work in Firefox because it returned the tr I wanted, but it wrapped it in the tbody tag, ruining the formatting of the table.
Can someone help by telling me a way to insert full php at the end of my table? I tried to be careful in my examples, but please let me know if you need more information to answer my question.