views:

29

answers:

0

Hi – I am using MVC 2 and JQuery with JQModal to create forms dynamically and am having an issue with closing a Modal window that is opened on top of another modal window using Jquery .trigger and .bind to catch the event triggered.

The associations for example are:

Companies -> address / contacts/ communication ( selectable from a tab menu list) and injected into the main form using Jquery at this level things work ok.

But Contacts that belong to a company can have Addresses / Communications associated with them initially. So the trick is to display a list of address and communication data using the same tab menu as on the main page – renamed the div ID from tabs - > tabWindow

My solution is on the edit display show the contact details and put a tab menu underneath and use list views of addresses or contacts. From these lists there is an edit button to click on which opens another modal window to edit and update either contact or address information depending on what tab is active.

The issue I am having is a trigger in the edit page that is called when the form is finished and a bind on the injected view on the modal widow with the contact edit information never happens, but if I move the bind to the very first page before any windows are opened it is caught. The new issue becomes the base page knows nothing about the second window that was opened and therefore can’t close it .

I realize this is very confusing but any help would be greatly appreciated.

Code in the list view to catch the event -

$().ready(function () {
        $("#CommunicationWindow" + <%=Model.TabIndex %>).bind("UpdateSuccess" + <%=Model.TabIndex %>, function () { 
            alert("in com success" + <%=Model.TabIndex %>);
            $('#CommunicationWindow' + <%=Model.TabIndex %>).jqm({onHide: closeModal});
            $('#CommunicationWindow' + <%=Model.TabIndex %>).jqmHide();
            // handle diffrent form request..
            $('#CommunicationWindow' + <%=Model.TabIndex %>).trigger("Updated" + <%=Model.TabIndex %>, { tabid: <%=Model.TabIndex %> });
        });

Edit form that creates the trigger:

function updateSuccess() {
    alert("com update success" + <%=Model.TabIndex %>);
    $('#TextArea').trigger('UpdateSuccess' + <%=Model.TabIndex %>);
}

Tabindex is used to make the modals unique.