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


<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>

            <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
            <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/>                        

knockout js

], function(Component,ko) {
    'use strict';

    return Component.extend({

        initialize: function () {
            this.dealers = ko.observableArray([]);
            this.dealers = window.checkoutConfig.dealers;
            return this;
        setValue: function(data,event) {console.log('hi');
            var licenceVal = data.licence;
            var content = data.name+", "+data.address;

        getDealers: function () {
            var dist = jQuery("#distance").val();
                showLoader: true,
                url: window.checkoutConfig.ajaxUrl,
                data: {'dist':dist},
                type: "POST",
            }).done(function (data) {
                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 agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.