How to update data used by kendo.observable object using Ajax?

3 posts, 0 answers
  1. Paweł
    Paweł avatar
    2 posts
    Member since:
    Mar 2018

    Posted 28 May Link to this post

    Is it possible to affect data asynchronicaly (ajax) that is used by kendo.observable object?

    With below code `cart.add()` function is triggered and `cart.contents` variable is updated, but this not affect the template and not refreshing data used by template. I'm expecting that changing cart.contents changes data used by template, like text: quantity and text: itemPrice

    template script 1:

        <script type="text/x-kendo-template" id="cart-preview-template">
          <div id="shop-info" data-bind="attr: { class: cartContentsClass }">
            <ul data-role="listview" data-bind="source: cart.contents" data-template="cart-item" id="shop-list"></ul>
                <div id="shopping-cart">
                    <p class="total-price" data-bind="html: totalPrice"></p>
                    <a id="empty-cart" href="#" data-bind="click: emptyCart">empty cart</a>
                </div>
            </div>
        </script>


    template script 2:

        <script type="text/x-kendo-template" id="cart-item">
            <li class="selected-products-list">
                <a data-bind="click: removeFromCart" class="view-selected-items">
                    <img data-bind="attr: { src: imageSource, alt: imageAlt }"
                    />
                </a>
                    <span data-bind="text: quantity"></span>
                    <span data-bind="text: itemPrice"></span>
                </span>
            </li>
        </script>


    model:

        var cartPreviewModel = kendo.observable({
                        cart: cart,
        
                        cartContentsClass: function () {
                            return this.cart.contentsCount() > 0 ? "active" : "empty";
                        },
        
                        removeFromCart: function (e) {
                            this.get("cart").remove(e.data);
                        },
        
                        emptyCart: function () {
                            cart.empty();
                        },
        
                        itemPrice: function (cartItem) {
                            return kendo.format("{0:c}", cartItem.item.unitPrice);
                        },
        
                        imageSource: function (cartItem) {
                            var baseUrl = "{{ absolute_url(asset('images/products/')) }}";
                            return baseUrl + cartItem.item.image;
                        },
        
                        imageAlt: function () {
                            return "Product image";
                        },
        
                        totalPrice: function () {
                            return this.get("cart").total();
                        },
                    });


    cart - object observable used by above cartPreviewModel :

                var cart = kendo.observable({
                    contents: [{"item":"productID":1,"unitPrice":"111.00","image":"5.jpg"},"quantity":1}], 
                    add: function (item) {
                        $.ajax({
                            type: 'POST',
                            url: '{{ path('add_product') }}',
                            dataType: 'json',
                            data: {'item': JSON.stringify(item)},
                            success: function (cart) {
                                // original code: 
                                // this.contents = cart;

                                // code for testing:
                                this.contents = [{"item":{"productID":1,"unitPrice":"111.00","image":"5.jpg"},"quantity":1},{"item":{"productID":2,"unitPrice":"999.00","image":"8.jpg"},"quantity":1}];
                            },
                        });

                    },



    binding model and template:

        kendo.bind($("#shop-info"), cartPreviewModel);

    Once again, With above code `cart.add()` function is triggered and `cart.contents` variable is updated but this not affect the template and not refreshing data used by template. 

  2. Paweł
    Paweł avatar
    2 posts
    Member since:
    Mar 2018

    Posted 28 May in reply to Paweł Link to this post

    line:

    contents: [{"item":"productID":1,"unitPrice":"111.00","image":"5.jpg"},"quantity":1}], 

    is for testing purpose , just to show cart panel bar at start with some items. Originally it should be:

    contents: []

  3. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1520 posts

    Posted 30 May Link to this post

    Hello,

    You can use the observable's set method, in order to update the field (contents). Give the following success handler a try:
    success: function (data) {
        //cart.set("contents", data);
       
      var hardCodedData = [{"item":{"productID":1,"unitPrice":"111.00","image":"5.jpg"},"quantity":1},{"item":{"productID":2,"unitPrice":"999.00","image":"8.jpg"},"quantity":1}];
      cart.set("contents", hardCodedData);
    }


    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top