CODEWITHSUNDEEP
phphtmlajaxrefresh
Grig Dodon
Grig Dodon

Reputation: 63

refresh div after sending data to db

i have a div that shows the total sum of some products:

<div class="total-price"><?php echo (!empty($cart)) ? $cart['total'] : '0'; ?> $</div>

with ajax, i'm adding products to cart ... se the page is not reloading. How to refresh the div after I add the product to cart?

The ajax that i'm using:

<script>
$('#order-to-cart').submit(function (e) {
    e.preventDefault();
    $.ajax({
        type: 'post',
        url: '/tdt/order',
        data: $(this).serialize(),
        success: function () {
            $(".success-message").slideDown().delay(5000).slideUp();
            $(".total-price").something...;
        }
    });
})
</script>

Thank you!

Upvotes: 0

Views: 81

Answers (3)

myNameIs
myNameIs

Reputation: 1

You can use something like angularjs or knockoutjs - for angular you would update your model - for knockout you would use the self.object.push(value) i.e., 

    
      function OrderViewModel() {


        var self = this;            
        self.myOrder = ko.observableArray([]);

        self.addOrderItem = function () {
            $.ajax({
                type: "post",
                url: "yourURL",
                data: $("#YOURFORMFIELDID").serialize(),
                dataType: "json",
                success: function (value) {
                    self.myOrder.push(value);
                },
                headers: {
                    'RequestVerificationToken': '@TokenHeaderValue()'
                }
            });

        }
   }
 ko.applyBindings(new orderViewModel());
</script>
</pre>

Upvotes: 0

Harry Beasant
Harry Beasant

Reputation: 1014

You should be returning a total basket value from your /tdt/order path.

In the PHP script you should echo some JSON data with all the required information, for example

echo json_encode(array("totalPrice" => "£10.01"));

Then you need to parse this information into your Javascript and update the pages elements;

<script>
$('#order-to-cart').submit(function (e) {
    e.preventDefault();
    $.ajax({
        type: 'post',
        url: '/tdt/order',
        dataType: 'json',
        data: $(this).serialize(),
        success: function (data) {
            $(".success-message").slideDown().delay(5000).slideUp();
            $('.total-price').val(data.totalPrice);
        }
    });
})
</script>

The above ajax request will expect the data returned to be JSON, you will then use this to update the total-price element.

Upvotes: 0

Georgi Bilyukov
Georgi Bilyukov

Reputation: 627

You can do something like this:

<script>
$('#order-to-cart').submit(function (e) {
    e.preventDefault();
    $.ajax({
        type: 'post',
        url: '/tdt/order',
        data: $(this).serialize(),
        success: function () {
            $(".success-message").slideDown().delay(5000).slideUp();
            var oldPrice = $('.total-price').text() * 1;
            var itemPrice = "15"; //the price that should be added
            $('.total-price').text(oldPrice + itemPrice);
        }
    });
})
</script>

Upvotes: 1

Related Questions