Unable to change image onChange function on ajax success return

Question

Hi I'm new to this javavascript/ajax. I am trying to create a dropdown that dynamically changes the images by the different options as shown in this Fiddle here but the change function does not seem to be working.

I made sure that I am able to get the data from pictureList but the image source did not change successfully as the fiddle.

 $('#selectVariant').change(function () {     
    var sku = $('#selectVariant :selected').val();
    var sessionId="<?php echo $sessionId; ?>";
    var dataString='sku='+ sku +'&sessionId='+sessionId;
    $.ajax({
        type:"post",
        url: "<?php echo $base_url; ?>ajax-helper/search_variant.php",
        data:dataString,
        cache:false,
        dataType: "JSON",
        success: function(data){
        var pictureList = {};

        //example of my data list
        //var pictureList = {'Apple SKU2': "http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png",
        //'Pear1': "http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/pears.png"
        //};

        $.each(data.productVariantImages,function(i, productVariantImages){
            pictureList[data.sku] = this.imagePath;
        });
        console.log(pictureList);

        $('.content img').attr({"src":[pictureList[this.value]]}); 
        }
    });
        return false;
});

However, when I do test it outside the ajax post, it is able to run.

score 1 · Accepted Answer · edited May 23 '17 at 10:27

Instance of this is change in ajax success function scope.

In this line $('.content img').attr({"src":[pictureList[this.value]]}); this is not the instance of selectVariant element.

The usual practice for this is declare a variable that and use that variable in other scope. try the below code.

$('#selectVariant').change(function () {     
    var sku = $('#selectVariant :selected').val();
    var sessionId="<?php echo $sessionId; ?>";
    var dataString='sku='+ sku +'&sessionId='+sessionId;
    var that = this;
    $.ajax({
        type:"post",
        url: "<?php echo $base_url; ?>ajax-helper/search_variant.php",
        data:dataString,
        cache:false,
        dataType: "JSON",
        success: function(data){
        var pictureList = {};

        //example of my data list
        //var pictureList = {'Apple SKU2': "http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png",
        //'Pear1': "http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/pears.png"
        //};

        $.each(data.productVariantImages,function(i, productVariantImages){
            pictureList[data.sku] = this.imagePath;
        });
        console.log(pictureList);

        $('.content img').attr({"src":[pictureList[that.value]]}); 
        }
    });
        return false;
});

thank you! it works perfectly. could you give a short explanation why `this` is unable to work inside ajax success function? — zana, Dec 04 '15 at 03:25
please see my updated my answer ref : http://stackoverflow.com/questions/4886632/what-does-var-that-this-mean-in-javascript — Kishore Sahasranaman, Dec 04 '15 at 03:26

Unable to change image onChange function on ajax success return

1 Answers1