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

knockoutjsmagento2

I am working on a module where i have generated few DOM elements dynamically. But when i am trying to call certain function on some events then its not getting called. Here is the code sample. Here you can see i am calling getData method on "change" event but its not being called

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();
            console.log($('input[name="payment\\[emi\\]"]:checked').val());
            return data;
        },

        getEmi: function (emiCount) {
            var total = priceUtils.formatPrice(quote.totals().grand_total, quote.getPriceFormat());
            var rowTotal = quote.totals().grand_total;
            var item = '';
            var html = '';
            var i;
            for (i=1; i<=emiCount; i++ ) {
                if (i==1) {
                    item = "<li>" +
                        "<input type='radio' name='payment[emi_type]' data-bind='event: { change: getData}' id='emi" + i + "' value='" + i + "'>" +
                        "<label class='label' for='emi" + i + "'>Tek Ödeme, Toplam: "+total+"</label>" +
                        "</li>";
                } else {
                    rowTotal = parseInt(rowTotal)/i;
                    item = "<li>" +
                        "<input type='radio' name='payment[emi_type]' data-bind='event: { change: getData}' id='emi" + i + "' value='" + i + "'>" +
                        "<label class='label' for='emi" + i + "'>"+i+" Taksit, Aylık Taksit: "+priceUtils.formatPrice(rowTotal, quote.getPriceFormat())+" Toplam: "+total+"</label>" +
                        "</li>";
                }
                html = html+item;
            }

            console.log(html);
            $('.emi-list').html(html);
        },

Best Answer

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.

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 – Magento 2 – Update quantity and totals of cart page without page reload

Have you tried deferred operation with getTotalsAction or totals-processor?

It's showing ajax process in your cart after calcul

you can use it like this (i minimize your code, just to show you how to use these functions.) :

require(["jquery", "Magento_Customer/js/customer-data","jquery/jquery-storageapi","Magento_Checkout/js/model/cart/totals-processor/default","Magento_Checkout/js/model/cart/cache","Magento_Checkout/js/model/quote","Magento_Checkout/js/action/get-totals"], function ($,defaultTotal,cartCache,quote,getTotalsAction) {
$(document).on("submit","form#form-validate", function (e) {
    e.preventDefault();
    $.ajax({
        url: form.attr("action"),
        data: form.serialize(),
        type: "post",
        success: function (res) {

    var deferred = $.Deferred();
    // this show ajax loader and reload price in cart
    getTotalsAction([], deferred);
    // this one too 
    defaultTotal.estimateTotals();
        },
        error: function () {
            console.log("error");
        }
    });
    console.log("form submitted");
});});

I suggest you to show this post for updating price in cart : How to add fee to order totals in Magento 2 and this one : https://github.com/sivajik34/Custom-Fee-Magento2

Best Answer

Related Solutions

Magento 2 – Add New Field to Magento_User Admin Form

Magento – Magento 2 – Update quantity and totals of cart page without page reload

Related Topic