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

JavaScript and AJAX Forum

    
jQuery post then reload data using load
jQuery post then reload data using load
drooh




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

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




msg:4356724
 3:19 pm on Aug 30, 2011 (gmt 0)

bump

Fotiman




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


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




msg:4356766
 5:13 pm on Aug 30, 2011 (gmt 0)

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




msg:4356796
 6:50 pm on Aug 30, 2011 (gmt 0)

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




msg:4356807
 7:42 pm on Aug 30, 2011 (gmt 0)

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




msg:4356816
 7:59 pm on Aug 30, 2011 (gmt 0)

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




msg:4356849
 9:15 pm on Aug 30, 2011 (gmt 0)

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




msg:4356869
 9:49 pm on Aug 30, 2011 (gmt 0)

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

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