PDA

View Full Version : DHTML Window widget (v1.03)



mujahidazam
09-24-2007, 05:52 AM
DHTML Window widget (v1.03)
http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm

Hi,

I am using asp.net 2.0, C# as the code behind in my application.
The script works well on its own, ie the window pops up closes , minimizes etc...
But when we have server side controls eg a Button, the click does not execute the server side code. any javascript will execute. but the server side code does not execute. there is no other javascript in the page. It is just a plain div with a asp.net button inside. if the button is placed outside the div which needs to be popped up, the server side code executes. but when inside the div it does not execute. please advice the html code is as follows:

This code button click does not execute the server side code
***********************************************
// div that has to be popped up

<div id="somediv" style="display: none">
<p style="height: 400px">
This is some content within a DIV, shown inside this window instead</p>


//the asp.net button
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

//Button1_Click ---> server side function written in c#
</div>

<div>
<a href="#" onclick="var divwin=dhtmlwindow.open('divboxaa', 'div', 'somediv', '#4: DIV Window Title', 'width=450px,height=300px,left=200px,top=150px,resize=1,scrolling=1'); return true;">
<b>Create Open Window 4</b></a>



</div>

*********************************************************






This code button click executes the server side code
***********************************************
// div that has to be popped up

<div id="somediv" style="display: none">
<p style="height: 400px">
This is some content within a DIV, shown inside this window instead</p>
</div>

<div>
<a href="#" onclick="var divwin=dhtmlwindow.open('divboxaa', 'div', 'somediv', '#4: DIV Window Title', 'width=450px,height=300px,left=200px,top=150px,resize=1,scrolling=1'); return true;">
<b>Create Open Window 4</b></a>

//the asp.net button
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

//Button1_Click ---> server side function written in c#

</div>

********************************************************


As you see in the above html if the button is placed inside the div which needs to be popped up, it does not execute the server side code. but in the second case if it is outside the div it executes the server side code.

ddadmin
09-24-2007, 06:42 AM
When using the "inline DIV" option for specifying the contents of the DHTML window, this inline DIV (ie: "somediv") needs to be rendered fully when the page first loads, as that's the only chance server side content can be embedded inside it. This means the contents of the inline DIV should be defined already at that point (view source to verify). While I'm not sure I fully understand your two scenerios above, I think I get the basic question you're asking.

Now, if you're using the "iframe" option to specify the contents of the DHTML window, any server side inclusion code within the iframe does not have to be pre-rendered when the main page loads, as when you call the iframe page, that's when the server will execute the server side code.

mujahidazam
09-24-2007, 07:14 AM
Thanks for the quick reply.

when i view source with the button inside the inline DIV, the div is rendered. see source below: but the button click does not execute.

*************************************



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><link rel="stylesheet" href="windowfiles/dhtmlwindow.css" type="text/css" />

<script type="text/javascript" src="windowfiles/dhtmlwindow.js"></script>
<title>
Untitled Page
</title></head>
<body>
<form name="form1" method="post" action="TestPopup.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTM1NjkzMjU1OWRkSlsGeQ7Ag2QVqk9aapGsPDSTlIU=" />
</div>

<div id="somediv" style="display: none">
<p style="height: 400px">
This is some content within a DIV, shown inside this window instead</p>
<input type="submit" name="Button1" value="Button" id="Button1" />
</div>

<div>
<a href="#" onclick="var divwin=dhtmlwindow.open('divboxaa', 'div', 'somediv', '#4: DIV Window Title', 'width=450px,height=300px,left=200px,top=150px,resize=1,scrolling=1'); return true;">
<b>Create Open Window 4</b></a>



</div>

<div>

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKY5paPBwKM54rGBjzxoKEbskjtbDVPcnLQ+vAIXHyD" />
</div></form>
</body>
</html>


*************************************

but when the button is placed outside of the inline DIV the button click executes. please help.........

ddadmin
09-24-2007, 07:51 AM
Please post a link to the page on your site that contains the problematic script so we can check it out.

mujahidazam
09-24-2007, 08:52 AM
hi,

the link is.......

http://www.edcindia.com/testAjax/pop/testpopup.aspx


there are two buttons one inside the inline div and one outside......

the button outside the inline div works and the labels text changes but the one in the inline div does not work....

it is not very elaborate, but i hope that should help

ddadmin
09-24-2007, 09:15 AM
I see what you mean now. This is because the submit button inside your inline DIV lacks its own <form> tag. Normally this isn't needed obviously, but since DHTML Window dynamically lifts the contents of the inline DIV and inserts it into the DHTML window, when that happens, there is no form tag around the submit button.

There are two ways to fix this:

1) You can either duplicate the entire form into the inline DIV again, from the <form> tag to the hidden input fields inside the form etc.

OR

2) Modify the submit button inside the inline DIV to dynamically submit the form that's actually on the page already, something like:


