Access the element of outer function in nested functions in jquery

Question

I have an each function that has change function and ajax inside..

$( ".spring_explorations" ).each(function() {
        $("#" + this.id + " select").change(function() {
            alert("t");
            $.ajax({
                type: 'POST',
                url: ('/admin/applications/get_sections_for_modal'), //pass query string to server
                data: {
                exploration_id: $("#" + this.id + " select").val()
                },
                success: function (response) {
                    $(this).parents('span').next().show();
                    $(this).parents('span').next().find("select").html(response);
                    console.log(response);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.log(thrownError);
                }
            })
        });
    });

I would like to access the $(this) element of spring_explorations class inside the success snippet of ajax script.

I was able to access the element of the change function by adding context: this but how can I get the element of the outer?

Thanks in advanced.

Edit:

The $(this).parents('span').next().show(); and so on are undefined because maybe the this is the ajax itself not the spring_explorations class.

I'm very sorry if this is a duplicated question. I'm just fairly new in javascript and I think this is the right place to ask this thing. If you think this is not appropriate, just close my question.

This is a duplicate of many, many questions. – Etheryte Jun 11 '14 at 16:43 — Etheryte, Jun 11 '14 at 16:43
@Nit - Which one is the canonical one? – Travis J Jun 11 '14 at 16:44 — Travis J, Jun 11 '14 at 16:44

score 4 · Answer 1 · answered Jun 11 '14 at 16:43

Just store this in a variable. It tends to be named that or me or some other type of synonym for representing this.

$( ".spring_explorations" ).each(function() {
    var that = this;
       //^ store this into variable
    $("#" + this.id + " select").change(function() {
        alert("t");
        $.ajax({
            type: 'POST',
            url: ('/admin/applications/get_sections_for_modal'), //pass query string to server
            data: {
            exploration_id: $("#" + this.id + " select").val()
            },
            success: function (response) {
                $(that).parents('span').next().show();
                //^ re-use stored `this` value
                $(that).parents('span').next().find("select").html(response);
                console.log(response);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(thrownError);
            }
        })
    });
});

score 0 · Answer 2 · answered Jun 11 '14 at 16:44

You need to reference this from the context you want to use it in. You can use the references within nested scopes where as the value of this will change depending on the scope, as you have found out.

$( ".spring_explorations" ).each(function() {
    var _this = this;
    // You now have a reference to the node in the variable _this
    // that can be used anywhere within this functions scope

    $("#" + this.id + " select").change(function() {
        var self = this;
        // Self is now a reference to the changed element
        // that can be used within this functions scope

        // your code here that uses _this and self when you please.
    });
});

Ehsan Sajjad · Accepted Answer · 2014-06-11T16:50:41.640

why are you writing in each, you should be writing like this, if the elements are dynamic as you mentined in comments:

    $(".spring_exploration").on('change','select',function() {
         var element = this;
        alert("t");
        $.ajax({
            type: 'POST',
            url: ('/admin/applications/get_sections_for_modal'), //pass query string to server
            data: {
            exploration_id: $(element).val()
            },
            success: function (response) {
                $(element).parents('span').next().show();
                $(element).parents('span').next().find("select").html(response);
                $(element).closest(".spring_exploration") // you can access like this
                console.log(response);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(thrownError);
            }
        })
    });

and now you can access it using closest

Access the element of outer function in nested functions in jquery

3 Answers3