DHTML Window widget (v1.03)

**mujahidazam** · 09-24-2007, 05:52 AM

DHTML Window widget (v1.03)
http://www.dynamicdrive.com/dynamici...ndow/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:

Code:

<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.

Thread: DHTML Window widget (v1.03)

Thread Tools

Search Thread

DHTML Window widget (v1.03)

Bookmarks

Bookmarks

Posting Permissions