Issue when executing JQuery function after ajax call

Question

I'm trying to hide the parent of an input after performing my Ajax call but it's not working for some reason, that is no effect happens and the parent is not hidden.

Here's my JQuery snippet:

$( ".getqty" ).mouseover(function() {
    var split = this.id.split(":");
    var color = split[0];
    var size = split[1];
    var prodID = split[2];

    $.ajax({    //create an ajax request to loadstuff.php
        type: 'POST',
        url: 'includes/loadstuff.php',             
        dataType: 'html',   //expect html to be returned   
        data:'color='+color+'&size='+size+'&prodID='+prodID,     
        success: function(response){                   
             $(this).parent().hide();  //Problematic part
        },
        error:function (xhr, ajaxOptions, thrownError){
          alert(thrownError);
        }
    });
});

This is my HTML:

<a href='#'>
    <input class='getqty id='a:b:c' type='text'>
</a>

What I'm trying to do might seem pointless but it's actually me trying to understand why hiding the parent does not work on hover.

However I tried the following and hid the parent before the ajax call and it worked. I don't understand why.

$( ".getqty" ).mouseover(function() {
    var split = this.id.split(":");
    var color = split[0];
    var size = split[1];
    var prodID = split[2];
    $(this).parent().hide(); //Moved it here and it works. But I need it after the ajax call

$.ajax({    //create an ajax request to loadstuff.php
    type: 'POST',
    url: 'includes/loadstuff.php',             
    dataType: 'html',   //expect html to be returned   
    data:'color='+color+'&size='+size+'&prodID='+prodID,     
    success: function(response){                   

    },
    error:function (xhr, ajaxOptions, thrownError){
      alert(thrownError);
    }
});
});

score 1 · Answer 1 · answered Dec 20 '15 at 19:08

$(this) is moved outside of the original function call. You can give it a variable so its attached to the correct selector. Something like:

$( ".getqty" ).mouseover(function() {
    var $this = $(this);
    var split = this.id.split(":");
    var color = split[0];
    var size = split[1];
    var prodID = split[2];


    $.ajax({    //create an ajax request to loadstuff.php
        type: 'POST',
        url: 'includes/loadstuff.php',             
        dataType: 'html',   //expect html to be returned   
        data:'color='+color+'&size='+size+'&prodID='+prodID,     
        success: function(response){                   
             $this.parent().hide();  //Problematic part
        },
        error:function (xhr, ajaxOptions, thrownError){
          alert(thrownError);
        }
    });
});

score 0 · Answer 2 · answered Dec 20 '15 at 19:08

The $(this) refers to a different object:

success: function(response){                   
     $(this).parent().hide();  //Problematic part
},

So change your code this way:

$( ".getqty" ).mouseover(function() {
    var split = this.id.split(":");
    var color = split[0];
    var size = split[1];
    var prodID = split[2];
    var $this = $(this);                                        // Add this

    $.ajax({    //create an ajax request to loadstuff.php
        type: 'POST',
        url: 'includes/loadstuff.php',             
        dataType: 'html',   //expect html to be returned   
        data:'color='+color+'&size='+size+'&prodID='+prodID,     
        success: function(response){                   
             $this.parent().hide();                         // Change here.
        },
        error:function (xhr, ajaxOptions, thrownError){
          alert(thrownError);
        }
    });
});

Issue when executing JQuery function after ajax call

2 Answers2