Magento – How to update DOM element in Knockout Js

knockoutjsmagento2

I am building a custom payment method in Magento 2 where i need to show the EMI option based on card selection. I am able to render EMI option dynamically on Load but the EMI option is not getting change when i am selecting cards though i can see in console that event is getting called and its retiring the array. Here is the code i am doing.

app/code/Magento/Sanalpos/view/frontend/web/js/view/payment/method-renderer/magento_sanalpos.js

 define(
    [
        'jquery',
        'Magento_Payment/js/view/payment/cc-form',
        'Magento_Checkout/js/action/place-order',
        'Pmclain_Stripe/js/action/save-payment-information',
        'Magento_Checkout/js/model/full-screen-loader',
        'Magento_Checkout/js/model/payment/additional-validators',
        'Magento_Payment/js/model/credit-card-validation/validator',
        'Magento_Checkout/js/action/redirect-on-success',
        'Magento_Vault/js/view/payment/vault-enabler',
        'Magento_Checkout/js/model/quote',
        'Magento_Ui/js/modal/alert',
        'Magento_Customer/js/customer-data',
        'mage/url',
        'Magento_Sanalpos/js/model/form-builder',
        'Magento_Catalog/js/price-utils',
        'ko'
        //'https://js.stripe.com/v3/'
    ],
    function (
        $,
        Component,
        placeOrderAction,
        savePaymentAction,
        fullScreenLoader,
        additionalValidators,
        validator,
        redirectOnSuccessAction,
        VaultEnabler,
        quote,
        alert,
        customerData,
        url,
        formBuilder,
        priceUtils,
        ko

    ) {
        'use strict';
        var emiOption = ko.observableArray([]);
        return Component.extend({
            defaults: {
                template: 'Magento_Sanalpos/payment/form'
            },

            initialize: function() {
                this._super();
                this.getTaskit();
            },

            placeOrder: function(data, event) {

                fullScreenLoader.startLoader();
                var custom_controller_url = url.build('sanalpos/action/request'); //your custom controller url
                $.post(custom_controller_url, this.getData(), 'json')
                    .done(function (response) {
                        customerData.invalidate(['cart']);
                        formBuilder(response).submit(); //this function builds and submits the form
                    })
                    .fail(function (response) {
                        errorProcessor.process(response, this.messageContainer);
                    })
                    .always(function () {
                        fullScreenLoader.stopLoader();
                    });
            },

            getCode: function() {
                return 'magento_sanalpos';
            },

            isActive: function() {
                return true;
            },

            getData: function() {
                var data = this._super();
                data.additional_data.bank_type = $('input[name="payment\\[bank_type\\]"]:checked').val();
                data.additional_data.emi       = $('input[name="payment\\[emi\\]"]:checked').val();
                data.additional_data.email     = this.getEmail();
                return data;
            },

            getEmi: function (emiCount) {
                var total = priceUtils.formatPrice(quote.totals().grand_total, quote.getPriceFormat());
                var rawTotal = parseInt(quote.totals().grand_total);
                this.emiOption = [];
                var item;
                var i;
                for (i=1; i<=emiCount; i++ ) {
                    if (i==1) {
                        item = { id:'emi'+i, title: 'Tek Ödeme, Toplam:'+ total, value: '1'};
                    } else {
                        item = { id:'emi'+i, title: i+' Taksit, Aylık Taksit: '+priceUtils.formatPrice(rawTotal/i,quote.getPriceFormat())+ ' Toplam: '+total, value: i};
                    }
                    this.emiOption.push(item);
                }
                return this.emiOption;
            },

            validate: function() {
                var $form = $('#' + this.getCode() + '-form');
                return $form.validation() && $form.validation('isValid');
            },

            getEmail: function() {
                if(quote.guestEmail) {
                    return quote.guestEmail;
                }
                return window.checkoutConfig.customerData.email;
            },

            getTaskit: function () {

                var bankType = $('input[name="payment\\[bank_type\\]"]:checked').val();
                var emiCount = window.checkoutConfig.payment['magento_sanalpos'].emiAkBank;
                this.emiOption(this.getEmi(emiCount));

                if (bankType == 'akbank') {
                    var emiCount = window.checkoutConfig.payment['magento_sanalpos'].emiAkBank;
                    this.emiOption(this.getEmi(emiCount));
                }

                if (bankType == 'isbank') {
                    var emiCount = window.checkoutConfig.payment['magento_sanalpos'].emiIsBank;
                    this.emiOption(this.getEmi(emiCount));
                }

                if (bankType == 'garantibank') {
                    var emiCount = window.checkoutConfig.payment['magento_sanalpos'].emiGarantiBank;
                    this.emiOption(this.getEmi(emiCount));
                }
                ko.applyBindings(this.emiOption);
                console.log(this.emiOption);
            }
        });
    }
);

