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 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. 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. 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 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? Jan 30, 2018 at 9:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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