How to select element of click element parents using jQuery?

Question

I have following HTML code and I am calling ajax using click event using this class .educacao_search.

<div class="tab-pane active" id="tab-educacao">
    <br>
    <div class="row">
        <div class="col-md-12">
            <h4>EucaÇÃo</h4>
            <ul class="list-inline three">
                <li><a class="educacao_search" data-slug="ension">Ensino</a></li>
                <li><a class="educacao_search" data-slug="enem">ENEM</a></li>
                <li><a class="educacao_search" data-slug="escolas">Escolas</a></li>
                <li><a class="educacao_search" data-slug="lingua-e-linguagens">Lingua e Linguagens</a></li>
                <li><a class="educacao_search" data-slug="historia">História</a></li>
                <li><a class="educacao_search" data-slug="todos">Todos</a></li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group has-feedback has-search">
                <input type="text" class="form-control" placeholder="Search" id="do_search_educacao">
                <span class="glyphicon glyphicon-search form-control-feedback"></span>
            </div>
        </div>
    </div>
    <br>
    <div class="row"><div class="show_result"></div><br></div>
</div>

now I on success I want to show result in show_result class.

To do this I am using collowing jQuery code but it seems not working! I mean the result is not showing in this class called show_result

$(this).parents(".tab-pane").find(".show_result").html(result);

Note: this is a bootstrap tabs and there are 5 tabs with same classes which is educacao_search and show_result

Update:

Ajax Call:

$(".educacao_search").click(function () {                        
    var slug = $(this).data('slug');
    $.ajax({
        type: 'POST',
        url: urls.ajax_url,
        data: {
            'slug': slug,
            'action': 'get_post_content'
        }, success: function (result) {
            $(this).parents(".tab-pane").find(".show_result").html(result);
            //$(this).find(".show_result").html(result);
        },
        error: function () {
            alert("error");
        }
    });
});

.parents(".tab-pane") sure you want to grab all parents? If not, use .closest(".tab-pane") instead. — connexo
– connexo, Commented Nov 16, 2018 at 10:25
The problem is the usage of "this" inside the success function, the solution is the "context" parameter. From documentation: $.ajax({ url: "test.html", context: document.body }).done(function() { $( this ).addClass( "done" ); }); — DanieleAlessandra
– DanieleAlessandra, Commented Nov 16, 2018 at 10:27

Karan · Accepted Answer · 2018-11-16 10:32:58Z

3

Declare var obj = $(this); before .ajax and use it inside success callback.

$(".educacao_search").click(function () {                        
    var slug = $(this).data('slug');
    var obj = $(this);
    $.ajax({
        type: 'POST',
        url: urls.ajax_url,
        data: {
            'slug': slug,
            'action': 'get_post_content'
        }, success: function (result) {
            obj.parents(".tab-pane").find(".show_result").html(result);
            //$(this).find(".show_result").html(result);
        },
        error: function () {
            alert("error");
        }
    });
});

It's important to know how this keyword works in javascript. Refer below links it will be helpful.

edited Nov 16, 2018 at 10:32

answered Nov 16, 2018 at 10:27

Karan

12.7k3 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

DanieleAlessandra Over a year ago

You should use the context parameter to do that, but this example may work too.

Shibbir Over a year ago

@Karan Awesome. It seems working but why you create var obj?

DanieleAlessandra Over a year ago

@creativeartbd the context of the inner function success is different from the context of the outer function click, so when you use the keyword this you are referencing the wrong object. Declaring a variable in a higher level scope (like obj in @karan's example) does the trick.

Karan Over a year ago

When you use this inside success callback it will refer to different object. So what we can do is declare it outside of ajax and use that object inside ajax. You can try console.log(this) before ajax call and inside success. You will see that both objects will be different.

Shibbir Over a year ago

Awesome. I understand now :=)

|

Collectives™ on Stack Overflow

How to select element of click element parents using jQuery?

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related