Link to home
Start Free TrialLog in
Avatar of scotthorton
scotthorton

asked on

Assist in fixing javascript

I have some excellent code written by leakim971.  It has one error in it.  

leakim:

Can you see what is wrong  with the window.open line?  It gives a script error.  I fixed it by using the old, original code you provided, but it woudl be good to open the resulting text window at a certain size
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script language="javascript">
 
	var aCities = new Array(12);
 
 	function initialiseDD() {
		yearChange();
		restrictFilename();
	}
 
	function yearChange() {
		var dy = document.getElementById("ddYear");
//		alert(dy.options[dy.selectedIndex].value);
		switch(dy.options[dy.selectedIndex].value)
		{ 
			case "2008" :	aCities = ["Lakeview","Crofton","_Marion","Lynnville","Iuka","Vanleer","Maplesville","MichiganCity","Livingston","Nunnley","Gamaliel","Camden"];break
			case "2009" :	aCities = ["Lakeview","Cadiz","_Iuka","Lynnville","Vanleer","Maplesville","Saulsbury","Camden","Nunley","Marion","Gamaliel","Crofton"];break
			default :		aCities = ["event1","event2","_event3","event4","event5","event6","event7","event8","event9","event10","event11","event12"];break
		}
		var de = document.getElementById("ddEvent");
		for(i=de.options.length-1;i>=0;i--) {
			de.remove(i);
		}
		for(i=0;i<aCities.length;i++) {
			var city = document.createElement("OPTION");
			if(aCities[i].match("_")=="_") {
				city.text = aCities[i].replace("_","");
				city.selected = "selected";
			}
			else {
				city.text = aCities[i];
			}
			city.value=String(i+1);
			de.options.add(city);
		}
	}
	
	function restrictFilename() {
		var dt = document.getElementById("ddType");
		switch(dt.options[dt.selectedIndex].value)
		{ 
			case "M" :	aFilenames = ["-P2.TXT","Places","-OV.TXT","_Overall","-LP.TXT","Laptimes"];break
			case "A" :	aFilenames = ["-P2.TXT","Places","-OV.TXT","_Overall","-LP.TXT","Laptimes"];break
			case "Y" :	aFilenames = ["-P2.TXT","Places","-OV.TXT","_Overall","-LP.TXT","Laptimes"];break
		}
		var df = document.getElementById("ddFilename");
		for(i=df.options.length-1;i>=0;i--) {
			df.remove(i);
		}
		for(i=0;i<aFilenames.length/2;i++) {
			var filename = document.createElement("OPTION");
			if(aFilenames[i*2+1].match("_")=="_") {
				filename.text =aFilenames[i*2+1].replace("_","");
				filename.selected = "selected";
			}
			else {
				filename.text = aFilenames[i*2+1];
			}
			filename.value=aFilenames[i];
			df.options.add(filename);
		}
	}
	
	function gotofile() {
		var dy = document.getElementById("ddYear");
		var de = document.getElementById("ddEvent");
		var dt = document.getElementById("ddType");
		var df = document.getElementById("ddFilename");		
 
//		alert("http://www.google.com/" + dy.options[dy.selectedIndex].value + "/" + de.options[de.selectedIndex].value + "/" + dt.options[dt.selectedIndex].value + df.options[df.selectedIndex].value);
//		window.location = "http://www.google.com/" + dy.options[dy.selectedIndex].value + "/" + de.options[de.selectedIndex].value + "/" + dt.options[dt.selectedIndex].value + df.options[df.selectedIndex].value;
		var url = "http://www.google.com/" + dy.options[dy.selectedIndex].value + "/" + de.options[de.selectedIndex].value + "/" + dt.options[dt.selectedIndex].value + df.options[df.selectedIndex].value
		window.open(url,'Results Events','width=400,height=200');
	}
</script>
</head>
 
<body onload="initialiseDD();">
 
  <label>
  </label>
  <table width="335" border="2">
    <tr>
    <td width="83" align="right"><em><strong>Year : </strong></em></td>
    <td width="234"><select name="ddYear" id="ddYear" onchange="yearChange()">
