JQuery UI Multiple Dialogs Not Working -

JQuery UI Multiple Dialogs Not Working -

i have page 2 links open 2 different modals, "forgotten password" link opens "forgotten password" modal , "tell-a-friend" link opens "tell-a-friend" modal.

both modals contain forms can submitted.

the problem if open first modal , submit or close it, cannot submit sec modal. can open sec modal, cannot submit it.

please advise problem be!

here below javascript code resides in separate javascript file, imported html file. not inline javascript, if matter.

[code]

var forgottenpassworddiv; var tellafrienddiv; function clearerrormessages() { $('#errormessage').text(""); } function openforgottenpassword() { forgottenpassworddiv = $('#forgotten-password'); $('#forgotten-password').load("/templates/include/new/ajax/modal/forgottenpassword.jsp") .dialog( { autoopen:false, modal:true, position:'left+35% top+20%', width:'330', height:'auto' } ); $('#forgotten-password').dialog('open'); } function closeforgottenpassword() { forgottenpassworddiv.dialog("close"); } function submitforgottenpassword() { clearerrormessages(); var email = $('#email').val(); if (email == null || email == '') { $('#errormessage').text("please come in user name or email"); } else { clearerrormessages(); /* ajax post */ var formdata = $("#forgottenpasswordform").serialize(); $.ajax({ type: "get", url: "/templates/include/new/ajax/forgottenpassword.jsp", data: formdata, success: function(data) { if (data.error != null) { $("#errormessage").text(data.error); } else { $('#forgottenpasswordform , .info').fadeout(1000); $("#successmessage").text(data.success); $("div").removeclass('display-none'); } }, datatype: 'json' }); } } function opentellafriend(gunid) { tellafrienddiv = $('#tell-a-friend'); $('#tell-a-friend').load("/templates/include/new/ajax/modal/tellafriend.jsp?id=" + gunid) .dialog( { autoopen:false, modal:true, position:'center top+10%', width:'330', height:'auto' } ); $('#tell-a-friend').dialog('open'); } function closetellafriend() { tellafrienddiv.dialog("close"); } function submittellafriend() { clearerrormessages(); var yourname = $('#yourname').val(); var errormessage = ""; if (yourname == null || yourname == '') { errormessage += "please come in name<br />"; } if (errormessage != '') { $('#errormessage').html(errormessage); } else { clearerrormessages(); /* ajax post */ var formdata = $("#tellafriendform").serialize(); $.ajax({ type: "get", url: "/templates/include/new/ajax/tellafriend.jsp", data: formdata, success: function(data) { if (data.error != null) { $("#errormessage").text(data.error); } else { $("#tellafriendform").fadeout(1000); $("#successmessage").text(data.success); $("div").removeclass('display-none'); } }, datatype: 'json' }); } }

[/code]

the ui-dialog widget remain in dom hidden element after dialog closed. so, in order isolate 2 dialog functionalities each other i'd suggest call:

forgottenpassworddiv.dialog("destroy")

in "closeforgottenpassword" function and

tellafrienddiv.dialog("destroy")

in "closetellafriend" function.

this homecoming dialog pre-init state (which not harmful @ because reinit in "open" functions.)

jquery-ui jquery