Barnold Barnold - 2 months ago 30
jQuery Question

How to update values/refresh page after successful AJAX post

I am creating a very basic auction page which I have now got quite far with. However I would like to update the values of the 'current bid' if the bid has successfully posted via AJAX.

Here is some of my code:

This code retrieves data from MySQL and populates the page.

$result = mysqli_query($con,"SELECT * From auction WHERE category = 'Bathroom' ORDER BY ID DESC");


while($row = mysqli_fetch_array($result))
{
echo "<form name='auction' id='auction" . $row['ID'] . "'>
<input type='hidden' name='id' value='" . $row['ID'] . "' />
<div class='auction-thumb'>
<div class='auction-name'>" . $row['Item'] . "</div>";
echo "<img class='auction' src='" . $row['ImagePath'] . "' />";
echo "<div class='auction-bid'>Current Bid: £<div class='nospace' id='" . $row['ID'] . "'>" . $row['CurrentBid'] . "</div></div>";
echo "<div class='auction-bid'>Your Name: <input type='text' class='bidder' name='bidname'/></div>";
echo "<div class='auction-bid'>Your Bid: <input type='text' class='auction-text' name='bid'/></div>";
echo "<div class='auction-bid'><input type='submit' name='submit' value='Place Bid!' /></div>";
echo "</div></form>";
}
echo "</table>";


My jQuery code:

$(document).ready(function(){
$('form[name="auction"]').submit(function(){
var id = $(this).find('input[name="id"]').val();
var bidname = $(this).find('input[name="bidname"]').val();
var bid = $(this).find('input[name="bid"]').val();
var currentbid = $('#'+id).text();

if (bid > currentbid)
{
alert("Bid is greater than current bid");
}
else
{
return false;
}

$.ajax({
type: "POST",
url: "auction-handler.php",
dataType: "json",
data: {bidname: bidname, bid: bid, id: id},
success: function(data){
window.location.reload();
}
});
return false;

});
});


The alert is just there for testing purposes. But the jQuery checks the current bid, against the bid that has been submitted in the form.

If the bid has been successfully posted, then I want to update what is shown in the Current Bid, but currently you have to manually refresh the page for this to appear.

I tried adding

window.location.reload();


on the success section of the AJAX, but nothing happens.

Could anyone point me in the right direction, or alternatively if you know of a better way of doing this then just refreshing the page, please do let me know.

Thank you in advance, and if you need anymore information just let me know.

Answer

You will never enter in the success function of your ajax call: You have set the dataType to json so jQuery expects json back. However, you are sending html back.

You should remove dataType: "json", from your ajax call:

$.ajax({
        type: "POST",
        url: "auction-handler.php",
        // Or remove this, or send json back
        // dataType: "json",
        data: {bidname: bidname, bid: bid, id: id},
        success: function(data){
            // There is no need for this...
            // window.location.reload();
            console.log(data);
        }
    });

Note that the advantage of using ajax is that you can replace parts of the content. So you don't have to reload the whole page, you can just update the section that you want to update.