CODEWITHSUNDEEP
javascriptjquery
b3n
b3n

Reputation: 3865

Pass data to anonymous Javascript function

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?

Upvotes: 2

Views: 518

Answers (2)

Aaron Digulla
Aaron Digulla

Reputation: 328614

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.

Upvotes: 4

Rick Hoving
Rick Hoving

Reputation: 3575

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

Upvotes: 0

Related Questions