<input type="button" name="Button1" value="Button" id="Button1" onClick="document.forms.form1.submit()" />

The second method should be better.

mujahidazam
09-24-2007, 10:54 AM
Hi thanks,

but you see this is just a test app i built. in the actual application i have more than 15 buttons and the page is also huge, therefore the above techniques wont work. is there any other work around.

mujahidazam
09-24-2007, 10:57 AM
hi ddadmin,

if you could help me with some code on how to duplicate the form in the first case it would be helpful as i am not very good at javascript

ddadmin
09-24-2007, 10:34 PM
Have you tried using the 2nd method I mentioned above? Getting the submit button in the inline DIV to simply submit the original form that's on the page is the best way to go, especially if your form is complex.

mujahidazam
09-25-2007, 12:09 PM
hi ddadmin,

i did try that, it posts the page but the code in the button click does not execute. it just enters the page_load function and comes out.
can u help me with the first approach or any other method which could solve the problem.

ddadmin
09-25-2007, 08:00 PM
i did try that, it posts the page but the code in the button click does not execute. it just enters the page_load function and comes out.

That should be easily fixed. What extra code are you trying to execute?

p.s: Regarding method I, it really isn't practical with long forms. It simply involves adding the entire form again inside the inline DIV, changing the form name any all form element IDs inside this DIV, so you're left with two different forms on the page, except both do the exact same thing.

mujahidazam
10-01-2007, 06:17 AM
hi,

the problem is that there are exactly 23 buttons in the application that i am working on, hence trying to put the button click code in the page load function will not work out...... any other ideas..... or can we modify the javascript to overcome this problem......

mujahidazam
10-03-2007, 07:18 AM
hi..

anyone here with any solution to the above problem............

Thanks in advance........

mujahidazam
10-08-2007, 10:47 AM
hi all,

anyone here with any solution to the above problem............

twohawks
10-08-2007, 05:44 PM
Hi mu..
I am not an expert, but I was thinking... maybe the problem could be approached form the angle of targeting the 'parent window' using method #2 that ddadmin suggests?
The problem however is the iframe cannot address the 'parent' window for the form button because the iframe is not really a 'child', but simply a div in the main window.
I wonder if you tried figuring out a way to adjust your code to speak to the 'parent location' [not!] from the iframe using a work around technique, like creating a function for that?
I saw something like this being discussed here, I would suggest doing a search on these forums using the "try google instead" method for the words
widget iframe parent
...and see what you turn up.

?to ddadmin... do I have my head up my bum? ...or is this feasible with the form? (I assume you know what I am referring to?)

cheers,
TwoHawks

ddadmin
10-09-2007, 04:54 AM
hi,

the problem is that there are exactly 23 buttons in the application that i am working on, hence trying to put the button click code in the page load function will not work out...... any other ideas..... or can we modify the javascript to overcome this problem......

Sorry for the delay in response. I've been testing this out, and actually, the problem is apparently more complicated than that. Basically you can't split the contents of a form so a small portion of it is duplicated somewhere else (in this case,to a the DHTML window), and still expect the form button in the new location to work. Even with the reply I posted earlier using something like:


<input type="button" value="submit" onClick="document.getElementById('testform').submit()" />

Apparently in IE, an access denied error occurs when you click on it, since it trips some security limitation in IE.

What you need to do is keep the entire form intact somehow, and not only display a portion of the form inside the DHTML window (ie: just a bunch of submit buttons). Really the best way is to either use the "ajax" or "iframe" option to display the entire form inside the DHTML window.

mujahidazam
10-09-2007, 10:52 AM
thanks for the response........

i tried searching for the widget iframe parent, but did not find anything which was helpful.

is it possible to modify the javascript so that when the div is created it has the same id as the one on the page, sorry if this sounded stupid. but i am not too good at javascript. any help will be highly appreciated, as i have a project deadline on the 15th of this month and i could not find any other widgets which are as good as this.

thanks in advance

ddadmin
10-10-2007, 07:48 AM
i tried searching for the widget iframe parent, but did not find anything which was helpful.

If you're able to put the entire form inside the DHTML window, why would you need to search for the iframe's parent? FYI you can access the parent (the page that launched the DHTML window) within the window using something like:


parent.x //access variable "x" within parent
parent.document.getElementById("test") //access element "test" within parent


is it possible to modify the javascript so that when the div is created it has the same id as the one on the page, sorry if this sounded stupid.

This just won't work as I've experimented with and mentioned above. In IE, even when I just try to submit the form on the parent using a submit button within the DHTML window, a security error pops up. Duplicating the entire form will only have you running into more problems, as two forms sharing the same names/ids probably wouldn't work even in Firefox.

Is there no way you can just put the entire form into the DHTML window? Or, you can have the form on your parent page, that when it's submitted, the result shows up in the DHTML window. That's possible.