<!--      <option value="2007">2007</option> -->
      <option value="2008">08 Winter</option>
      <option value="2009" selected="selected">09 Winter</option>
    </select></td>
  </tr>
  <tr>
    <td align="right"><em><strong>Event :</strong></em></td>
    <td><select name="ddEvent" id="ddEvent">
      <option value="1">event will be replace at onLoad page event</option>
    </select></td>
  </tr>
  <tr>
    <td align="right"><em><strong>Type :</strong></em></td>
    <td><select name="ddType" id="ddType" onchange="restrictFilename()" >
      <option value="M">MC</option>
      <option value="A">ATV</option>
      <option value="Y">Youth</option>
    </select></td>
  </tr>
  <tr>
    <td align="right"><em><strong>Filename :</strong></em></td>
    <td><select name="ddFilename" id="ddFilename">
      <option value="-P2.TXT">Places</option>
      <option value="-OV.TXT">Overall</option>
      <option value="-LP.TXT">Laptimes</option>
    </select></td>
  </tr>
  <tr>
  <td colspan="2" align="center"><input type="submit" name="button" id="button" value="Request file" onclick="gotofile()" /></td>
  </tr>
</table>
 
 
</body>
</html>

Open in new window

Avatar of scotthorton
scotthorton

ASKER

I am waiting for leakim to answer this question about his code so that I may award additional credits for his extra help on a previous more complex problem.

Please do not answer if you are not leakim


close the previous line:

var url = "http://www.google.com/" + dy.options[dy.selectedIndex].value + "/" + de.options[de.selectedIndex].value + "/" + dt.options[dt.selectedIndex].value + df.options[df.selectedIndex].value;

window.open(url,'Results Events','width=400,height=200');
Thanks.

This code won't run in IE6.  
 var url = "http://www.sample.com//" + dy.options[dy.selectedIndex].value + "/" +
de.options[de.selectedIndex].value + "/" + dt.options[dt.selectedIndex].value + df.options[df.selectedIndex
].value;

window.open(url,'Score Machine Event Results','width=900,height=800');


This does:

window.open("http://www.sample.com/" + dy.options[dy.selectedIndex].value + "/"
+ de.options[de.selectedIndex].value + "/" + dt.options[dt.selectedIndex].value + df.options[df.selectedInd
ex].value);

Anything I can do about that?  
SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Scott,

Try the following see what happen :

window.open("http://www.sample.com/" + dy.options[dy.selectedIndex].value + "/"
+ de.options[de.selectedIndex].value + "/" + dt.options[dt.selectedIndex].value + df.options[df.selectedInd
ex].value,"Score Machine Event Results");

or

window.open("http://www.sample.com/" + dy.options[dy.selectedIndex].value + "/"
+ de.options[de.selectedIndex].value + "/" + dt.options[dt.selectedIndex].value + df.options[df.selectedInd
ex].value,"_blank","width=400,height=200");

or

window.open("http://www.sample.com/" + dy.options[dy.selectedIndex].value + "/"
+ de.options[de.selectedIndex].value + "/" + dt.options[dt.selectedIndex].value + df.options[df.selectedInd
ex].value,"_blank");

I have bit of work now, I will do my best for you later.

Regards.
Please use the SNIPPETS
With old code:

window.open(url) - works

with your 3 suggestions:
#1:  reports "invalid argument" on window.open

#2: works, produces small window that can't be resized.

#3: works: produces normal window or default size that can be resized.

working backwards,
 window.open(url,"_blank"); - works, same as #3

window.open(url,"_blank","width=900,height=400"); - works, same as #2

So I did some homework and tried:
window.open(url,"_blank","width=800,height=400,scrollbars=1,resizable=1,menubar=1");

So with snippets? I have:
                var url = "http://www.example.com/08ws/" +
                de.options[de.selectedIndex].value + "/" +
                dt.options[dt.selectedIndex].value +
                df.options[df.selectedIndex].value;
                window.open(url,"_blank","width=800,height=400,scrollbars=1,resizable=1,menubar=1");

