Handling Modalbox.hide & serialization in aspx C# code behind

77 views
Skip to first unread message

jellibean

unread,
Jun 22, 2009, 3:31:06 PM6/22/09
to ModalBox
Hi, all

1) I am calling another .aspx page in my Modalbox.show(). (Also, I
use beforeHide() where I capture data from my Modalbox before it is
hidden)
2) In the referenced .aspx page, I must call Modalbox.hide() in the
code-behind because I have an event that must be triggered BEFORE the
Modalbox is hidden.

In my testing, this works:
OnClientClick="Modalbox.hide({params: Form.serialize('MyForm')});
return false;"

But when I move this to the code behind, this does not work:
ClientScript.RegisterStartupScript(typeof(Page), "MyModal", @"<script
language='javascript'>Modalbox.hide({params: Form.serialize
('MyForm')}); return false;</script>");

This doesn't work either (noticed I removed the 'return false'):
ClientScript.RegisterStartupScript(typeof(Page), "MyModal", @"<script
language='javascript'>Modalbox.hide({params: Form.serialize
('MyForm')});</script>");


I read a couple other related posts, such as "misunderstand ModalBox,"
which were helpful, but am stumped at this point. Any help would be
greatly appreciated.

jellibean

unread,
Jun 22, 2009, 4:00:26 PM6/22/09
to ModalBox
One more thing. This is how I call the modal box from the parent
page's code behind, which works fine:

ClientScript.RegisterStartupScript(typeof(Page), "ModalBox", @"<script
language='javascript'>Modalbox.show('MyModalBox.aspx', {title: 'My
Title', width: 615, height:450, beforeHide: function() { alert($
('MyModalBoxField').value);} })</script>");

Justinas Urbanavicius

unread,
Jun 22, 2009, 5:34:31 PM6/22/09
to moda...@googlegroups.com
did you try to debug with firebug on firefox, or do you think this could be not javascript related problem but aspx ?

jellibean

unread,
Jun 22, 2009, 6:33:38 PM6/22/09
to ModalBox
Thanks for the quick response, Justinas. I've tried to debug with
Firebug Lite (for IE). But am new to the tool, so having some
struggles with it. The Console message is: "Exception thrown and not
caught (MatchRule3.aspx,124)."
I've also opened the same page in Firefox with Firebug Lite, the
message is: "uncaught exception: Modalbox is not initialized. (,0)"

I initially wondered if my client-code modalbox.hide code is getting
rendered by my server-side code properly (I've temporarily stripped
the params of the hide() to simplify debugging):
........
........
<script language='javascript'>Modalbox.hide()</script>
</form>

The strange thing is, the show() method of the parent webform (also
generated by server-side code) runs just fine:
........
.......
<script language='javascript'>Modalbox.show('MyModalBox.aspx', {title:
'My Title', width: 615, height:450, beforeHide: function() { alert($
('MyModalBoxField').value);} })</script>
</form>

On Jun 22, 4:34 pm, Justinas Urbanavicius <justin...@gmail.com> wrote:
> did you try to debug with firebug on firefox, or do you think this could be
> not javascript related problem but aspx ?
>

Justinas Urbanavicius

unread,
Jun 23, 2009, 7:28:08 AM6/23/09
to moda...@googlegroups.com
Ok, "uncaught exception: Modalbox is not initialized" this could be that the modalbox or prototype & scriptaculous scritps are not loaded on that page, where you whant to display modalbox.

siplest way to check is to open firebug, the go to the net panel, and navigate to your page.
If the Modalbox.js script is red that means the browser cannot find js file, either the path is wrong or if you don't see modalbox.js at all you could have forgot to include it.

The second thing is to check the order the way files are beeing loaded, from top to bottom the order should be:

1. Prototype, 2. Scriptaculous, 3. Modalbox

check these steps first, then we'll see what to do next

E. Wayne Madison

unread,
Jun 23, 2009, 7:52:03 AM6/23/09
to moda...@googlegroups.com
Hello,

I just wanted to say thank you for modalbox.

I am using it successfully at:

http://blueflyingfish.no-ip.biz/joomla15/index.php?option=com_jake&japp=habitat&jrun=pqsv1/pre_qual_surveys/sample&Itemid=53

Sincerely,

Wayne

--- On Tue, 6/23/09, Justinas Urbanavicius <just...@gmail.com> wrote:

jellibean

unread,
Jun 23, 2009, 10:30:43 AM6/23/09
to ModalBox
Thanks! The order looked like it was correct, but when I tried your
Firebug suggestion, I noticed some weird results with the Net panel.

At first, NONE of my js files listed at all. My original syntax was:
<link rel="stylesheet" href="javascript/modalbox.css" type="text/css"
media="screen" />
<script language="JavaScript" type="text/javascript" src="javascript/
prototype.js"></script>
<script language="JavaScript" type="text/javascript" src="javascript/
scriptaculous.js"></script>
<script language="JavaScript" type="text/javascript" src="javascript/
modalbox.js"></script>

Just for kicks, I added the load syntax below, the js files initially
were not listed, but then I clicked on a couple of the other tabs
(HTML, CSS, etc.), just to view them and when I returned to the Net
tab, I saw ALL of my js files listed (in black, with an 'OK' message):
<script language="JavaScript" type="text/javascript"
src="javascript/scriptaculous.js?load=builder,effects"></script>

In short, now I cannot reproduce the above, and none of the js files
appear no matter what I do. I'm either losing my mind or missing
something really simple.



On Jun 23, 6:28 am, Justinas Urbanavicius <justin...@gmail.com> wrote:
> Ok, "uncaught exception: Modalbox is not initialized" this could be that the
> modalbox or prototype & scriptaculous scritps are not loaded on that page,
> where you whant to display modalbox.
>
> siplest way to check is to open firebug, the go to the net panel, and
> navigate to your page.
> If the Modalbox.js script is red that means the browser cannot find js file,
> either the path is wrong or if you don't see modalbox.js at all you could
> have forgot to include it.
>
> The second thing is to check the order the way files are beeing loaded, from
> top to bottom the order should be:
>
> 1. Prototype, 2. Scriptaculous, 3. Modalbox
>
> check these steps first, then we'll see what to do next
>

jellibean

unread,
Jun 23, 2009, 10:30:55 AM6/23/09
to ModalBox
Thanks! The order looked like it was correct, but when I tried your
Firebug suggestion, I noticed some weird results with the Net panel.

At first, NONE of my js files listed at all. My original syntax was:
<link rel="stylesheet" href="javascript/modalbox.css" type="text/css"
media="screen" />
<script language="JavaScript" type="text/javascript" src="javascript/
prototype.js"></script>
<script language="JavaScript" type="text/javascript" src="javascript/
scriptaculous.js"></script>
<script language="JavaScript" type="text/javascript" src="javascript/
modalbox.js"></script>

Just for kicks, I added the load syntax below, the js files initially
were not listed, but then I clicked on a couple of the other tabs
(HTML, CSS, etc.), just to view them and when I returned to the Net
tab, I saw ALL of my js files listed (in black, with an 'OK' message):
<script language="JavaScript" type="text/javascript"
src="javascript/scriptaculous.js?load=builder,effects"></script>

In short, now I cannot reproduce the above, and none of the js files
appear no matter what I do. I'm either losing my mind or missing
something really simple.



On Jun 23, 6:28 am, Justinas Urbanavicius <justin...@gmail.com> wrote:
> Ok, "uncaught exception: Modalbox is not initialized" this could be that the
> modalbox or prototype & scriptaculous scritps are not loaded on that page,
> where you whant to display modalbox.
>
> siplest way to check is to open firebug, the go to the net panel, and
> navigate to your page.
> If the Modalbox.js script is red that means the browser cannot find js file,
> either the path is wrong or if you don't see modalbox.js at all you could
> have forgot to include it.
>
> The second thing is to check the order the way files are beeing loaded, from
> top to bottom the order should be:
>
> 1. Prototype, 2. Scriptaculous, 3. Modalbox
>
> check these steps first, then we'll see what to do next
>

jellibean

unread,
Jun 23, 2009, 12:13:09 PM6/23/09
to ModalBox
A couple additional things I've tried to rule out scenarios:

1) Looked at the parent aspx. site in Net Panel. It also does NOT
show any of my js files, but again, DOES perform Modalbox.show()
properly. Since my js includes syntax is the same in both web pages,
I think this may not be the issue.
2) Removed the beforeHide() function of Modalbox.show(). Still get
the same errors, so this wasn't the problem.
3) Checked to make sure I didn't use any other js libraries to avoid
potential conflicts.

