Where are the arguments to the jQueryUI Dialog submit handler coming from?

Question

Take a look at the following code:

  this.dialog({
                    width: 500,
                    height: 260,
                    title: "Setup database",
                    content: $("<form>").append(table),
                    buttons: {
                        submit: function(_alert, dialog) {
                            dialog.find("form").each(function() {
                                var arr = $(this).serializeArray();
                                var data = {
                                    mysql: true
                                };
                                var empty = false;
                                $(this).find("input").removeClass("error");
                                for (var k in arr) {
                                    if ($.trim(arr[k].value) !== "") {
                                        data[arr[k].name] = arr[k].value;
                                    } else {
                                        empty = true;
                                        $(this).find("input[name='" + arr[k].name + "']").each(function() {
                                            $(this).addClass("error");
                                        });
                                        break;
                                    }
                                }
                                if (!empty) {
                                    self.ajax({
                                        url: url,
                                        data: data
                                    }, function(result) {
                                        callback(result);
                                    }, function() {
                                        self.mysql(url, callback, _db_name, _db_user, _db_pass, is_dialog);
                                    });
                                }
                                _alert.remove();
                                if($.isFunction(callback_submit)) {
                                    callback_submit();
                                }
                            });
                        }
                    }
                });

There are two parameters passed into the anonymous function that is supposed to trigger when the button "submit" is clicked. But I have no idea where these parameters are supposed to come from. Can someone explain? Is this related to passing parameters to an anonymous function in Javascript in general?

Answer 1

I don't think you get any argument passed to you when a button event callback is fired on jquery-ui dialog box

http://jsfiddle.net/3d7QC/1577/

buttons: {
    "I've read and understand this": function() {
        console.log(arguments);
        // look at your console
        $(this).dialog("close");
    }

Only argument you get passed through to you is the customary jQuery event object.

Answer 2

The first argument _alert is the JS event object that is passed to every event handler in JavaScript. This is not specific to jQuery. javascript.info explains this as follows :

W3C way

Browsers which follow W3C standards always pass the event object as the first argument for the handler.

For instance:

 element.onclick = function(event) { // process data from event } 

In the jQueryUI API reference they confirm that i

Specifies which buttons should be displayed on the dialog. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object.

I illustrated this in a fiddle . Not sure what the second argument ( dialog in your case) does, though. It's not passed in my example code.

Answer 3

There should only be one parameter passed to submit, which is the event object of the button itself, when clicked. So the context set is the submit button, if you need to access the dialog and modify it, you can do so by accessing the event.target property.

  this.dialog({
  buttons: {
      submit: function(event) {
         $(event).dialog('close'); //is the same as...
         $(this).dialog('close');
      }
   });