This works as desired in IE6.  Google chrome doesn't give a tool or menubar, but I think that was always the case.  I'm not where I can check IE7+ right now.

Looks like the "_blank" fixed the IE6 barf.




raising points
Congratulations ! The next question is : How to give you the 500 points yourself ! lol

var url = "http://www.example.com/08ws/" + de.options[de.selectedIndex].value + "/" + dt.options[dt.selectedIndex].value + df.options[df.selectedIndex].value;
window.open(url,"_blank","width=800,height=400,scrollbars=1,resizable=1,menubar=1");

Open in new window

Working well now.  Will check on >IE6 later today.

Now, all working, is there any advantage to doing this in PHP?

Code snippet :
check the box below : [Attach Code Snippet] and past the code inside.
heehee.  I get no credit for looking up the arguments to that function!  That was the EASY part.

ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Too much work to get the data into the database.  It changed formats over the years and will be problematic to deal with.  Maybe one day.....

Other than that, any other substantial pro or con to PHP vs JS?



For a program with more logic (enter your password, manage user, multiple pages, get data from medium or large database(s)...) PHP is better
For a click and get, I prefer Javascript. Seems you need to put new datas in the code one day per month so I think it's a good choice.
With Javascript you don't need to post the page to the server, you get result from your choice immediatly.
Thanks mplungian for taking time to look
leakim, thank you again for the great help and all the work refining the code to fit more than my original request.

It's been a great learning experience, my first work with any JS.




Just tested on IE8:

http://www.msxc.com/testsel7b.html

I guess there is no "menubar" in IE8 :(  So the user gets a window with no way evdent (for a novice PC user) to print.  

I added toolbar=1, and IE8 will display that.

In Google Chrome, I ge the same "blank" window with not print iconor toolbar.

Anyone know how to force enable the "print" icon/menu item in all browsers with the window.open function?

Scott,

The toolbar is activated under Chrome but not visible because it's a popup window.
To have the menu, you need to right click onto the top bar an choose "Display in a tab"
No problem under other browsers.
I think people using Chrome are not "novice user"...

You should open a new thread to see if people have best answer ;-)

Are you able to convert the text files to PDF ?

Regards.
> I think people using Chrome are not "novice user"...

Good point.  For teh "masses" they will be using what came with thier PC (IE) and will be fine.

> Are you able to convert the text files to PDF ?

I expect I see where you are going, then there would be a print button.  It's more trouble than worth for the handful of odd browser users to convert all the files.  As you point out, a non standard browser user will more likely know how to get it to print.

Thanks again!

mplungian:  Thank you.  I wondered how that was done.  Unfortunately I have a "history" of files to present with thse links, all are straight text files.  So unless I misundersand I'd have to "htmlize" them all so I could add that link at the top of each.  Might be good to do going forward.  The uploaded files are from a older system but it may be able to be modified generate the files with the html tags.
how about

<a href="#"
onclick="iframe1.print(); return false">print</a>
<iframe name="iframe1" src="legacy.txt"></iframe>
Unfortunately for me, I don't know this well enough to understand completely.

If my script calls an open window with an existing plain text file, like this one:

http://www.msxc.com/SCOREMACHINE/08ws/1/MC-P2.TXT

In order to use the "a href", wouln't I have to edit the text file, surround it with <HTML></HTML> and put that "a href" in as well?

Assuming my bare understanding is right, the problem is I have hundreds of those files in almost as many directories, and editing them to include the tags to turn them into html would be a chore.

Or is there some other way to use the "a href" that I'm missing?  I'd be thrilled to have an "automatic" way to do it.



Hello Scoot,

mplungjan propose you to create a new html page with a frame inside which will display the text file.

My advice :

Good :
Customize this new page

Bad :
- Sometimes browser don't like iframe.
- You will need a new javascript in this page to get on the fly the URL of the file to display in the frame...

Considering it's a new job, open a new thread ;-)