Do you think these may be possible scenarios (?) causing the error?
- Modalbox.hide() is rendered right before the closing </form> tag.
- Do I need to explicitly specify get/post methods in my <form> tags
or parameters?
- In modalbox.js, I have 'aspnet: false' since setting it 'aspnet:
true' does not work.

jellibean

unread,
Jun 23, 2009, 8:57:36 PM6/23/09
to ModalBox
After another full day of testing, I'm almost convinced the problem
has little to do with syntax. It appears by the time the modalbox.hide
() code is rendered by my server-side code and executed, the modalbox
object itself is either disposed or simply no longer accessible in the
html. (??)

I've tried several things, some of which include:
- manually placing the exact hide() code where it previously got
rendered by my server-side code (right before </form>), and it worked
fine.
- reversing my web pages so that the page that previously called show
() now calls hide() and vice versa. The error is still "Modalbox is
not initialized.'
- **the most promising testing so far is:** researching .NET's order
of events on page load extensively to see if objects are getting
disposed too early. I've overridden several of these methods (onload,
onprerender,etc.) and added my hide() code. All result in same error,
EXCEPT, onload(), but only if it is NOT postback (ie, when the page is
first initialized). If it is a postback (ie, user clicks on the
submit button), then I still get "Modalbox is not initialized.' (??)

