Using `this` not working in get and post

Question

I want to slideDown div on keyup. But When I use $(this) selection in the post or get method it does not work. Outside it does. But inside post it does not work.

This is my code.

$('.search').keyup(function() {
    var ID = $(this).parent().find('.hiddenid').val();
    var Search = $(this).val();
    if (Search == "") {
        $(this).parent().next().slideUp('fast');
    } else {
        $.get('getphone.php', {
            ID: ID,
            Search: Search
        }, function(D) {
            $(this).parent().next().html(D).slideDown(1000);

        });
    }

});

In this code, I'm trying to get the next of the parent of the class 'search' to slide it Down.but once i use $(this) it does not work.

Possible duplicate of [$(this) inside of AJAX success not working](https://stackoverflow.com/questions/6394812/this-inside-of-ajax-success-not-working) - [`$.get`](https://api.jquery.com/jquery.get/) is shorthand for `$.ajax`, so this question will provide you with the answer you're looking for. — Tyler Roper, Aug 23 '17 at 19:51

score 1 · Answer 1 · edited Aug 23 '17 at 19:48

1

var $this= $(this);

Explanation: This is a scope problem the $(this) command inside your else points to another element

$('.search').keyup(function(){
     var $this= $(this);
     var ID = $this.parent().find('.hiddenid').val();
     var Search = $this.val();            
     if(Search == ""){
        $this.parent().next().slideUp('fast');
     }
     else{
        $.get('getphone.php',{ID:ID,Search:Search},function(D){
             $this.parent().next().html(D).slideDown(1000);
            });
         }              
});

edited Aug 23 '17 at 19:48

Caique Romero

613
8
16

answered Aug 23 '17 at 19:44

Farhad Bagherlo

6,725
3
25
47

As a slight correction: `$(this)` inside of `$.get` does not point to another *"element"*, but rather the `jqXHR` object of the AJAX call. See [this answer](https://stackoverflow.com/questions/6394812/this-inside-of-ajax-success-not-working) for more information. – Tyler Roper Aug 23 '17 at 19:51
1

@Santi Thanks for this explanation – Farhad Bagherlo Aug 23 '17 at 19:54

score 0 · Answer 2 · answered Aug 23 '17 at 19:59

The reason $(this) wouldn't work is because it is inside another function. Generally for this the $this is used as a solution as shown in the other answer. However considering that in this case you simply want to add the output from the url as the html, you can simplify the get function with the help of the load function so you don't have an additional function and thus don't need $this declared.

else {
    $(this).parent().next().load('getphone.php',{ID:ID,Search:Search})
                           .slideDown(1000);
}

And the rest of your code stays the same as your original code. If you want the slideDown option called only after the load, you can use it as a callback.

else {
    $(this).parent().next().load('getphone.php',{ID:ID,Search:Search},
                            function(){
                                $(this).slideDown(1000)
                            });

}

Once again this is only helpful for your specific case.

Yes that should work. As i mentioned, that answer is the general recommended way for generally solving this common issue. Also for future modifications you need to stick to that answer. This answer is just a slightly simpler alternative for your specific case. — Neville Nazerane, Aug 23 '17 at 20:58

Using `this` not working in get and post

2 Answers2