1

I have created a custom form in checkout page. Everything works fine except one ajax response binding

Here is my code

template.html

 <form id="cust-checkout-form" class="form" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
        <fieldset class="fieldset">
            <div class="step-title" data-role="title" data-bind="i18n: 'Post Selection'">Post Selection</div>
            <p>&nbsp;</p>               

            <div style="padding-top: 10px" id="selected_post"></div> 
            <div>Find Post within&nbsp;&nbsp;
                <select name="distance" id="distance" style="width: 8%;" data-bind="event: { change: getDealers }">
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="25">25</option>                       
                </select>&nbsp;&nbsp;miles. Choose below
            </div>
            <input type="hidden" name="licence" id="licence" value="" />

            <div id="dealer-div">
                <ul class="post-div" id="post-div" data-bind="foreach: dealers">
                    <li class="post-item" data-bind="click: function(data,event){$parent.setValue(data,event);},attr: {'class': postcls}">
                        <div class="post-span">
                            <label data-bind="html: name" /><br/>
                            <label data-bind="html: address" /><br/>                        
                        </div>
                    </li>
                </ul>
            </div>
        </fieldset>
    </form>

knockout js

    define([
    'Magento_Ui/js/form/form',
    'ko'
], function(Component,ko) {
    'use strict';

    return Component.extend({

        initialize: function () {
            this._super();
            this.dealers = ko.observableArray([]);
            this.dealers = window.checkoutConfig.dealers;
            return this;
        },            
        setValue: function(data,event) {console.log('hi');
            var licenceVal = data.licence;
            jQuery("#post-licence").val(licenceVal);
            var content = data.name+", "+data.address;
            jQuery("#selected_post").html("<b>"+content+"</b>");              

        },
        getDealers: function () {
            var dist = jQuery("#distance").val();
            jQuery.ajax({
                showLoader: true,
                url: window.checkoutConfig.ajaxUrl,
                data: {'dist':dist},
                type: "POST",
            }).done(function (data) {
                this.dealers = data;
                return this;
            });
        },

    });
});

The content is not changing while selecting the dropdown.

If I pass the response as html, then the setValue function is not working. Please help me.

1

You need to rebind knockout events by applyBindings before setting HTML content

getDealers: function () {
    var dist = jQuery("#distance").val();
    jQuery.ajax({
        showLoader: true,
        url: window.checkoutConfig.ajaxUrl,
        data: {'dist':dist},
        type: "POST",
    }).done(function (data) {
        //Rebind knockout events
        ko.cleanNode($('#cust-checkout-form')[0]);
        ko.applyBindings(this, $('#cust-checkout-form')[0]);
        this.dealers = data;
        return this;
    });
},

If current HTML use external knockout js component rather than current js than create new object of js and use new object in applyBindings

define([
    'Vendor_Module/js/mycustom',
], function(mycustom) {

..
..

getDealers: function () {
    var dist = jQuery("#distance").val();
    jQuery.ajax({
       ...
    }).done(function (data) {
        //Rebind knockout events
        ko.cleanNode($('#cust-checkout-form')[0]);
        ko.applyBindings(new mycustom(), $('#cust-checkout-form')[0]);
        ..
    });
},
  • If I pass the response as html, then the setValue function is not working. Not entering to the function. – Jancy Abraham Feb 6 at 5:40
  • Can I use the observable property here? By default the dealers variable contains an array. If I change the drop down then the dealers array will update. – Jancy Abraham Feb 6 at 5:42
  • Recently I face this issue of knockout binding issue on ajax response HTML after some debugging I solved my problem by applyBinding function – Prince Patel Feb 6 at 5:44
  • Ok, But I want to call the setValue function on clicking the li tag (ie,ajax response html). When I replace the html, the function call is not working – Jancy Abraham Feb 6 at 5:49

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.