I'm trying to find .NET/C# examples that have implemented Modalbox.
Can anyone point me in the right direction? I've found several posts
which mentions successful implementations of Modalbox in .NET/C#, but
I cannot find any similar examples.

Justinas Urbanavicius

unread,
Jun 24, 2009, 9:11:17 AM6/24/09
to moda...@googlegroups.com
can you provide a link to your page, to so i could take a look?

Justinas Urbanavicius

unread,
Jun 24, 2009, 9:15:47 AM6/24/09
to moda...@googlegroups.com
it might be the javascript variable scope related issue, try to assing modalbox to global variable.

var mymodal = Modalbox.show(....

and the to call mymodal.hide();

jellibean

unread,
Jun 24, 2009, 10:54:43 AM6/24/09
to ModalBox
Hi, Justinas

I just sent a link where I uploaded my pages to your email. Yes, your
suggestion makes sense, I will try to test it out now....

Let me know if you have any questions about my web form. Thanks.

On Jun 24, 8:15 am, Justinas Urbanavicius <justin...@gmail.com> wrote:
> it might be the javascript variable scope related issue, try to assing
> modalbox to global variable.
>
> var mymodal = Modalbox.show(....
>
> and the to call mymodal.hide();
>
> On Wed, Jun 24, 2009 at 4:11 PM, Justinas Urbanavicius
> <justin...@gmail.com>wrote:
>
> > can you provide a link to your page, to so i could take a look?
>

jellibean

unread,
Jun 24, 2009, 12:03:43 PM6/24/09
to ModalBox
I implemented a global var as you demonstrated.
The modalbox again pops up as normal. However, when I call
MyModal.hide(), I get the error, "MyModal is not defined"

jellibean

unread,
Jun 24, 2009, 2:22:12 PM6/24/09
to ModalBox
I think I’ve identified the problem! The modalbox object is
instantiated twice: Once on initial load of the web form and once
again when the submit button of the modalbox is clicked. I put an
alert() in modalbox.js to confirm.

if (!window.Modalbox)
{
var Modalbox = new Object();
alert(“See how often this fires”);
}

The hard part now is I don’t know enough about how the Modalbox object
gets passed between parent web form to my modalbox web form or how to
preserve the initial Modalbox instance on postback.
> ...
>
> read more »

Justinas Urbanavicius

unread,
Jun 24, 2009, 3:44:03 PM6/24/09
to moda...@googlegroups.com
i saw the page, ant i see that you use a regular submit, not the AJAX way that is described in modalbox page. Apart from that everything is working, the hide() functions worked for me.
Reply all
Reply to author
Forward
0 new messages