app/code/Magento/Sanalpos/view/frontend/web/js/template/payment/cc-form.html

        <fieldset data-bind="attr: {class: 'fieldset payment items ccard ' + getCode(), id: 'payment_form_' + getCode()}">
        <div class="card-section col-md-6">
            <!-- ko if: (isShowLegend())-->
            <legend class="legend">
                <span><!-- ko i18n: 'Credit Card Information'--><!-- /ko --></span>
            </legend><br />
     <div class="card-option">
                <ul class="card-list">
                    <li>
                        <input type="radio" class="radio" name="payment[bank_type]" value="garantibank" id="bonuscard" data-bind="checked: emiOption, event: { change: getTaskit}" data-validate="{'required-entry':true}"/>
                        <label class="label" for="bonuscard">Bonus Card</label>
                    </li>
                    <li>
                        <input type="radio" class="radio" name="payment[bank_type]" value="akbank" id="axesscard" data-bind="checked: emiOption, event: { change: getTaskit}" data-validate="{'required-entry':true}"/>
                        <label class="label" for="axesscard">Axess Card</label>
                    </li>
                    <li>
                        <input type="radio" class="radio" name="payment[bank_type]" value="isbank" id="maximum" data-bind="checked: emiOption, event: { change: getTaskit}" data-validate="{'required-entry':true}"/>
                        <label class="label" for="maximum">Maximum Card</label>
                    </li>
                    <li>
                        <input type="radio" class="radio" name="payment[bank_type]" value="garantibank" id="worldcard" data-bind="checked: emiOption, event: { change: getTaskit}" data-validate="{'required-entry':true}"/>
                        <label class="label" for="worldcard">World Card</label>
                    </li>
                </ul>
            </div>
       </div>
<!--------------------------- EMI Option --------------------------->
   <div class="section-emi col-md-6">
        <ul class="emi-list" data-bind="foreach: emiOption">
            <li>
                <input type="radio" class="radio" name="payment[emi_type]" data-bind="attr: {id: id, value: value}" data-validate="{'required-entry':true}"/>
                <label class="label" data-bind="attr: {'for': id}"><span data-bind="text: title"></span></label>
            </li>
        </ul>
    </div>

Best Answer

I think you need make this variables observable not only array.

var emi = ko.observable(0);

More details:

https://www.google.co.uk/amp/s/inviqa.com/blog/using-knockout-js-magento-2%3famp

https://stackoverflow.com/questions/17525720/knockout-not-updating-dom-when-items-changed-in-an-observable-array

Related Solutions

Magento 2 – Add New Field to Magento_User Admin Form

For adding image field, you can try using plugin and always try to avoid overwrite whole class.

Vendor/Module/etc/adminhtml/di.xml


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\User\Block\User\Edit\Tab\Main">
        <plugin name="sr_stackexchange_user_form" type="Vendor\Module\Plugin\Block\Adminhtml\User\Edit\Tab\Main" sortOrder="1"/>
    </type>
</config>

Vendor/Module/Plugin/Block/Adminhtml/User/Edit/Tab/Main.php


namespace Vendor\Module\Plugin\Block\Adminhtml\User\Edit\Tab;

class Main
{
    /**
     * Get form HTML
     *
     * @return string
     */
    public function aroundGetFormHtml(
        \Magento\User\Block\User\Edit\Tab\Main $subject,
        \Closure $proceed
    )
    {
        $form = $subject->getForm();
        if (is_object($form)) {
            $fieldset = $form->addFieldset('admin_user_image', ['legend' => __('User Image')]);
            $fieldset->addField(
                'user_image',
                'image',
                [
                    'name' => 'user_image',
                    'label' => __('Image'),
                    'id' => 'user_image',
                    'title' => __('Image'),
                    'required' => false,
                    'note' => 'Allow image type: jpg, jpeg, png'
                ]
            );

            $subject->setForm($form);
        }

        return $proceed();
    }
}

Clear cache.

Magento – Binding Events On Dynamically Generated DOM Elements Knockout + Magento 2

I used js code like.

