javascript - How to update valuesrefresh page after successful AJAX post - Stack Overflow

admin管理员组

文章数量:1332339

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.

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.

• javascript
• php
• jquery
• mysql
• ajax

Share Improve this question Follow asked Sep 9, 2016 at 11:33 BarnoldBarnold 13022 silver badges99 bronze badges 4

• use window.location.href='your script name' – Hardik Commented Sep 9, 2016 at 11:34
• I would remend jquery load, it refreshes part of the page and not whole page – Kishor Pawar Commented Sep 9, 2016 at 11:36
• Try location.reload(); or location.href = <url> – Varun Sreedharan Commented Sep 9, 2016 at 11:39
• 3 window.location = window.location lol first time seeing this does it work? – madalinivascu Commented Sep 9, 2016 at 11:40

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.

assign data.bid (which is send by the server)to currentbid in the ajax success.

  $.ajax({
                type: "POST",
                url: "auction-handler.php",
                data: {bidname: bidname, bid: bid, id: id},
                success: function(data) {
                    currentbid = data.bid   // bid from server    
                }
            });

In your ajax response you can simply pass the new bid value to the element and there is no need to refresh the whole page. in your ajax function return the proper value and then replace it.

success: function(data) 
{
  ('#element-id').html(data);
}

本文标签： javascriptHow to update valuesrefresh page after successful AJAX postStack Overflow