Prototype and Modal Dialog Problem

[PhxVyper]

Hi,

I'm having an IE specific issue and I have no clue how to resolve it.

I am using prototype, scriptaculous, and dialog (an extension written by Jeff Smick at http://snippets.dzone.com/posts/show/3411). I'm using dialog to create a modal dialog. In Firefox, it works perfectly.

When using IE, I'm getting a "Object doesn't support this property or method" when implementing the dialog.

The error is being thrown on the line: $(domid).show();

Here's my code sample:


<script type="text/javascript">
function displayAnnouncementDetail(anid,domid)
{
new Dialog.Box(domid);
$(domid).show();

var opt = {
onSuccess: function(t) {
//evaluate response so that announcementHeader and announcementBody are set
eval(t.responseText);

if(announcementHeader != '' && announcementBody != '')
{
document.getElementById('announcementHeader').innerHTML = announcementHeader;
document.getElementById('announcementBody').innerHTML = announcementBody;
}
else
{
$(domid).hide();
}
},
on404: function(t) {
alert('Error 404: location "' + t.statusText + '" was not found.');
},
onFailure: function(t) {
alert('Error ' + t.status + ' -- ' + t.statusText);
}
}

new Ajax.Request('/index.php/myhome/getAnnouncement/' + anid, opt);
}
</script>


anid is just a unique id that gets passed with the ajax call.
domid is the container id that is used for the modal dialog. For example, I have:



<div id="announcementContainer" style="display:none;">
<div id="announcementHeader">Announcement</div>
<div id="announcementBody">Loading...</div>
<div id="announcementFooter"><a href="javascript:void(0);" onClick="$('announcementContainer').hide();">Close Announcement</a></div>
</div>


So, when I call my function, I use something like:

<a href="javascript:void(0);" onClick="displayAnnouncementDetail('6','announcementContainer');">site admin announcement</a>

Like I stated above, in Firefox it works perfect. In IE, I get the error.

I have attached the dialog.js extension that I'm using.

Here is how I'm including prototype and dialog:



<script type="text/javascript" src="/script/prototype.js"></script>
<script type="text/javascript" src="/script/dialog.js"></script>


Any help is appreciated.
Chad

[jscheuer1]

This might not be the problem, but 6 is not a valid element id. If you mean the id of an element, it should begin with a letter. If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[PhxVyper]

Hi,

Actually, the first parameter is not for the element id. that is a parameter used elsewhere.

domid is the second parameter.

I'll post a link to a sample page shortly (it is on a protected site that is under development).

[tech_support]

Try replacing this:


$(domid).show();
with this:


$(domid).show(domid);
or this:


Element.show(domid);

[jscheuer1]

Try replacing this:


$(domid).show();
with this:


$(domid).show(domid);
or this:


Element.show(domid);


Good catch. In the prototype framework it is the latter, at least as used in ligthbox, which also employs prototype:


Element.show(domid);

That also would mean that:


onClick="$('announcementContainer').hide();"

should be:


onClick="Element.hide('announcementContainer');return false;"

The 'return false;' is just a good idea because even though the href is 'javascript:void(0);', that will still have some odd results in some browsers without the onclick returning false.

There could still be other problems, particularly your use of Ajax.Request. See:

http://www.prototypejs.org/api/ajax/request

for proper usage.

[PhxVyper]

Hi,

Thank you for your replies and assistance.

I've tried the different combinations of these and none of them work. The Element.show(domid); is definitely for prototype, but dialog.js is an extension class to prototype that provides an override to the Element's show method.

This is because dialog.js is a modal dialog class that does an overlay. The standard Element.show() doesn't do this.

http://www.upstreetmedia.com/test_modal.html

Here is an example of my implementation. Keep in mind that in Firefox, this works perfectly.

I've taken out all extraneous code so nothing gets confused.

[jscheuer1]

That page is a poor example because it doesn't include the AJAX and doesn't look all that good even in FF when it 'works', but that particular error for IE 7 is in:


http://70.98.182.242/global/script/dialog.js

particularly:


show: function() {
this.overlay.style.height = document.body.getHeight()+'px';
this.moveDialogBox('out');
//this.overlay.onclick = this.hide.bind(this);
this.selectBoxes('hide');
new Effect.Appear(this.overlay, {duration: 0.1, from: 0.0, to: 0.3});
this.dialog_box.style.display = '';
},

Which can be remedied in IE by using the root function for that process:


show: function() {
this.overlay.style.height = Element.getDimensions(document.body).height+'px';
this.moveDialogBox('out');
//this.overlay.onclick = this.hide.bind(this);
this.selectBoxes('hide');
new Effect.Appear(this.overlay, {duration: 0.1, from: 0.0, to: 0.3});
this.dialog_box.style.display = '';
},

[PhxVyper]

Hi John,

that did the trick!

In dialog.js -
from:
document.body.getHeight()+'px';
to:
Element.getDimensions(document.body).height+'px';

In my function -
from:

new Dialog.Box(domid);
$(domid).show();

to:

var myAnnouncement = new Dialog.Box(domid);
myAnnouncement.show();

and it works like a charm in IE and Firefox now.

Thank you so much for the help. You guys are the only ones who've been able to solve this for me.

Chad