Modal Dialog - This Almost Works

  • Thread starter Thread starter Guadala Harry
  • Start date Start date
G

Guadala Harry

I have a modal dialog that currently does all of the following except item
4.

1. lets users select a graphic from a list of thumbnails (and when selected,
displays the full-size image in a preview DIV)
2. when users close the dialog, the application receives the URL to the
selected graphic.
3. the modal dialog lets the users upload a new graphic if the dialog does
not present them with one they are already happy with.
4. upon uploading a new graphic, the newly uploaded graphic appears in the
dialog along with the existing thumbnails.

What I started with (and does items 1-3 just fine) was a frameset aspx page
that included two frames - one frame for the thumbnails, and another frame
that provided (1) a preview area for the full-sized version of the selected
thumbnail, and (2) the controls required for uploading new graphics. In
order to accomplish item 4, I had a RegisterStartupScript line that would
cause the thumbnail frame to reload itself. Please note that this setup
works (all items 1-4 work fine) when the frameset is viewed by itself. But
when viewed as a modal dialog, item 4 does not happen... as if the
RegisterStartupScript line isn't executed (but it in fact is). But because I
need to display this as a modal dialog, this arrangement won't work.

I received some advice to get away from a frameset and use IFrames instead.
So I converted the above frameset to be one aspx page that contains two
IFrames (one for thumbnails and the other for the full-size/preview and
upload controls). This is same as before, just with IFrames. Still no dice.

So, at this point I'm thinking it might make sense to have one aspx page
with one IFrame. The aspx page would provide all of the preview/upload
controls, and the IFrame would display the thumbnails. Would this get me all
of items 1-4?

I'd sure appreciate some suggestions that would would give me all of items
1-4 as a modal dialog.

Thanks!!!

-GH
 
Hi,

Try putting:

<BASE target="_self">

In your <head> tag. Also, what isn't it doing? Not posting back? Image
not changing? Good luck! Ken.
 
I tried putting <BASE target="_self"> in (I placed it in the <head> of the
aspx page that contains the IFrames)... no dice.

Specifically, what is not working is that upon uploading a new image, the
page that appears in the thumbFrame does not reload, and therefore users
don't see the thumbnail of the newly uploaded graphic.

Here is the code that I expect would cause the page in thumbFrame to reload.
This code executes in the code-behind module behind the page that loads into
mainFrame.
string scriptString = "<script
language=JavaScript>parent.thumbFrame.location.reload(true)</script>";
if(!this.IsClientScriptBlockRegistered("clientScript")){
this.RegisterStartupScript("clientScript", scriptString);
}

Here is all the code in the ASPX page that contains the IFrames (there is no
code-behind logic for this page):
<%@ Page %>
<%@ OutputCache Location="none" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Select Image</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<BASE target="_self">
</head>
<body bottommargin="0" leftmargin="0" topmargin="0" rightmargin="0">
<form id="Form1" method="post" runat="server">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="225px">
<iframe id="thumbFrame" name="thumbFrame" src="SelectAssetThumbs.aspx"
frameborder="0" scrolling="auto" style="width: 225px; height:
410px"></iframe>
</td>
<td width="100%">
<iframe id="mainFrame" name="mainFrame" src="SelectAssetFull.aspx"
frameborder="0" scrolling="no" style="width: 100%; height: 410px"></iframe>
</td>
</tr>
</table>
</form>
</body>
</html>

Thanks for any guidance on making this work!

-GH
 
Well, if your married to a modal dialog. . .

At least with IE, dialogs do not support navigation (nor refresh). Hence
the dialog will not refresh itself and thus display the new thumbnail after a
post (or postback). I'm not sure of the behavior of iframes embedded on a
dialog

I'm not even sure if the posting of the new thumbnail via a dialog will
succeed. . .but, if so, perhaps 1 of the following solutions would work:

1) When the user posts the new file, close the dialog and return a value
that flags the code that opened the dialog to redisplay the dialog.

2) Generate the list of thumbnails dynamically using client-side code.
There are a number of ways to do this with IE. But for a browser independent
method, I'd populate/repopulate an xml object/tag using an ASPX file with a
Response.ContentType="text/xml" and use the resulting xml structure to
build/rebuild the thumbnail list.
 