Regards.
I think I See how it works.  Maybe.  But, I need the text file displayed, THEN the user may or may not print it.  No way to build that into the calling script.  It would have to be one or the other (view, print).  Normal mode is view, not print, so I dont' want a print popup every time they try to view.  Print on demand only.  The browser print buton will do for the masses.
The new page with no javascript (to get the passed URL and change src of the iframe) :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
 
<body>
<p><a href="#"
onclick="iframe1.print(); return false">print</a>
</p>
<p>
  <iframe src="http://www.msxc.com/SCOREMACHINE/08ws/1/MC-P2.TXT" name="iframe1" id="iframe1" width="640" height="400"></iframe>
</p>
</body>
</html>

Open in new window


Tried it:
http://www.msxc.com/SCOREMACHINE/08ws/3/MC-P2.html

Love it !!


But, is there a way to kick it off, in a new window, from my selection script you wrote "on the fly"??

Now THAT would be incredible!  It would open a whole lot of flexibility for displaying those files.



You need to pass the URL of the file to open :
So in the current page replace the right section by the following :

         var url = "http://www.msxc.com/pageiframe.html?TXT=";  
        	var txt = "http://www.msxc.com/SCOREMACHINE/08ws/" +
        	de.options[de.selectedIndex].value + "/" +
        	dt.options[dt.selectedIndex].value +
        	df.options[df.selectedIndex].value;
	window.open(url + txt,"_blank","width=800,height=400,scrollbars=1,resizable=1,menubar=1,toolbar=1");

Open in new window

And create pageiframe.html :


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.o0°°° Score Machine Event Results °°°0o.</title>
<script language="javascript">
	function changeSource() {
		document.getElementById("iframe1").src = value("TXT");
	}
	
	function getValue(varname) {
		var url = window.location.href;
		var qparts = url.split("?");
		if (qparts.length == 0) {
			return "";
		}
		var query = qparts[1];
		var vars = query.split("&");
		var value = "";
		for (i=0;i<vars.length;i++) {
			var parts = vars[i].split("=");
			if (parts[0] == varname) {
				value = parts[1];
				break;
			}
		}
		value = unescape(value);
		value.replace(/\+/g," ");
		return value;
	}
	
</script>
</head>
 
<body onLoad="changeSource()">
<p><a href="#"
onclick="iframe1.print(); return false">print</a>
</p>
<p>
  <iframe src="http://www.msxc.com/SCOREMACHINE/08ws/1/MC-P2.TXT" name="iframe1" id="iframe1" width="640" height="400"></iframe>
</p>
</body>
</html>

Open in new window

getValue() code is not from me ;-)
http://www.tek-tips.com/faqs.cfm?fid=5442
I got excited thinking I had it.  But it's not quite working

Test page:
http://www.msxc.com/testsel7b.html

Produces the same file regardless of selection.

The link in the address bar looks right according to what was selected:
http://www.msxc.com/pageiframe.html?TXT=http://www.msxc.com/SCOREMACHINE/08ws/2/QD-OVR.TXT

But the file displayed in the text box is wrong.

Looks to be hard coded in the pageiframe.html file, but I'm not skilled enough to know what to do with it.



Replace :
document.getElementById("iframe1").src = value("TXT");
by :

document.getElementById("iframe1").src = getValue("TXT");

Open in new window

Was looking good.  I was even able to add my little logo.

But..... fly in the soup...

