jQuery post then reload data using load

[drooh]

This seems to work but in chrome sometimes the re-loading of the #display div doesnt work. If I click it again, then it loads. It doesnt happen often, but just wondering if there is a better way to do this?

<script>
$(document).ready(function(){
$('#myform').submit(function(){
$.post('process.php', 
$('#myform').serialize(),
function(data){
$('#msg').html(data.pin);
}, 
'json');
$('#display').load('display.php');
return false;
});
});
</script>

<form id="myform" name="" action="" method="post" />
<div id="msg">&nbsp;</div>
<input type="text" name="pin" value="" size="20" />
<input type="hidden" name="sub" value="1" />
<input type="submit" name="sub" value="Submit" />
</form>

<div id="display">
<?include'display.php';?>
</div>

[drooh]

bump

[Fotiman]

sometimes the re-loading of the #display div doesnt work

Can you clarify what you mean by that? What data gets displayed that indicates that the reload worked?

I can see a couple potential issues.
1. The call to $.post is asynchronous, so if that is doing something that will change the result of what gets displayed by display.php, then you have a race condition where display.php may be called before the post has finished. If it needs to be updated only after the post, then move that portion to the callback of the post call.

2. If the browser caches the result, then it's possible that it will just keep pulling the cached version of display.php. You may want to look into that to make sure load is not getting a cached version.

[drooh]

What I mean is that it is not consistent. Im doing a test in which i click the submit button and it posts the info using jQuery post, then it calls a reload of the display.php into a div. In testing it sometimes works and sometimes doesnt, cant find any consistency. When I test it I click it over and over pretty fast.

I tried moving the reload call to the post callback but that seemed to work even worse.

I didnt think of the cache idea, is there a way to prevent that or know if its getting cached?

Also, im just looking for the best method to accomplish this. It doesnt even have to be with jQuery.

Basically here is what Im trying to do.

Have a list of info in a div. This info is stored in a mysql database.
There is a form and when you submit it, it enters info into the db. Then it displays that info in a div. I was trying to do this all with ajax.

The main problem seems to be with the re-loading of the div. The form always is submitted but the info doesn't always re-load. I think I may be going about that part wrong.

[Fotiman]

Sounds to me like both of the issues I mentioned could be causing you problems. So first I would move the call to load to be within the callback function of the post. This is to make sure that your add happens before your call to load. Then as a simple way to prevent caching, you can append a unique querystring to the URL, like a timestamp. For example:

load('display.php?ck=' + (new Date()).getTime());

[drooh]

Well, Im not sure what the deal is but Ive tried all of this and it just doesnt work consistently. It's causing me to re-think the whole ajax approach and go back to a traditional solution.

It seems to work good in firefox, but in Chrome and IE it is not consistent.

[drooh]

Ok, in more testing I can see that every time I submit the form data is actually being written to the db, so i know there is no issue there. The problem seems to be on the callback. I took off the whole load part and just had it return a json data variable. when i did this it behaved in much the same way. I had it return the id of the row it just entered. It would not show this every time, yet data was being written to the db? So there is some kind of bug with the callback!?!?

[drooh]

I think I am about at my wits end, I really cant not seem to find a way to may this work consistently. Surely there are others that have been able to accomplish this same task?

[drooh]

OK, at this point I have tried using ajaxForm [jquery.malsup.com...] and this seems to work much better.

I really dont know why the attempt with just jQuery would not work...