7

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.

Improve this question
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 '17 at 9:27
5

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),
Improve this answer
17
  • 1
    Thanks for ur quick reply. this.bankImage is not function then how can I use that way in success. – Nitesh Jan 12 '17 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 '17 at 14:25
  • 1
    this.bankImage will be rewrited as function, after defining as observable. knockoutjs.com/documentation/observables.html – Max Jan 12 '17 at 14:25
  • When i have used as u say then there is error this.bankImage is not a function – Nitesh Jan 12 '17 at 14:28
  • Did you add initObservable function? – Max Jan 12 '17 at 14:35
2

HTML

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

And in success function added ->

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

My problem solved

Improve this answer
2
  • This is not bind data in knockout, miss-leading title. – Tomi Jan 21 '18 at 7:15
  • 1
    @Tomi why you down vote my answer instead of question edit? – Nitesh Jan 30 '18 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.