Welcome to WebmasterWorld Guest from 54.234.63.187

Forum Moderators: open

Message Too Old, No Replies

document.write Syntax Problem in Remote Javascript

     

egomaniac

5:28 pm on Nov 9, 2002 (gmt 0)

10+ Year Member



I want to display a text link using a remote javascript file, and I want the status bar at the bottom of the browser to display a custom message when the user mouses over the text link. My link works correctly in regular HTML page.

Example That Works Correctly:
<a href="http://www.some-other-domain.com/" onMouseover="window.status='Hello World'; return true;">Click This Text Link</a>

But when I turn this into a remote javascript file using document.write, the browser is unable to display the link.

Contents of Remote Javascript File:
document.write('<a href="http://www.some-other-domain.com/" onMouseover="window.status='Hello World'; return true;">Click This Text Link</a>');

I believe the problem is in the use of the single quotes around the custom message 'Hello World'. If you look closely, you'll notice that there is an opening quote for the document.write command just after the first parenthesis (' and there is a closing quote just before the last parenthesis '). The first single quote before 'Hello is prematurely and incorrectly closing the document.write statement, which results in a syntax error that the browser cannot interpret.

Does anyone know the proper syntax for the custom message 'Hello World' when using document.write in remote javascript file?
-egomaniac

andreasfriedrich

9:49 pm on Nov 9, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



How about escaping the single quotes:

document.write('<a 
href="http://www.some-other-domain.com/"
onMouseover="window.status=\'Hello World\'; return true;"
>Click This Text Link</a>');

Andreas

tedster

11:59 pm on Nov 9, 2002 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Nice going andreas -- I'm sure that's the issue. Without the escapes those "internal" single quotes look like the end of the document.write()

egomaniac

12:24 am on Nov 10, 2002 (gmt 0)

10+ Year Member



Thanks Andreas and Tedster.

I've been researching this, and I tried escaping the single quotes, but that didn't solve the problem.

I think I need to escape the 2 semicolons after World\'; and true;

Just using escape and the semicolon character isn't working (i.e. \; does not work). What I have yet to try is doing an escape followed by the unicode for the semicolon character.

Does this make sense to either of you?

Any idea where I can find the unicode character for a semicolon?

g1smd

1:34 am on Nov 10, 2002 (gmt 0)

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Escape all the double quotes with \" and the forward slashes with \/ and all should be well.

Javascript code that is embedded within the page uses this format:
<SCRIPT type="text/javascript" language="JavaScript"><!--
... JS program code here ...
// --></SCRIPT>
<NOSCRIPT>
... HTML code for non-JS browsers here ...
</NOSCRIPT>

The Comment Tags: '<!--' and '// -->' are important.

Moving the code out to an external files, uses this format:

<SCRIPT type="text/javascript" language="JavaScript" src="filename.js"></SCRIPT>
<NOSCRIPT> ... HTML code for non-JS browsers here ... </NOSCRIPT>

andreasfriedrich

1:06 pm on Nov 10, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



My example works just fine in Netscape, Internet Explorer, Mozilla and Opera. Tedster already explained why you need those single quotes escaped.

I think I need to escape the 2 semicolons

Why would you think that. They are contained within a string and have no special meaning within a string. You only need to escape a character if it has a special meaning but you want the literal character instead of this special behavior.

" and ' are special in that they are used to delimit string literals. If you use ' as a delimiter and want to use it within the string as a literal character you need to escape it.

var x = 'Aaron\'s Party'

It would have been easier to use double quotes as the delimiter since the single quote has no specuial meaning within a double quoted string.

var x = "Aaron's Party"

Escape all the double quotes with \" and the forward slashes with \/

Why? Double quotes have no special meaning with in a string literal delimited by single quotes. Forward slashes are just ordinary characters. There is no need to escape them.

The Comment Tags: '<!--' and '// -->' are important.

Only for those very oŽld browsers that do not recognize the script element and that would therefor ignore the script tags and just display the javascript code.

See also:

String Literals [developer.netscape.com] in Client-Side JavaScript Guide.
Be careful with quotes [webbuilder.netscape.com]

Andreas

g1smd

2:25 pm on Nov 10, 2002 (gmt 0)

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



I took a wider view.

Unescaped double quotes and unescaped forward slashes are flagged as errors when the code is run through [validator.w3.org...]

andreasfriedrich

4:44 pm on Nov 10, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
document.write('<a href="http://www.some-other-domain.com/"
onMouseover="window.status=\'Hello World\'; return true;"
>Click This Text Link</a>');
//]]>
</script>
</body>
</html>

validates and executes and displays just fine.

Andreas

andreasfriedrich

3:08 pm on Nov 11, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Make sure that the //<![CDATA[ is on a line of its own, since everything up to the end of the line is commented out.

Andreas

egomaniac

5:35 pm on Nov 11, 2002 (gmt 0)

10+ Year Member



Hi Andreas, Your suggestions worked.

Thank you very much for helping me solve my javascript problem.
-egomaniac

For WebmasterWorld future reference, here is the exact code for implementing this in a remote javascript file :

HTML EXAMPLE FILE CONTENTS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
</head>
<body>
<p><script language="JavaScript" src="jscript/test.js"></script></p>
</body>
</html>

REMOTE JAVASCRIPT EXAMPLE FILE CONTENTS (filename test.js above):

//<![CDATA[
document.write('<a href="http://www.some-other-domain.com/" onMouseover="window.status=\'Hello World\'; return true;" "onMouseout="window.status=\'\'; return true;">Remote JS Text Link</a>');
//]]>

IMPORTANT NOTE ABOUT REMOTE JAVASCRIPT FILE ABOVE:
There are only 3 lines in that file. The second line starts with the document.write statement. It is being wrapped by the message display here at WebmasterWorld. Set it up as one line with no breaks/carriage returns.

egomaniac

5:38 pm on Nov 11, 2002 (gmt 0)

10+ Year Member



PS - What is the significance of adding this code?

//<![CDATA[

//]]>

andreasfriedrich

5:51 pm on Nov 11, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You do not need the <![cdata[ section in external javascript files.

In XHTML script elements are declared as having #PCDATA content, i.e. < and & will be treated as the start of markup. With <![cdata[ you tell the xml parser within the browser that the content is #CDATA, i.e. that it should not be parsed by the parser but should be treated as character data instead. Since most browsers do not support the <![cdata[ instruction you need to hide it with the javascript comments.

Again, this only applies to inline scripts. It is not neccessary for external scripts.

Andreas

g1smd

8:00 pm on Nov 11, 2002 (gmt 0)

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



If you also want the code to validate then the line:
<p><script language="JavaScript" src="jscript/test.js"></script></p>

should be:
<p><script language="JavaScript" type="text/javascript" src="jscript/test.js"></script></p>

 

Featured Threads

Hot Threads This Week

Hot Threads This Month