Solved

Nested showmodaldialog call in Javascript works in IE but not Mozilla. Why?

Posted on 2008-10-21
4
2,109 Views
Last Modified: 2013-12-08
(complex to explain - code reproduced below.Please excuse the naivite of the code but I am really an assembly language programmer and all this modern internet stuff gives me the shakes!)

I have a 'control' cgi file (P1) which generates a HTML file for display (p2.html). In p2, on a button press it calls another cgi file (p3) via a showmodaldialog call. The html file generated by p3 has another button to call another cgi, p4.cgi, again on a showmodaldialog call

(the programs are part of a suite which this part is trying to extract the Date of Birth of someone using a general-purpose 'get date' module)

The software works on my home PC,running APACHE on VISTA using IE7.0

However
When I upload the files to my server and run them from there I get an
"Internet Explorer error
Line 21
Char 3
Error: Object doesn't support this property or method
Code: 0
URL: p3.cgi
"
The server is running Mozilla 4.0 (I believe, using a perl program to print the environment variables, but it indicates that it is IE7 compatible))

Can anyone explain why the nested showmodaldialog calls seem to fail? Inserting all sorts of trace information, it is (almost certainly)/definitely the call to showmodaldialog that is failing in p3.cgi (the line/char info above may have varied slightly due to the changes in the code and the error message) but if anyone wants to use the code below to experiment, please do so.

This is the last part of a bigger project and is driving me insane trying to ind out why it is not working!
Please help


(THIS IS FILE p1.cgi)
#!/usr/bin/perl -w
BEGIN {
$|=1;
print "Content-type: text/html\n\n";
use CGI::Carp('fatalsToBrowser');
use CGI::Carp('warningsToBrowser');
push @INC,'.';
}
 
use CGI;
# =============================================================================
sub loadForm 
{
my $fileName;
my $lLine;
 
$fileName = "p2.html";
#
# For form we are being ased to open, open the file and start analysing the data.
#
if ($fileName ne "")
{
# Open the file, read each line, if a renewal directive found, act upon it.
# Otherwise, print the line out
open (FILEHANDLE, "<$fileName") or die "Error opening $fileName Perl says: $!\n";
until (eof FILEHANDLE)
{
# Read the line and strip out any extra characters
$lLine = <FILEHANDLE>;
chomp($lLine);
$lLine =~ s/\r//g;
$lLine =~ s/\t//g;
print $lLine."\n";
}
close (FILEHANDLE);
}
}
# ======= START OF PROGRAM FLOW
$co = new CGI;
if (!$co->param())
{ 
# First time the program has been called.
# Load the first form
loadForm();
}
else
{
}
 
(THIS IS FILE P2.HTML)
<html>
<head>
<title></title>
<script language="Javascript">
function actionsOnPageLoad ()
{ 
}
function pressed ()
{
var ret;
 
ret = window.showModalDialog ("p3.cgi","","dialogheight:400px;dialogwidth:600px"); 
alert ("/" + ret + "/");
}
function checkDataEntered()
{
return true;
}
 
</script>
 
</head>
<body bgcolor="#FF80FF" onLoad="actionsOnPageLoad()">
<div align="center">
<form method="POST" name="thisform" action="" onSubmit="return checkDataEntered()">
<input type="button" value="Press Me" onClick="pressed()">
</form>
</div>
</body>
</html>
 
(THIS IS FILE p3.cgi)
#!/usr/bin/perl -w
BEGIN {
$|=1;
print "Content-type: text/html\n\n";
use CGI::Carp('fatalsToBrowser');
use CGI::Carp('warningsToBrowser');
}
use CGI;
 
sub generate ()
{
my $lblock;
 
$lblock = <<point1;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script language="Javascript">
 
var dobString;
var globalRetVal;
 
function onLoadFunction()
{
globalRetVal = "";
document.form1.elements["tbDobDisplay"].value = "";
}
 
function handleDateButton()
{
var ret;
document.form1.elements["tbDobDisplay"].value = "";
ret = window.showModalDialog ("p4.cgi","","dialogheight:500px;dialogwidth:700px"); 
document.form1.elements["tbDobDisplay"].value = ret;
}
 
function handleOK()
{
dobString = document.form1.elements["tbDobDisplay"].value;
 
if (dobString == "")
{
alert ("Date of Birth missing - please enter");
}
else
{
globalRetVal = dobString + ";";
window.returnValue = globalRetVal;
window.close();
}
}
function handleCancel()
{
globalRetVal = "";
window.returnValue = globalRetVal;
window.close();
}
</script>
 
</head>
<body bgcolor="#FF80FF" onload="onLoadFunction()">
<div align="center">
<form method="POST" name="form1" action="">
<font size="5">Please enter the required information<p></p>
</font>
<table border="1" width="100%">
<tr>
<td align="right">
Date of Birth
</td>
<td align="center">
<input type="button" value="Press to enter" onClick="handleDateButton()">
<input type="text" name="tbDobDisplay" value="">
</td>
</tr>
</table>
<table border="1" width="100%">
</table>
 
<p></p>
<input type="button" value="OK" name="bOK" onClick="handleOK()"><p></p>
<input type="button" value="Cancel" name="bCancel" onClick="handleCancel()">
</form>
</div>
 
</body>
</html>
 
point1
 
print $lblock;
 
}
 
