homepage Welcome to WebmasterWorld Guest from 54.211.235.255
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
AJAX append results from JSON
LinusIT




msg:4485616
 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

 

Fotiman




msg:4485725
 11:55 pm on Aug 16, 2012 (gmt 0)

It looks like your callback function is calling an "html" function, which doesn't seem to be defined in your code.

daveVk




msg:4485730
 12:08 am on Aug 17, 2012 (gmt 0)

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.

Fotiman




msg:4485732
 12:10 am on Aug 17, 2012 (gmt 0)

I second what daveVk said.

LinusIT




msg:4488684
 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?

daveVk




msg:4488910
 12:30 am on Aug 28, 2012 (gmt 0)

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() {

LinusIT




msg:4489249
 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

daveVk




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

Try

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved