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> </p>
<div style="padding-top: 10px" id="selected_post"></div>
<div>Find Post within
<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> 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.
Best Answer
You need to rebind knockout events by
applyBindings
before setting HTML contentIf current HTML use external knockout js component rather than current js than create new object of js and use new object in
applyBindings