Wednesday, March 23, 2005

Modal Pop-Up window(ASP.NET JavaScript)

Problem:

We all require Modal Web Dialogs once in a while, and so came my turn. I used js to pop up a modal dialog like so :

function OpenModalDialog(strUrl,strFeatures,aID,hours)

{

if (strFeatures == '')

strFeatures = "resizable=no;dialogWidth:510px;dialogHeight:350px;help:no;
maximize:yes;minimize:yes;scrollbars:yes";

//set the cookie values

document.cookie = "AID=" + aID + ";path=/";

document.cookie = "Hours=" + hours + ";path=/";

var r = window.showModalDialog(strUrl,'',strFeatures);

if(r == true)

{

document.Form1.txhBool.value = '1';

}

else

{

document.Form1.txhBool.value = '0';

}

document.Form1.submit();

}


This function pops-up a modal web dialog. Now you have the modal dialog floating on top of the browser.

I wrote a few lines of code on the modal dialog and put a button in to make it submit. But to my surprise, another window(non-modal) poped up. I was very surprised and tried to get help but was told that modal dialogs cannot do a postback... Well I was very surprised at MS to let a loophole like this exist in IE. But I just continued my work due to lack of time to do some R&D. So now the only option was using js, so I used this function in my popup dialog and called it on the click on a <input> button (not asp button - as using asp button would force a postback!)

function ClosePopUp(val)

{

window.returnValue = val;

window.close();

}


What this fn does, is to pass the value val to the parent browser's function that poped this modal dialog up.

Lamentations :

So I process the value that is retrurned by the modal dialog and continued the processing on the parent page. The down side of this way according to me were three-fold.

1)All process had to be done on the page load of the Parent page(becuase the js function does a postback after getting a value from the child modal dialog.

2)A lot of time was wasted due to the fact that processing had to passed to the parent

3)The page modal was not so elegant

Many chances came where I needed to use modal dialogs, and all the way I used this method, thinking all this while that modal dialogs can't postback. Little did I know that I was so wrong!

Resolution :

Earlied when I was helping a person on one of the forums, Eliyahu Goldin, told me so!!


He said all I needed to do is to add this line inside the <head> </head> tag of the modal page :

<base target=_self>


Without wasting a second I opened one of the projects with the former js modal dialog implementation and tested it, and it worked totally!!!

So much time wasted, so much pain suffered just becuase I didn't bother to google for this one little piece of code! :(

I owe this to Eliyahu...Cheers man..

Comments:
Thank you very very much!!!
your help was just what I needed to solve my site problems!!!
 
Post a Comment

<< Home

This page is powered by Blogger. Isn't yours?

© Copyright 2005, Rohan Thomas
Disclaimer
This Blog contains findings that are self-explored and expressions that are self-evoked. They are by no meanss representions of my employer's view.