$co = new CGI;
 
if (!$co->param())
{
generate (); 
}
else
{
if ($co->param ("bOK") ne "") 
{
exit $co->param ("bOK");
}
else
{
if ($co->param ("bCancel") ne "") 
{
exit "";
}
else
{
die ("Programming fault - createnewchild.cgi");
}
}
}
 
(THIS IS FILE p4.cgi)
#!/usr/bin/perl -w
# ensure all fatals go to browser during debugging and set-up
# comment this BEGIN block out on production code for security
BEGIN {
$|=1;
print "Content-type: text/html\n\n";
use CGI::Carp('fatalsToBrowser');
use CGI::Carp('warningsToBrowser');
}
use CGI;
sub generate ()
{
my $lblock;
 
$lblock = <<point1;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script language="Javascript">
 
var months = new Array();
months[0] = "Jan";
months[1] = "Feb";
months[2] = "Mar";
months[3] = "Apr";
months[4] = "May";
months[5] = "Jun";
months[6] = "Jul";
months[7] = "Aug";
months[8] = "Sep";
months[9] = "Oct";
months[10] = "Nov";
months[11] = "Dec";
 
var date_now = new Date();
var year_now = date_now.getYear();
var dateString;
var dateYear;
var dateMonth;
var dateDay;
var globalRetVal;
 
function addOption (pBox, pTxtandVal)
{
var optn = document.createElement("OPTION");
optn.text = pTxtandVal;
optn.value = pTxtandVal;
pBox.options.add(optn);
}
 
function onLoadFunction()
{
// add the elements to the drop down boxes
for (var i = 0; i < months.length; ++i)
{
addOption(document.form1.ddMonth, months[i]);
}
for (var j = 1; j <= 31; ++j)
{
addOption(document.form1.ddDay, j+"");
}
for (var k = 1; k <= 50; ++k)
{
addOption(document.form1.ddYear, year_now - k + "");
}
globalRetVal = "";
}
 
function validUserDate()
{
var returnval = false ;
 
// Note that this check uses an AMERICAN format - code was copied so use that
// Format is "mm/dd/yyyy" rather than playing about
// Detailed check for valid date ranges
// Can use the indices of the selected HTML options as the input fields
 
var monthfield = document.form1.elements["ddMonth"].selectedIndex;
var dayfield = document.form1.elements["ddDay"].selectedIndex;
var yearfield = parseInt(dateString.split("/")[2]);
 
var dayobj = new Date(yearfield, monthfield-1, dayfield);
if ((dayobj.getMonth() + 1 != monthfield)||(dayobj.getDate() != dayfield)||(dayobj.getFullYear() != yearfield))
{
alert("Invalid Day, Month, or Year range detected. Please correct and submit again.");
}
else
{
returnval = true;
}
return returnval;
}
 
function handleDateOK()
{
var dateCheckResult;
 
dateYear = "";
dateMonth = "";
dateDay = "";
dataOK = false;
 
if (document.form1.elements["ddYear"].selectedIndex > 0)
{
dateYear = document.form1.elements["ddYear"].options[document.form1.elements["ddYear"].selectedIndex].value;
}
if (document.form1.elements["ddMonth"].selectedIndex > 0)
{
dateMonth = document.form1.elements["ddMonth"].options[document.form1.elements["ddMonth"].selectedIndex].value;
}
if (document.form1.elements["ddDay"].selectedIndex > 0)
{
dateDay = document.form1.elements["ddDay"].options[document.form1.elements["ddDay"].selectedIndex].value;
}
 
if ((dateYear == "") || (dateMonth == "") || (dateDay == ""))
{
alert ("incomplete date");
}
else
{
// Check the date for validity. Temporarily use the variable dateString to pad out with leading
// zeroes in the day field
dateString = dateMonth + "/" + dateDay + "/" + dateYear;
dateCheckResult = validUserDate ();
 
if (dateCheckResult == true)
{
globalRetVal = dateDay + "-" + dateMonth + "-" + dateYear;
window.returnValue = globalRetVal;
window.close();
}
}
}
function handleDateCancel()
{
globalRetVal = "";
window.returnValue = globalRetVal;
window.close();
}
</script>
 
</head>
<body bgcolor="#FF80FF" onload="onLoadFunction()">
 
 
<p></p><p></p><p></p>
<!-- Start of FORM -->
<div align="center">
<form method="POST" name="form1" action="">
<font size="5">Please enter the required date information</font>
<p></p><p></p><p></p>
<table border="0" width="40%">
<tr>
<td align="center">
Date:  
<select name="ddDay">
<option selected value=""></option>
</select> 
<select name="ddMonth">
<option selected value=""></option>
</select>
<select name="ddYear">
<option selected value=""></option>
</select>
</td>
</tr>
</table>
<br /><br />
<table border="1" width="55%">
</table>
 
<p></p>
<input type="button" value="OK" name="bDateOK" onClick="handleDateOK()"><p></p>
<input type="button" value="Cancel" name="bDateCancel" onClick="handleDateCancel()">
</form>
<!-- End of FORM -->
</div>
 
</body>
</html>
 
point1
 
print $lblock;
 
}
 
