SimpleModal - Calling "modal()" on the same element

Question

I have one page which I want to have in it few instances of modal windows implemented by SimpleModal. The exact scenario is as follows:

1. The page is loaded.
2. The user hits a button to open a modal window.
3. In the modal, the user inserts (inputs) all the information he is required.
4. The data is validated. If the validation is failed, a new modal should show up with the error. The concept is to have a modal window that should work just like javascript alert() function.
5. When the error is visible, the previous modal should disappear.Once the user clicks on OK the error should go away and the old modal should come up.

Now, I've searched for an answer and I saw several posts of Eric Martin (the developer of SimpleModal) talking about having multiple modal windows. It seems like that SimpleModal doesn't support it, and what he recommends is the to replace the content of the modal with the new one.

What I'm trying to do is:

1. Before I show the alert, I keep the ID of the open modal.
2. Hide all the open modals (hide the divs).
3. Show the alert and bind the OK button.
4. When the user clicks OK, I close the current modal (of the alert), get the name of the old div, and show it again by calling ShowDialog("getSubsidiariesForCustomer").

My problem is that when I try to run the last command it doesn't works. After investigating it seems like that the implementation of the SimpleModal plugin is keeping a flag if the modal() function was called on the certain element.

Just for general knowledge:

1. I'm using simple modal 1.41

2. It seems like I'm faling on line 216 in the JS:

   // don't allow multiple calls if (s.d.data) { return false; }

My code is the just after this section: I'm starting by running the logic of "jBtnNew_Click":

Admin.BL.SettingsPage.jBtnNew_Click=function(e)
{
    Admin.BL.EcmSettings.ShowDialog("#getSubsidiariesForCustomer");
    alert(""); //Just for debugging
    Admin.BL.EcmSettings.ShowAlert();
}

Admin.BL.SettingsPage.ShowAlert=function()
{
    var id = $("div.model:visible").eq(0).attr("id");
    $("#alertBtnOk").one("click", function(e){
        $.modal.close();
        if (id != undefined)
        {
            Admin.BL.SettingsPage.ShowDialog(id);
        }
    }
    );
    Admin.BL.SettingsPage.ShowDialog("#alert");
}

Admin.BL.SettingsPage.ShowDialog=function(dialogId)
{
    if (dialogId.indexOf("#") < 0)
    {
        dialogId = "#" + dialogId;
    }
    $("div.model").hide();
    $("#dialog").modal({position:new Array("20%"),
    overlayId:"dialog-overlay",
    containerId:"confirm-container"});
    $(dialogId).show();
}

And this is my HTML:

Get Customer's Subsidiaries Customer ID: Customer Name: This is my alert

Any help on solving this issue will be appreciated!!

Thanks :)

Answer 1

I think your issue (#4) may be with the setTimeout code I have in SimpleModal to deal with Opera issues. I need to remove it, but for now you can try editing the SimpleModal source by finding the following:

setTimeout(function(){
    // opera work-around
    s.d.overlay.remove();

    // reset the dialog object
    s.d = {};
}, 10);

And replacing it with:

s.d.overlay.remove();
// reset the dialog object
s.d = {};

Let me know if that does not work for you...