8

I want to bind image source to following div.

<div class="head_label"><img class="bank_photo" data-bind="attr:{src: bankImage}"></div>

Following is my ajax call and their is my variable which I want to bind to image src.

define(
[
    'jquery',
    'ko',
    'Magento_Checkout/js/view/payment/default',
    'Magento_Payment/js/view/payment/cc-form',     
    'Magento_Payment/js/model/credit-card-validation/validator',
    'mage/validation'           
],
function ($, ko, Component) {
    'use strict';

    var bankImage = '';

    return Component.extend({
        defaults: {
            template: 'Nitesh_Payment/payment/form',
            transactionResult: ''
        },
        ajaxCall: function(){
                $('#input-cc-number').blur(function(){
                    var cc = $(this).val();
                    var cc_length = cc.length;
                    if(cc_length>=6){
                        var data= {cc:cc}
                        $.ajax({
                            dataType: 'json',
                            url: url,
                            data: data,
                            type: 'post',
                            success: function(result)
                            {
                                var myObj = result;
                                this.bankImage = myObj.image;
                            },
                            error: function(){
                                alert("You Failed!");
                            }
                        });

                    }

                }); 
        },  

    });
}
);

Also I am unable to access bankImage variable inside Ajax call. Please tell me how to access that variable in ajax function.

1
  • Solved : HTML <img id="bankImage" class="bank_photo" src=""> And in success function added -> $('#bankImage').attr('src',result.image); my problem solved
    – Nitesh
    Jan 13, 2017 at 9:27

2 Answers 2

6

At first, add your variable to defaults object, and you will be able to set default value for field.

defaults: {
    bankImage : null
}

Define your variable as observable

/**
 * Initialize observable properties
 */
initObservable: function () {
    this._super()
        .observe('bankImage');

    return this;
},

And you need to define correct success handler with component context:

success: (function(result) {
    this.bankImage(result.image);
}).bind(this),
17
  • 1
    Thanks for ur quick reply. this.bankImage is not function then how can I use that way in success.
    – Nitesh
    Jan 12, 2017 at 14:21
  • I have used this.bankImage = result.image; Instead of this.bankImage(result.image); But then also there is no error in console and image is not bind to that div.
    – Nitesh
    Jan 12, 2017 at 14:25
  • 1
    this.bankImage will be rewrited as function, after defining as observable. knockoutjs.com/documentation/observables.html
    – Max
    Jan 12, 2017 at 14:25
  • When i have used as u say then there is error this.bankImage is not a function
    – Nitesh
    Jan 12, 2017 at 14:28
  • Did you add initObservable function?
    – Max
    Jan 12, 2017 at 14:35
0

HTML

<img id="bankImage" class="bank_photo" src="">

And in success function added ->

$('#bankImage').attr('src',result.image);

My problem solved

2
  • This is not bind data in knockout, miss-leading title.
    – Tomi
    Jan 21, 2018 at 7:15
  • 1
    @Tomi why you down vote my answer instead of question edit?
    – Nitesh
    Jan 30, 2018 at 9:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.