I do have modal dialogs elsewhere in thet app that do in fact support
refresh (meaning in my case that that they process a button click
server-side and display the results in the modal dialog); the trick in
getting modal dialogs to process postbacks without opening a new window is
to make the modal dialog a frameset. That's how I get it to work in my other
scenarios. The only difference with my current issue is that instead of
processing a postback and redisplaying all for the same page, I'm now
attempting to process the postback in one page and attempting to have it
return a startup client-side instruction (via RegisterStartupScript) that
causes a different page in the frameset (or in a different IFrame) to reload
itself. This is where it falls apart. It behaves as if the instruction in
RegisterStartupScript is never processed in the client. FWIW: If this exact
same page/frameset (or "IFrame set") is opened by itself (i.e., *not* as a
modal dialog), then it all works just fine. But I really need for it to be a
modal dialog.

I appreciate your ideas and they might prove useful in a different scenario,
but the current requirements I'm working with are that the dialog remains
open, giving the user the opportunity to upload additional graphics without
interrupting their workflow.

Cheers!

GH
 
I tried putting <BASE target="_self"> in (I placed it in the <head> of the
aspx page that contains the IFrames)... no dice.
Click to expand...

Yeah - I've never got that to work either...
 
Yeah - I've never got that to work either...
Click to expand...

So, any other ideas? It's hard to think I've actually hit some wall and
can't get this functionality.

-GH
 
Hi,

You need to but <Base target="_self"> into the .Aspx page that shows up in
the frame. Not the page that contains the IFrames, it needs to go in the
page that is posting back to itself. Also, if the newly uploaded thumbnail
has the same name as the old one you may need to add an arguement to the
name or it will display the old image. <img src="mygif.gif?arg=1"> then
when you change the image <img src="mygif.gif?arg=2">. Good luck! Ken.

--
Ken Dopierala Jr.
For great ASP.Net web hosting try:
http://www.webhost4life.com/default.asp?refid=Spinlight
If you sign up under me and need help, email me.
 
Hi Ken,

I did as you suggest - (put <base target="_self"> into the <head> of the
pages that show up in the IFrames; all pages involved here now have that)...
still no dice. But after additional testing, I think the problem actually
has nothing to do with the page posting back to itself. Here's what I did to
eliminate the Postback issue as a possible explanation:
I placed the following in the page that shows up in mainFrame:

<input type="button" value="Refresh Thumbs"
onclick="parent.thumbFrame.location.reload(true)" >

When the frameset is viewed by itself (i.e., not modal), clicking that
button causes the page in thumbFrame to reload. But when the frameset is
opened as a modal dialog, the page in thumbFrame does not reload when that
button is clicked. Because that button is hard-coded into the page, that
eliminates the whole postback issue. It appears that there is something
about a modal dialog box that prevents that simple onclick statement to
execute.

Any ideas? or is it time to give up on this functionality working in a modal
dialog?

Thanks!

-GH
 
Hi,

You could try:

onclick = ' parent.thumbFrame.location.href = "page.aspx" '

Or maybe call a function in the thumbFrame page and have it use:

self.location.reload() or self.location.href.....

I think you'll just need to play around with it till you find the right
combination. Also, the reload(true) mimics the refresh button. Meaning
that it will use the same querystring and etc. as it did when it was loaded.
What this also means, is that if the page is in its state because of a
postback. Doing a reload will redo that postback. In both cases if you set
a breakpoint on your page load event for the page in the thumbFrame you will
see that it will hit your breakpoint. So you might want to step through it
and maybe override the render event so you can take a snapshot of what it is
sending to the browser. Maybe even try loading a simple html page in that
frame and seeing if you can get that to reload will help you with some clues
as to what is going on. Good luck! Ken.
 
Bingo! Got it!

Your most recent suggestion is what worked - specifically:
' parent.thumbFrame.location.href = "page.aspx" '

It probably helps that none of the pages involved in this modal dialog
scenario requires a querystring or client-side parameters in order to
display the correct information - as all of that comes from server-side
logic via each page's respective code-behind. All I have to do is cause the
page to reload itself and the updated information is served up from the
database.

I really appreciate you hanging in there with me on this one... taking the
time...

-GH
 
Back
Top