/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
/*jshint browser:true jquery:true*/
/*global alert*/
define([
    "jquery",
    'ko',
    'uiComponent',
    'Magento_Ui/js/modal/alert',
    "jquery/ui",
    "mage/translate",
    "mage/mage",
    "mage/validation"
], function ($, ko, Component, alert, mage) {
    "use strict";
    var totalCustomer= ko.observableArray([]);
    var results= ko.observableArray([]);
    function feedShow(name, email) {
        var self = this;
        self.name = name;
        self.email = email;
    }
    return Component.extend({
        productList: ko.observableArray([]),
        initialize: function() {
            this._super();
        },
        /** Initialize observable properties */
        initObservable: function () {
            this._super()
                    .observe('msgSaved')
                    ;
                    this.uname = ko.observable('');
                    this.email = ko.observable('');
                    this.phone = ko.observable('');
                    this.msg = ko.observable('');
            return this;
        },
        /**
         * Validate feedback form
         */
        validateForm: function () {
            var form = '#feedback-form';
            return $(form).validation() && $(form).validation('isValid');
        },
        submitFeedback: function () {
            /* $.ajax(this.getFeedbackUrl).done(
             function() {
             this.msgSaved(true)
             }.bind(this)
             );*/
            if (!this.validateForm()) {
             return;
             }
            var data = {'name':this.uname(),'email':this.email(),'phone':this.phone(),'message':this.msg(),'status':0};
           // if(this.validateForm()){

           // }
           // console.log(data);
            $.ajax({
                url: this.getFeedbackUrl,
                data: data,
                type: 'post',
                dataType: 'json',
                context: this,
                beforeSend: this._ajaxBeforeSend,
                success: function (response) {
                    this.msgSaved(true);
                    this.uname('testing');
                    alert({
                        content: $.mage.__('Thanks for Submitting.')
                    });
                },
                complete: this._ajaxComplete
            });
        },
        totalfeeds:function(){
            console.log('test');
          $.ajax({
                url:'http://magento2.local/feedback/entry/show',
                type: 'post', 
                dataType: 'json',
                contentType: 'application/json',
                context: this,
                showLoader:true,
                beforeSend: this._ajaxBeforeSend,
                success: function (response) {
                    var jsonTempStringified = JSON.stringify(response);
                    var jsonTempStringifiedParsed = JSON.parse(jsonTempStringified);
                    this.productList(jsonTempStringifiedParsed);
                    // results(jsonTempStringifiedParsed);
                },
                complete: this._ajaxComplete
            });

        },
        deleteFeeds:function(parent,data){
            alert({
                content: 'Are you sure want to delete record!'
            });
            var jsonTempStringified = JSON.stringify(data);
            var jsonTempStringifiedParsed = JSON.parse(jsonTempStringified);
            var fid = jsonTempStringifiedParsed.fid;
            var data = {'fid':fid};
            $.ajax({
                url:'http://magento2.local/feedback/entry/delete',
                data: data,
                type: 'post',
                dataType: 'json',
                context: this,
                beforeSend: this._ajaxBeforeSend,
                success: function (response) {
                    this.totalfeeds();
                },
                complete: this._ajaxComplete
            });
        },
        defaults: {
            msgSaved: false,
            template: 'Smart_Feedback/feedback',
        }
    });
}
);

Binding template .html file.

<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div>
    <!-- ko ifnot: msgSaved -->
    <form method="post" class="feedback" id="feedback-form" data-role="feedback-form" data-bind="submit: submitFeedback">
        <fieldset class="fieldset">
            <legend class="legend"><span><p data-bind="i18n: 'You can post your feedback here.'"></p></span></legend><br>
            <div class="field name required">
                <label for="name" class="label"><span>Name</span></label>
                <div class="control">
                    <input type="text" data-validate="{required:true}" 
                           class="input-text" title="Name" 
                           id="user_name" aria-required="true" 
                           data-bind="value:uname,attr: {'data-validate': JSON.stringify({required:true})},
                                        ">
                </div>
            </div>
            <div class="field email required">
                <label for="email" class="label"><span>Email</span></label>
                <div class="control">
                    <input type="email" data-validate="{required:true}" data-bind="value:email,attr: {'data-validate': JSON.stringify({required:true,'validate-email':true})},
                                        " class="input-text" title="Email" id="email" aria-required="true" >
                </div>
            </div>
            <div class="field telephone">
                <label for="telephone" class="label"><span>Phone Number</span></label>
                <div class="control">
                    <input type="text" class="input-text" value="" title="Phone Number" id="telephone" data-bind="value:phone">
                </div>
            </div>
            <div class="field comment required">
                <label for="comment" class="label"><span>Feedback message</span></label>
                <div class="control">
                    <textarea data-validate="{required:true}" rows="3" cols="5" class="input-text" title="What’s on your mind?" id="comment" name="comment" aria-required="true"
                              data-bind="value:msg"></textarea>
                </div>
            </div>
        </fieldset>
        <div class="actions-toolbar">
            <div class="primary">
                <input type="hidden" value="" id="hideit" name="hideit">
                <input type="submit" class="action primary" data-bind="value: $t('Submit Feedback')" />
                <button data-bind="attr: {title: $t('totalfeeds')}, click: totalfeeds" class="action primary">Total Feeds</button>
                <button data-bind="click: totalfeeds">click me</button>
                <li><input type='radio' name='emi_type' data-bind='event: { change: totalfeeds}' id='emi' value="">
                    <label class='label' for='emi'>Test</label>
                </li>
            </div>
        </div>
    </form>
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Email</th> 
                <th>Action</th>  
            </tr>
        </thead>
        <tbody data-bind="foreach: productList">
            <tr>
                <td data-bind="text: fid"></td>
                <td data-bind="text: name"></td>
                <td data-bind="text: email"></td>
                <td><a href="#" data-bind="click: function(data,event){$parent.deleteFeeds($parent,data);}">Remove</a></td>
            </tr>
        </tbody>
    </table>


    <!-- /ko -->

    <!-- ko if: msgSaved -->
    <p data-bind="i18n: 'Feedback message posted for review.'"></p>
    <!-- /ko -->
</div>

Please check above radio element with change event with Test Label.

Best Answer

Related Solutions

Magento 2 – Add New Field to Magento_User Admin Form

Magento – Binding Events On Dynamically Generated DOM Elements Knockout + Magento 2

Related Topic