"print" causes it to print the webpage, not the file.  Since the file is not completely shown on-page, the print is just of the window that contains the file.  So you get a picture of the window wiht part of the file :(.  So close.....

What is the attached snippet for?  Wondered why it had the hard coded file.




<p>
  <iframe src="http://www.msxc.com/SCOREMACHINE/08ws/1/MC-P2.TXT" name="iframe1" id="iframe1" width="800" h
eight="400"></iframe>
</p>

Open in new window

We need to refresh thr iframe after changing the src :


document.getElementById("iframe1").src = getValue("TXT");
document.getElementById("iframe1").contentWindow.location.reload();

Open in new window

I added line #2 just below my matching line #1 in pageiframe.html.  That broke it.

FWIW, it is selecting the right file now (without implementing the last change).  If I make the change, it goes back to not selecting the right file.

The problem is that it is not printing the file.  Instead it is printing the pop-up web window that shows the file in s a sub-window.  So instead of a possible multi page printout, you get a picture of the file in it's browser scrolling sub-window.

You can try it and see what I mean.  The default report is one page long if you just click "request file"
http://www.msws.org/testsel7b.html
Here is what I mean.

I'va attached a "bad" and "good" printout.  THe "bad" one is from printing using the script's print button.

The good one is from opening the TX file and printing it directly.
Bad.pdf
good.pdf
You MUST put your picture in the body part of the HTML ;-)

Your print link :

<a href="#" onclick="printFrame(); return false">Click Here to Print</a>

add this script :


		function printFrame() {
			var if1 = document.getElementById("iframe1");
			if1.focus();
			if1.print();
		}

Open in new window

> You MUST put your picture in the body part of the HTML ;-)

Oops.  I knew that.  Also knew better than to start playing before it was working.  I removed it.

I added the function and changed the line.  I also tried with and without the last correction.  In any case, the browser reports an error with the new line.  Maybe I did something incorrect.  I have attached the whole thing.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Wed, 30 Sep 2009 23:15:28 UTC


Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Wed, 30 Sep 2009 23:27:59 UTC


Message: Object doesn't support this property or method
Line: 36
Char: 3
Code: 0
URI: http://www.msxc.com/pageiframe.html?TXT=http://www.msxc.com/SCOREMACHINE/08ws/3/MC-OVR.TXT








<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.o0°°° Score Machine Event Results °°°0o.</title>
<script language="javascript">
        function changeSource() {
                document.getElementById("iframe1").src = getValue("TXT");
                document.getElementById("iframe1").contentWindow.location.reload();
        }
        
        function getValue(varname) {
                var url = window.location.href;
                var qparts = url.split("?");
                if (qparts.length == 0) {
                        return "";
                }
                var query = qparts[1];
                var vars = query.split("&");
                var value = "";
                for (i=0;i<vars.length;i++) {
                        var parts = vars[i].split("=");
                        if (parts[0] == varname) {
                                value = parts[1];
                                break;
                        }
                }
                value = unescape(value);
                value.replace(/\+/g," ");
                return value;
        }
 
        function printFrame() {
                var if1 = document.getElementById("iframe1");
                if1.focus();
                if1.print();
        }
 
        
</script>
</head>
 
<body onLoad="changeSource()">
<a href="#" onclick="printFrame(); return false">Click Here to Print</a>
 
<p>
  <iframe src="http://www.msxc.com/SCOREMACHINE/08ws/1/MC-P2.TXT" name="iframe1" id="iframe1" width="800" height="400"></iframe>
</p>
</body>
</html>

Open in new window

Leakim: Why would one need to reload a page after changing the src?
mplungjan : can reproduce what happen so you right is totally useless in our case.
So this is the print a text file enhancment a dead end then?

On to my next problem that the website guys are having trouble with - random rotating graphics (logos) that are transparent gifs, with fade in-out transition.

Posting new question...

Hello Scott,

Don't hesitate to open a new thread to get avalanche of anwsers !

Regards.
I did so on the image thing, thanks.

Did you mean the text printing thing?  Can't hurt, I'll post it, too.

Thanks again for all our excellent help.  Would be great if you check out my other questions if you have time.

<<Did you mean the text printing thing>>
Of course, I did somes tries without good results. Open a new thread, I'm sure you will get a trick !
I see a link at the bottom right of closed question : "You can also ask a related question"

Regards.
Thanks leakim.  I will give it a post.  I just got beat on by a Genius rank for asking for a solution to my new problem though.

https://www.experts-exchange.com/questions/24781038/Need-random-pattern-rotating-transparent-GIFs.html?anchorAnswerId=25480973#a25480973