Question

I have the following code:

function submitHandler(dialog) {

    dialog.$submits.disableBt();
    dialog.$message.addMessage("loading", "<li>Contacting Server, please wait ...</li>");
    $.ajax({
        url: href,
        dataType: 'json',
        type: 'POST',
        data: dialog.$form.serializeArray()
    })
        .done(onSubmitDone())
        .fail(onSubmitFail());
}

This function has a parameter of dialog which is an object looking like this:

{
        $modal: $modal,
        $form: $modal.find('.form'),
        $message: $modal.find('.message'),
        $submits: $modal.find('.submit-button'),
        href: $form.attr('data-href')
    };

I need to send the dialog object to the onSubmitDone and onSubmitFail functions. Previously I was not using an object
to hold $modal, $form etc and the variables were all available to all functions that were enclosed within an outer function

Two questions:

Is it sensible to pass things around as parts of an object or should I just declare these variables at the top of an outer function.

If I do pass around the object how can I pass it to the following:

function onSubmitDone(json) {
    json = json || {};
    if (json.Success) {
        switch (action) {

I understand that my json object is passed but how can I pass the dialog object also?

Answer 1

If you pass your object as the context option of $.ajax, it will be available as this inside onSubmitDone and onSubmitFail:

var jsonObj; // do you really need this global?

function submitHandler(dialog) {
    jsonObj=dialog.$form.serializeArray();
    dialog.$submits.disableBt();
    dialog.$message.addMessage("loading", "<li>Contacting Server, please wait ...</li>");
    $.ajax({
        url: href,
        dataType: 'json',
        type: 'POST',
        data: jsonObj ,
        context: dialog
    })
        // Don't call the handlers from here, no ()!
        .done(onSubmitDone)
        .fail(onSubmitFail);
}

// Receives the data from the server
function onSubmitDone(response) {
    // your object is available as 'this':
    console.log(this.$modal);
}

// Different params here, but 'this' is the same
function onSubmitFail(jqXHR, textStatus) { /* ... */ }