Solved

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

Posted on 2008-10-21
4
2,096 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
  • 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

760 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now