jQuery generic code

Question

I am using jQuery modal dialogs in my app to handle normal CRUD operations. In some cases I have even two stacked modal dialogs open.

I have then created two generic function in an external javascript file to handle respectively the showing and the submit of CRUD forms.

To show modal dialogs I call the following function

function _loadDialog(level, action, id, title, onCloseHandler) {
    var panel = panels[level];
    $(panel).dialog("option", "title", title);
    var url = action;
    if (id != "") url = url + "/" + id;
    $.ajax({
        type: "get",
        dataType: "html",
        url: url,
        data: {},
        success: function(response) {
            $(panel).html('').html(response).dialog('open');
        }
    });
    $(panel).unbind("dialogclose").bind("dialogclose", function(event, ui) {
        if (onCloseHandler != null) {
            onCloseHandler();
        }
    });
}

This function receive, among the others, a level parameter that instruct the function how to stack the dialog and where to place the rendered Partial markup returning back from the ajax call. This function works fine.

Inside the Partial View returned by the ajax call there are input and at the end the following code

<div style="text-align:right;">
    <input type="submit" id="btnSave" value="Salva" />
</div>

and, for the jQuery part, for example,

$("#contactForm").submit(function(event) {
    _submitForm(1, event, "#contactForm", "post", "html", '<%= Url.Content("~/Contact/Save") %>');
});

As you can see the submit function has the following signature

function _submitForm(level, event, formName, atype, adataType, aurl) {
}

and it handle

• the form submission to the correct controller action
• the user feedback (e.g. "action executed successfully")
• the dialog close operation

The level parameter is needed to address all the function, including closing the dialog, to the correct DIV panel used.

I would like to be able to show the same dialog sometimes as a dialog and sometimes as a sub dialog.
To be able to do this, I mean "logically speaking" as I am not so strong with javascript and jQuery, I need the following changes:

• Modify the _loadDialog function to save the level parameter inside the dialog markup itself
• Modify the _submitForm function and make it using the correct level parameter that has been previously saved from the _loadDialog function.

How can I achieve this?

Answer 1

It sounds like all you need is to pass on the level parameter you've already got to the _submitForm function when calling it.

function _loadDialog(level, action, id, title, onCloseHandler) {
    var form = $('<form ...></form>');
    // ... Generates the form markup

    form.submit(function() {
        _submitForm(level, ...);
    });
}

While I've obviously skipped over all the details I don't know of your implementation, the key is simply that whatever level gets passed into _loadDialog will later get passed into _submitForm when it's called.

In JavaScript, it doesn't matter that _submitForm isn't called at the same time you call _loadDialog. Through what's called a "closure" (something JavaScript programmers love to talk about), the level variable gets saved safely inside your anonymous callback function for form.submit() and will still be available with the same value when that function is eventually called.

Answer 2

I'm a little confused about what is where and when, but it seems that you want to associate a bit of information with a particular element.

To do this, you can use jQuery's .data() method. It will associate whatever data you want with a particular element.

Not sure how exactly it should be used in your situation, but here's a generic example:

$('#someSelector').data('level', 3);

Now the element with the ID someSelector will have the number 3 mapped to its 'level' attribute in its associated data.

So to retrieve it, you would do this:

$('#someSelector').data('level'); // returns 3

When destroying an element that has data associated with it (this is just one example of such data), you should be sure to use .remove() or .empty() or one of the other methods that either automatically or manually removes the data.