$co = new CGI;
 
if (!$co->param())
{
generate (); 
}
else
{
if ($co->param ("bDateOK") ne "") 
{
exit $co->param ("bDateOK");
}
else
{
if ($co->param ("bDateCancel") ne "") 
{
exit "";
}
else
{
die ("Programming fault - createnewchild.cgi");
}
}
} 

Open in new window

0
Comment
Question by:GSD4ME
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22774717
there is no showModalDialog in the Mozilla browsers. But it seems you are talking about some mozilla SERVER???
And you are saying it works in IE but the error is in IE???

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22774730
And from my harddisk the showModal in p3 works in IE6 - I am not sure you want to nest showModal anyway.
Instead use a frameset if the pages are serial
0
 

Author Comment

by:GSD4ME
ID: 22775213
Sorry - typo in my message, Server software is APACHE. (Sort of screws up the whole Mozilla headline here - misread the USER_AGENT line from the server environment variables (see below))
The software (as specified in the 4 files above) runs on my PC at home, using local APACHE server but when I attempt to run the software suite (ie just the 4 programs detailed for simplicity's sake) I get an error.

I wanted a couple of popups to be presented to the users as this is the simplest way to guide/force the PC illiterate members of my organisation who use the software system, hence I didn't use framesets.
As I have said, the software (including nested showmodaldialog calls) works on my machine (running IE7 on Vista) but I am stumped as to why it doesn't run on the server

These are some of the environment variables from the server, output by a perl program (my specific bits and pieces removed for obvious reasons)

HTTP_ACCEPT_ENCODING => gzip, deflate
HTTP_CONNECTION => Keep-Alive
REQUEST_METHOD => GET
HTTP_ACCEPT => image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-ms-application, application/vnd.ms-xpsdocument, application/xaml+xml, application/x-ms-xbap, application/vnd.ms-excel, application/msword, application/vnd.ms-powerpoint, application/x-shockwave-flash, */*
HTTP_UA_CPU => x86
SERVER_SOFTWARE => Apache
TZ => EST5EDT
QUERY_STRING =>
HTTP_USER_AGENT => Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)
SERVER_PORT => 80
HTTP_ACCEPT_LANGUAGE => en-gb
SERVER_PROTOCOL => HTTP/1.1
PATH => /usr/local/bin:/usr/bin:/bin
GATEWAY_INTERFACE => CGI/1.1
calling page:
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 125 total points
ID: 22775542
So the browser is IE 7.0 - the rest of the garbage is just for old times sake.
Mozilla does not come into the picture here.

So you have apache set up at home and there it works.
On the ISP web page ALSO using the SAME apache setup with CGI support it does not.
There is nothing in the data you show that will shed any light as to why it does not work.

Also, can you tell me if the code you posted is the actual code? If so, why use CGI at all?
What part of the pages actually NEED CGI?
They look pretty static to me.

If so, use a div for the calendar and unhide/hide it instead of using the IE-only showModal

There are millions of examples of this on the web, the most flashy of them being lightbox

Michel
0

Featured Post

Interactive Way of Training for the AWS CSA Exam

An interactive way of learning that will help you visualize core concepts so that you can be more effective when taking your AWS certification exam.  Built for students by a student to help them understand the concepts that they are being taught.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will show, step by step, how to integrate R code into a R Sweave document
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question