CODEWITHSUNDEEP
javascriptjqueryajaxjson
Lee
Lee

Reputation: 1280

Jquery .post not working on a popup div

I am at my wits end with this, spent hours on it...

I have a div that pops up with a button, that button also fills data in to div html sections...

That all works, the bit that doesn't work is when i use ajax to post to a php file and back again.... Well it works but only on the second click not the first...

$.post("getprice.php", { unit: $('input[name=property]:checked').val() } ,function(data){
        $('#price').html(data);
     });

$timenow = time();
$unit=$_POST['unit'];
$query = "SELECT * FROM rl_pricing WHERE start_date < $timenow AND stop_date > $timenow AND unit=$unit";
$results = mysql_query($query);
$row = mysql_fetch_array( $results );
echo "Price: ".$row['3day'];

Just doesn't seem to work on first click...

On this page http://offline.raileisure.com

click the get price button and it won't show the price... click away and click on it again and it works....

Hope that makes sense

EDIT:

So the code does do what its supposed to, but it just doesn't work on first click, but does on second.... its something to do with the popup div... if i get it to update on the same page its fine

Upvotes: 0

Views: 488

Answers (3)

Jamie Dixon
Jamie Dixon

Reputation: 53991

The first time the button is clicked, the price is added to a location that is currently hidden:

<div id="info" style="display:none;">
<form action="lee.php" method="post">
<table cellspacing="0" cellpadding="0" border="0" align="center" width="75%">
<tbody>
<tr>
<td align="center" colspan="3">
<div id="extrasinfo"></div>
<div id="price">Price: 499</div>
<input id="btowelsinput" type="hidden" value="" name="btowelsinput">
<input id="bcotinput" type="hidden" value="" name="bcotinput">
<input id="bbouncyinput" type="hidden" value="" name="bbouncyinput">
<input id="bpetfeeinput" type="hidden" value="" name="bpetfeeinput">
<input id="boveroccinput" type="hidden" value="" name="boveroccinput">
</td>
</tr>
</tbody>
</table>
<input type="submit">
</form>
</div>

UPDATE

The problem is, when you click the button, there's 2 HTML elements with the id "price". This isn't allowed in HTML and your code is getting confused. It's adding the price to the first div with that id but not the second (the one you're expecting).

UPDATE 2

By the looks of it, the entire HTML segment where the price should be displayed is being duplicated on your page.

Upvotes: 1

Darcy
Darcy

Reputation: 5368

It works for me in Firefox 5 and IE 9. Have you tried clearing your cache?

I'd recommend downloading Firebug for firefox (here) if you don't have it already. You can easily see ajax calls.

Another good program is Fiddler2 (here)

Upvotes: 0

Simon
Simon

Reputation: 2830

Using firebug, I can see that the post is being fired and the response is coming back as 499.

Is the code wrapped in the ready function? $(function() { });

Upvotes: 0

Related Questions