2

Does anyone have ideas what im doing wrong here? on the console.log it returns either 750 or 2000 but in my conditions does not seem to be finding the icon and adding the icon class.

JS

$("a.image-select").click(function(){

    $('.loading').show();
    selectedImage = $(this).data('image');
    $("a.image-select").removeClass('selected');
    $(this).addClass('selected');
    $('.image-warning').hide();
    $(".image-original").attr('src', "imgd.php?src="+selectedImage+"&quality=100&w=500&h=500&cf");
    $(".image-optimised").attr('src', "imgd.php?src="+selectedImage+"&quality=100&w=500&h=500&cf");

    $.ajax({
        url: "imgd.php?src="+selectedImage+"&quality=100&json",
        dataType: "json"
    }).success(function(data){
        $('.image-details-quality').html('100');
        var sizeInMB = (JSON.stringify(data['size']) / (1024*1024)).toFixed(2);
        var sizeInKB = (JSON.stringify(data['size']) / 1024).toFixed(2);
        $('.image-details-size').html(sizeInMB + 'mb' + ' / ' + sizeInKB + 'kb');
        $('.image-details-dims').html(data['width'] + 'px' + ' x ' + data['height'] + 'px');
        $('.image-details-type').html(data['mimeType']);
        // if image is more than 2000 show error
        if(data['width'] > 2000){
            $('.image-warning').show();
        }
        // set thumbnail icons
        if(data['width'] == 2000){
            $(this).find('span.device-icon').addClass('glyphicon-phone');
        } else if(data['width'] == 750) {
            $(this).find('span.device-icon').addClass('glyphicon-blackboard');
        }
        console.log(data['width']);
        $('#slider').slider('refresh');
        $('.image-details').show();
        $('.loading').hide();
    });

});

This part in question

// set thumbnail icons
if(data['width'] == 2000){
    $(this).find('span.device-icon').addClass('glyphicon-phone');
} else if(data['width'] == 750) {
    $(this).find('span.device-icon').addClass('glyphicon-blackboard');
}

HTML Example

<a href="#" data-image="LUXE-ESSENTIALS-MOB.jpg" class="image-select selected">
    <span class="select-icon glyphicon glyphicon-ok-circle"></span>
        <img src="imgd.php?src=LUXE-ESSENTIALS-MOB.jpg&amp;quality=100&amp;width=80&amp;height=80&amp;crop-to-fit" data-pin-nopin="true">
    <span class="device-icon glyphicon"></span>
</a>
Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
James
  • 1,668
  • 19
  • 50
  • Inside the callback, this refers to the jqXHR object of the Ajax call, not the element the event handler was bound to http://stackoverflow.com/questions/6394812/this-inside-of-ajax-success-not-working – James King Feb 03 '17 at 15:53

1 Answers1

7

The $(this) inside the success callback in no more refer to the clicked element, so you should save it in variable then use it inside the callback, like :

var _this = $(this);

$.ajax({
    url: "imgd.php?src="+selectedImage+"&quality=100&json",
    dataType: "json"
}).success(function(data){
    ...
    // set thumbnail icons
    if(data['width'] == 2000){
        _this.find('span.device-icon').addClass('glyphicon-phone');
    } else if(data['width'] == 750) {
        _this.find('span.device-icon').addClass('glyphicon-blackboard');
    }
    ...
});

Or also you could use context attribute like :

$.ajax({
    context: this,
    url: "imgd.php?src="+selectedImage+"&quality=100&json",
    dataType: "json"
    success: function(response){
        //You can use $(this) now
    }
});

Hope this helps.

Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101