refresh div after sending data to db

Question

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!

You aren't calling anything that would reload the page on success. — Shahar
– Shahar, Commented Aug 19, 2014 at 18:33
Wait what do you mean by "refresh"? You can't "refresh" a div you'd have to refresh the page OR just add something to the div. — Shahar
– Shahar, Commented Aug 19, 2014 at 18:34

Georgi Bilyukov · Accepted Answer · 2014-08-19 18:35:00Z

1

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>

answered Aug 19, 2014 at 18:35

Georgi Bilyukov

6274 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Harry Beasant · Accepted Answer · 2014-08-19 18:38:43Z

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.

myNameIs · Accepted Answer · 2014-08-19 18:45:29Z

0

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>

answered Aug 19, 2014 at 18:45

myNameIs

11 bronze badge

1 Comment

myNameIs Over a year ago

if you're not using the verification tokens to prevent csfr then just remove the "headers" portion

Collectives™ on Stack Overflow

refresh div after sending data to db

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related