Welcome to WebmasterWorld Guest from 54.145.208.64

Forum Moderators: open

Message Too Old, No Replies

AJAX append results from JSON

   
8:34 pm on Aug 16, 2012 (gmt 0)



Hi everyone

I've got a small form (4 inputs) that inserts data into a MySQL database via AJAX, this works fine. What I'd like to achieve is instead of refreshing the page to show the result, have the result appended to the page. I've tried everything I know (limited) and now asking for help.

Form:

<form action="till.php" method="post" name="insert-form" autocomplete="off">
<div class="row-sidebar">
<label>Reference</label>
<input type="text" id="ref" name="ref" class="field required text-field" />
<div class="cl">&nbsp;</div>
</div>
<div class="row-sidebar">
<label id="label_in">In</label>
<input type="text" id="in" name="in" class="field required text-field" />
<div class="cl">&nbsp;</div>
</div>
<div class="row-sidebar">
<label id="label_out">Out</label>
<input type="text" id="out" name="out" class="field required text-field" />
<div class="cl">&nbsp;</div>
</div>
<div class="row-sidebar">
<label>Details</label>
<input type="text" id="detail" name="detail" class="field required text-field" />
<div class="cl">&nbsp;</div>
</div>
<div class="row-sidebar">
<input name="insert" type="submit" class="submit-btn till_insert" id="insert" value="Submit" />
<div class="cl">&nbsp;</div>
</div>
</form>


Javascript:

<script>$(function() {
$(".till_insert").click(function() {
var ref = $("input#ref").val();
var inn = $("input#in").val();
var out = $("input#out").val();
var detail = $("input#detail").val();
var till_insert = ("true");
var dataString = 'ref='+ ref + '&inn=' + inn + '&out=' + out + '&detail=' + detail + '&till_insert=' + till_insert;

$.ajax({
type: "POST",
url: "includes/insert.php",
data: dataString,
success: function() {
//alert("Success"); //Alert Shows Success
//alert (JSON.stringify(html)); //No Alert
$( "#till tbody" ).append( "<tr>" +
"<td>" + html(ref) + "</td>" +
"<td>" + html(inn) + "</td>" +
"<td>" + html(out) + "</td>" +
"<td>" + html(detail) + "</td>" +
"</tr>" );
}
});
//Refresh page when true, does nothing when false! Commented out for now
//return false;
});
});
</script>


insert.php

if(isset($_POST['till_start'])){
$sql = "INSERT INTO till_log (tl_ref, tl_date, tl_time, tl_in, tl_out, tl_detail) VALUES ('Start Balance', NOW(), CURTIME(), '$_POST[till_start]', '', '')";
$result = mysql_query($sql) or die(mysql_error()); }


I know I haven't escaped any of the values yet, I'll do that once it's working.

What happens at the moment is the data is inserted into the database and the page refreshes. If I change the append code to static then it puts that on the page but I can't get it working using the data from the form.

Thanks in advance
11:55 pm on Aug 16, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



It looks like your callback function is calling an "html" function, which doesn't seem to be defined in your code.
12:08 am on Aug 17, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Put onsubmit handler on form to do the ajax stuff, this will ensure normal submit is disabled and all routes to submit, such as pressing enter are covered.
12:10 am on Aug 17, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



I second what daveVk said.
2:42 pm on Aug 27, 2012 (gmt 0)



I've looked into the onsubmit handler but can't get my head around what I need to change. The strange thing is it works by either pressing "enter" or clicking the button.

The html bit was copied from another section within the page. I was just trying different things before asking for help.

Any ideas on how to put the info on the page without refreshing?
12:30 am on Aug 28, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



There are problems in your success function, try something simpler until to you get rest working.

success: function(reply) { alert(reply); }

the 'return false;' is important leave it in.

to convert from click to submit

$(".till_insert").click(function() {

becomes

$("form").submit(function() {
8:27 pm on Aug 28, 2012 (gmt 0)



Thanks daveVk

I have changed the PHP to echo the variables:

$arr = array("ref" => $ref, "inn" => $in, "out" => $out, "detail" => $detail, "success" => "True");
echo json_encode($arr);


Then using alert (JSON.stringify(response)); in the success function I get the following result (which looks correct)

{"ref":"Test","inn":"","out":"1.00","detail":"#*$!","success":"True"}


I can see the php side of it working now. I have changed the rest of the success function to the following but it still doesn't work

$( "#till tbody" ).append( "<tr>" +
"<td>" + response(ref) + "</td>" +
"<td>" + response(inn) + "</td>" +
"<td>" + response(out) + "</td>" +
"<td>" + response(detail) + "</td>" +
"</tr>" );


Thanks
11:36 pm on Aug 28, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Try

$( "#till tbody" ).append( "<tr>" +
"<td>" + response.ref + "</td>" +
"<td>" + response.inn + "</td>" +
"<td>" + response.out + "</td>" +
"<td>" + response.detail + "</td>" +
"</tr>" );