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?

What's the current relationship between these two functions? Is _submitForm called from the onCloseHandler you pass into _loadDialog? — VoteyDisciple
– VoteyDisciple, Commented Nov 13, 2010 at 12:38
@VoteyDisciple: No. _submitForm is called by a click event of a submit button inside the form — Lorenzo
– Lorenzo, Commented Nov 13, 2010 at 12:40

user113716 · Accepted Answer · 2010-11-13 16:59:14Z

1

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.

answered Nov 13, 2010 at 16:59

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lorenzo Over a year ago

Ok. Basically I am trying to use always the same function loadDialog and submitForm either from my views and from my partial from any level of stacked dialog. So I need to make sure that when calling submitForm from a partial or view it will closes the correct dialog.

VoteyDisciple · Accepted Answer · 2010-11-13 12:48:19Z

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.

answered Nov 13, 2010 at 12:48

VoteyDisciple

37.9k5 gold badges100 silver badges100 bronze badges

2 Comments

Lorenzo Over a year ago

Ok. I can really understand your suggestion and it seems very easy to implement. Anyway I am not sure this will work within my implementation because is not so simple as the form variable you are using. I am going to edit my question to add more details on the two functions to give you a better understanding of the details. It would great if you can have a look at it. Thank you!

Lorenzo Over a year ago

It would be easier if during the dialog creation I could add a invisible section to the dialog markup that the code inside the partial can query. Inside this section I could place the level value

Collectives™ on Stack Overflow

jQuery generic code

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related