Welcome to WebmasterWorld Guest from 54.205.96.97

Forum Moderators: open

jQuery post then reload data using load

jQuery post then reload data using load

   
9:02 pm on Aug 29, 2011 (gmt 0)

5+ Year Member



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>
3:19 pm on Aug 30, 2011 (gmt 0)

5+ Year Member



bump
4:35 pm on Aug 30, 2011 (gmt 0)

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




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.
5:13 pm on Aug 30, 2011 (gmt 0)

5+ Year Member



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.
6:50 pm on Aug 30, 2011 (gmt 0)

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



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());
7:42 pm on Aug 30, 2011 (gmt 0)

5+ Year Member



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.
7:59 pm on Aug 30, 2011 (gmt 0)

5+ Year Member



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!?!?
9:15 pm on Aug 30, 2011 (gmt 0)

5+ Year Member



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?
9:49 pm on Aug 30, 2011 (gmt 0)

5+ Year Member



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...
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month