Pass data to anonymous Javascript function

Question

I'm trying to query a webservice with jQuery and insert the reply into my html page using jquery templates. My code currently looks like this:

$(function () {
  $('.media-releases h3 div').click(function () {

    var button = $(this);
    if ($(this).hasClass("expand")) {
        $(this).addClass("spinner");
        var params = '{ "year": "' + 2012 + '", "month": "' + 02 + '" }';

        $.ajax({
            type: "POST",
            url: "NewsReleases.asmx/GetNewsReleases",
            data: params,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var result = jQuery.parseJSON(response.d);
                $.get('NewsRelease.htm', function (data) {
                    // The problem is here, button is null. 
                    // I assume I have to create a closure 
                    // but I'm not sure how to do it.
                    var ul = button.parentNode.nextSibling;
                    $.tmpl(data, result).appendTo(ul);
                });

                button.removeClass("spinner");
                button.parents('h3').next().slideDown();
                button.removeClass('expand').addClass('minimise');

            },
            error: function (error) {
                /*Error handling code removed*/
            }
        });

    } else {
        button.parents('h3').next().slideUp();
        button.removeClass('minimise').addClass('expand');
    }
});

});

How can I make the button variable accessible in the above function so I can append the template to it?

Aaron Digulla · Accepted Answer · 2012-03-09T08:57:14.003

4

The code above should work already because the success function is created in a context where button is defined.

If it doesn't work, then something else is probably broken. Further options:

Check your error console
Step through the code in your JS debugger

[EDIT] The problem is button.parentNode; button is a jquery node, not a DOM node (var button = $(this);). Use button.parent() instead.

edited Mar 09 '12 at 08:57

answered Mar 09 '12 at 08:27

Aaron Digulla

321,842
108
597
820

you're right it's not the button that is returning undefined it's the buttons parentNode property. If I inspect button.parentNode in Chrome it seems to be populated fine but when doing var node = button.parentNode it says undefined. Any idea why this is happening? – b3n Mar 09 '12 at 08:40
Yes. you're working on a jquery node, not a DOM node (`var button = $(this);`). Try `button.parent()`. – Aaron Digulla Mar 09 '12 at 08:43

score 0 · Answer 2 · edited May 23 '17 at 12:29

Make a call to an other predifined function, this makes you able to pass the button as a parameter This will make your success:

success: function (response) {
                onSuccess(response,button);
            },

And your newly created function will be like:

function onSuccess(response,button){
    var result = jQuery.parseJSON(response.d);
                    $.get('NewsRelease.htm', function (data) {
                        /*The problem is here, button is null. I assume I have to create a closure but I'm not sure how to do it.*/
                        var ul = button.parentNode.nextSibling;
                        $.tmpl(data, result).appendTo(ul);
                    });

                    button.removeClass("spinner");
                    button.parents('h3').next().slideDown();
                    button.removeClass('expand').addClass('minimise');
}

Source

Pass data to anonymous Javascript function

2 Answers2