0

I have created a custom form in checkout page. It contains a drop down field and one ul list. By default there is few li tags(For example,4). When we change the dropdown the li tags will be changed( using ajax call). The issue is that if the response contains 1 entry,it displays 4 li's with same data. If it is 2 then it displays 8 lis (4 li's for each value).
Another issue is that the binding data's click function is not working

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) {
                ko.cleanNode(jQuery('#post-div')[0]);
                this.dealers = JSON.parse(data);
                ko.applyBindings(this, jQuery('#post-div')[0]);                
                return this.dealers ;
            });
        },

    });
});

Please help me

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.

Browse other questions tagged or ask your own question.