ajax jquery adding to a table

Question

I am trying for the life of me to try and figure out the jquery ajax thing. I have an HTML dialog that comes up and one has to input some information. When they hit "add" it saves the data (call-add_patient.php) and then what I want is on the original page for the name to come up (the "success") part below.

If there are no people in the list then nothing happens (though it does go into the database so it seems to be an ajax misunderstanding). If there is at least one person in the list then the new person is added.

So, I don't get why this only works if there are people in the list. I tried putting a default empty person person and hoped this would work. It didn't.

The javascript:

$.ajax({
    url: 'call-add_patient.php',
    type: 'get',
    data: {
        name: name.val(),
        address: address.val(),
        city: city.val(),
        state: state.val(),
        zip: zip.val(),
        checked: ids.join(),
        CUID: CUID.val(),
        losap: losap.val(),
        ccnumber: ccnumber.val()
    },
    dataType: 'json',
    cache: false,
    success: function(data) {
        $("table#users tbody").append("<tr>" + "<td>" + " <a class=\"cjbutton\" style=\"font-size: 6pt;\" href=\"letter/letter.php?UID=" + data.uid + "&losap=" + data.losap + "\">print</a>" + data.name + "</td>" + "</tr>");
    },
    async: false
});

The PHP that creates the HTML table:

print '<table id="users" class="ui-widget" style="width: 100%;" 
       style="align: left;"><tbody>';

print '<tr><td>&nbsp;</td></tr>';

while ($row_pt = mysql_fetch_assoc($result_pt)) {
    print ' <tr width="100%" align="left"><td align="left">';
    print ems_print($row_pt['UID']);
    print $row_pt['Patient Name'];
    print '</td> </tr>';
}

print '</tbody></table> <br/> ';

The bottom of the call-add_patient.php:

   echo json_encode(array('uid' => $id, 'name' => $name ));

I am baffled and really need some help.

Edit: Here is a chunk of code that I thought should work but doesn't. I did not include the call-add_patient.php as I don't believe it is a problem (famous last words). Note, the "alert" provides the proper name so I think that is working. I was reading through Add table row in jQuery and tried to mimic the ideas but it still doesn't seem to be working.

<body>
<?
if( isset( $_REQUEST['submit'] ) )
{
    print "here";
?>
    <script>

$.ajax({
    url: 'call-add_patient.php', 
    type: 'get',
    data:{ name: 'anme'},
    dataType: 'json',
    success: function(data) {$( "table#users tbody" ).append( "<tr><td>" + data.name + "</td><td></td></tr>" ); alert( data.name ); },
    async:false
});

    </script>


<?
}

?>

<table id="users">
<tbody>
<tr><td>asdf</td><td>asdf</td></tr>
</tbody>
</table>

<form action="index.php" method="post">
<input type="submit" name="submit">
</form>

</body>

That does'nt look like HTML to me, looks more like PHP, and not something that is related to your ajax function? Is that really the contents of the call-add_patient.php file? — adeneo, May 26 '12 at 14:15
You're right. Not enough coffee. I assumed what was the relevant portions. I guess the part I don't understand is why the ajax would fill the table only if there is at least one thing in there. Is it something with doing .append to an empty tbody? — brechmos, May 26 '12 at 14:22
I assume you have some if/else statements to make sure that the while loop doesn't run when the ajax call is submitted. — Mihai Stancu, May 26 '12 at 14:22
That's my problem. If no one is in the list the .append doesn't add a person to the list. If the list has one person already then it works all the way I would expect it. — brechmos, May 26 '12 at 14:24
header("Content-type: application/json"): would that go at the top of the php function that returns the json? — brechmos, May 26 '12 at 14:25
Does the table "table#users" exist when there are no people in the list? — XCS, May 26 '12 at 14:26
You shouldn't print/echo anything other than the **echo json..** line (during one call) and it should have the header anywhere in the file before echoing. — Mihai Stancu, May 26 '12 at 14:27
The table#users does exist when there are no people. The while loop would be empty in the first code part so there would just be no rows (but actually the code I posted has the attempt of an empty row which didn't work either). — brechmos, May 26 '12 at 14:28
For any response the server sends there is only one **Content-type** if you're sending the content type should be text/html if you're sending json the content type should be **application/json**. — Mihai Stancu, May 26 '12 at 14:29
@Cristy said the ajax call triggers the while loop, which prints that table. — Mihai Stancu, May 26 '12 at 14:29
I tried adding the header("Content-type: application/json") and that did not solve my issue. — brechmos, May 26 '12 at 14:31
Ok open **firebug** there is a **net** tab, there you should see the HTTP requests and the HTTP responses for every thing you do (files, ajax, html everything). There's another subtab called **XHR** just for ajax calls. Look for how the data in the response looks — Mihai Stancu, May 26 '12 at 14:32
I'll take a look at firebug. The other thing I'll do is try cutting all my code down to the bare minimum. I was hoping there was something I was misunderstanding about ajax, append and empty tables. — brechmos, May 26 '12 at 14:37
And you're sure there are no errors, like "data.losap is not defined" ? — adeneo, May 26 '12 at 19:48
I updated my question with a more concise chunk of code. It seems like there is something (ie not trivial) to do with adding a row to a table when the table is empty. — brechmos, May 26 '12 at 23:19

ajax jquery adding to a table

0 Answers0