Help - Search - Members - Calendar
Full Version: JavaScript in Blog
Movable Type Community Forum > Additional Resources > Tips and Tricks
xeifrank
Nov 13 2002, 02:43 PM
Can I put JavaScript code in a Blog?  Is this feature supported?  I can't get any JavaScript code to run in my Blog, is there a trick to it?

Thanks,

Xeifrank huh.gif
bmk
Nov 13 2002, 04:03 PM
Oh sure,  in fact there's some in the default templates.  What isn't working for you?  :)
xeifrank
Nov 13 2002, 04:37 PM
Well, the JavaScript I had crashed and didn't work, but on my regular website it worked fine.  I just copied and pasted it into the Blog entry, but it doesn't work.  So then I put the simplest of all JavaScript programs in there to see if that worked, but that got an error and didn't run also.  That's why I came to the conclusion that there must be some JavaScript limitation, or a trick to it.  Here is the code of the simple program that isn't working in my Blog entry, and the URL to run it.  Thanks in advance for any advice and or help.

Xeifrank

URL & Code following it.

http://www.fantasyinfocentral.com/testblog/


CODE
<html>
>
<title>JavaScript Test</title>
</head>

"LoadMe()">

<script language="JavaScript">
<!--
function LoadMe() {
   var text = "Hello, World!
";
   for (var i = 0; i <= 10; i++) {
     document.write(text);
   }
   document.write("Ten lines of \"Hello, World!\"");
 }
//-->
</script>

</body>
</html>


edited to surround code with code tags
bmk
Nov 13 2002, 04:45 PM
I put code tags around the code so we could see it, but is that right?  

This extra bracket before the title, and the loadme line, it looks funny.  Is that how you meant to post it?

Also, are you posting this whole chunk into an entry?

added: if you post code again, press the CODE button, paste the code, and then press the CODE button again.
xeifrank
Nov 13 2002, 05:01 PM
Sorry for messing up with the Code button.  Let's see if this is better!

CODE
<html>
<head>
<title>JavaScript Test</title>
</head>

<body "LoadMe()">

<script language="JavaScript">
<!--
function LoadMe() {
   var text = "Hello, World!<br>";
   for (var i = 0; i <= 10; i++) {
     document.write(text);
   }
   document.write("Ten lines of \"Hello, World!\"");
 }
//-->
</script>

</body>
</html>
kadyellebee
Nov 13 2002, 05:05 PM
I think you might need to put your script BEFORE the body (like in the head) so that it knows what LoadMe is smile.gif

Kristine
bmk
Nov 13 2002, 05:07 PM
Ha, Kristine I love you!  :)  I was just coming back to say that.  But I switched it around and I still get a blank page.  I'm so js-dumb.  :)
xeifrank
Nov 13 2002, 05:18 PM
It doesn't matter, has errors either way.  Even with...

CODE
<html>
<head>
<title>JavaScript Test</title>

<script language="JavaScript">
<!--
function LoadMe() {
   var text = "Hello, World!<br>";
   for (var i = 0; i <= 10; i++) {
     document.write(text);
   }
   document.write("Ten lines of \"Hello, World!\"");
 }
//-->
</script>
</head>

<body "LoadMe()">
</body>
</html>


Strange isn't it?
kadyellebee
Nov 13 2002, 05:19 PM
Well, darn it, I definitely don't know enough javascript to debug that.  But I'd guess that if it doesn't work on a regular page, it won't work on your blog tongue.gif

Kristine
bmk
Nov 13 2002, 05:22 PM
I only get a blank page with it in an index template.  I don't know any javascript.  :0   xeifrank, do you have it running on a regular page?
xeifrank
Nov 13 2002, 06:02 PM
Ok, I will paste the one that works on the web, but doesn't work on the Blog entry, sorry for the longer code snippet, but this proves my point.  Java Script isn't working in the Blog entry, but works on the web.

CODE
<html>
<head>
<title>JavaScript Test</title>

<script language="JavaScript">
<!-- Hide JavaScript from older browsers
/* Function - displaySelections() */
function displaySelections()
{
 var player1 = "Marhall Faulk"
 document.clear()
 document.writeln("<H2>Results of your selection</h2>");
 document.writeln(player1);
 document.writeln("<br>");
}
// end hide JavaScript -->
</Script>


</head>

<body>

<form name="frmPredictionPro">
<br>
<font size="3" color="#6188AA">
<b>Team Predictions</b>
</font>

<Table width="50%">
 <tr>
  <td><b>Quarterback</b>
  <td>
   <select name="qbTeam1">
    <option>Favre, Brett
    <option>Bulger, Marc
    <option>Garcia, Jeff
    <option>Brady, Tom
    <option>Griese, Brian
    <option>Green, Trent
    <option>McNabb Donovan
    <option>Maddox, Tommy
    <option>Gannon, Rich
    <option>Blake, Jeff
    <option>Manning, Peyton
    <option>Culpepper, Daunte
    <option>Peete, Rodney
    <option>Vick, Michael
    <option>Brooks, Aaron
    <option>Pennington, Chad
    <option>Matthews, Shane
    <option>Kitna, John
    <option>Miller, Jim
    <option>McNair, Steve
    <option>Plummer, Jake
    <option>Brunnel, Mark
    <option>Collins, Kerry
    <option>Brees, Drew
    <option>Hasselbeck, Matt
    <option>Carr, David
    <option>Harrington, Joey
    <option>Lucas, Ray
    <option>Fiedler, Jay
    <option>Chandler, Chris
   </select>
</Table>


<input type="submit" name="purchase Selections"onClick="displaySelections()">
<input type="reset" name="Clear Selections">
</form>
</body>
</html>


This code works online at
http://www.geocities.com/predictionpro/js.htm

But paste it into a Blog entry then run it, when you hit the submit button it gets an error, but no errors on the website posted above.  Strange eh!?
bmk
Nov 13 2002, 06:11 PM
Okay, if you want to paste this into an entry, you'd get rid of the body, head, etc... because that's already written into the template, if you added another in an entry you'd have two of each.

So this in an entry:
CODE
<script language="JavaScript">
<!-- Hide JavaScript from older browsers
/* Function - displaySelections() */
function displaySelections()
{
var player1 = "Marhall Faulk"
document.clear()
document.writeln("<H2>Results of your selection</h2>");
document.writeln(player1);
document.writeln("<br>");
}
// end hide JavaScript -->
</script>


<form name="frmPredictionPro">
<br>
<font size="3" color="#6188AA">
<b>Team Predictions</b>
</font>

<Table width="50%">
<tr>
 <td><b>Quarterback</b>
 <td>
  <select name="qbTeam1">
   <option>Favre, Brett
   <option>Bulger, Marc
   <option>Garcia, Jeff
   <option>Brady, Tom
   <option>Griese, Brian
   <option>Green, Trent
   <option>McNabb Donovan
   <option>Maddox, Tommy
   <option>Gannon, Rich
   <option>Blake, Jeff
   <option>Manning, Peyton
   <option>Culpepper, Daunte
   <option>Peete, Rodney
   <option>Vick, Michael
   <option>Brooks, Aaron
   <option>Pennington, Chad
   <option>Matthews, Shane
   <option>Kitna, John
   <option>Miller, Jim
   <option>McNair, Steve
   <option>Plummer, Jake
   <option>Brunnel, Mark
   <option>Collins, Kerry
   <option>Brees, Drew
   <option>Hasselbeck, Matt
   <option>Carr, David
   <option>Harrington, Joey
   <option>Lucas, Ray
   <option>Fiedler, Jay
   <option>Chandler, Chris
  </select>
</Table>


<input type="submit" name="purchase Selections"onClick="displaySelections()">
<input type="reset" name="Clear Selections">
</form>


And, if you're posting code in an entry you have to disable line breaks, otherwise it messes up the code.
xeifrank
Nov 13 2002, 06:21 PM
Thanks.  I tried to take out the > and > tags like you said, but it still doesn't work.  When you hit the submit button it gets an error on the page and doesn't display the proper stuff.

Page that doesn't work with Blog

Site that does work with regular html

Try typing that code into a Blog of your own, see what you get.  Any other suggestions?  Do these Blogs not like Forms?
xeifrank
Nov 13 2002, 06:24 PM
It works now!  Disabling the line breaks was the key.  Thanks for all your help.  I'm a newbie when it comes to these Blogs.  Thanks!

Xeifrank
Phil
Nov 13 2002, 07:05 PM
Some of you are about to learn something, and some of you are about to smack yourselves across the head.

In the BODY tag, the proper syntax to execute a script on page load is as follows:

CODE
body "function_name()"


xeifrank,

Your line:

CODE
<body "LoadMe()">


should be:

CODE
<body "LoadMe()">


And, don't forget that Javascript is case sensitive.  LoadMe() and loadme() are NOT the same thing!
bmk
Nov 13 2002, 07:10 PM
Thank you very much, Phil!

Me know no javascript.   :0

But I'm confused, the "your line" and "should be" you posted are the same.
staggernation
Nov 13 2002, 07:14 PM
Phil, unless I'm deeply missing something, I think IkonBoard may have eaten part of the code you posted... shouldn't there be an "onload" in there?
CODE
<body "LoadMe()">


On edit: sure enough, the board removed the "onload" from the tag when I posted it. Let's see if it works outside a CODE section... nope. OK, well, the correct code should look like this:
CODE
<body on_load="LoadMe()">

but remove the underscore.

...Which, it now occurs to me, is probably what Xeifrank had in there in the first place.
bmk
Nov 13 2002, 07:15 PM
Oh, you know.. you're right. the board eats those.  and mouse-overs.   :0

no freakin wonder.
Phil
Nov 13 2002, 07:18 PM
I just discovered that this board omits the onload = from the code sample.

What's the deal with that?

I can't figure out how to properly demostrate the syntax because this board keeps changing it!

Good grief!

(hrmmm, maybe if I type it with added spaces)

Ok.  

Bad syntax:

CODE
<body "LoadMe()">


Good syntax:

CODE
<body onload = "LoadMe()">


In any case, the problem with this board is likely why the onload = was missing from xeifrank's original code.  So, now I have no idea what the real problem was, to begin with.

Arg!
mcroft
Nov 13 2002, 10:10 PM
Both pages (blog and noblog) give the same results in three Mac browsers.

Mozilla 1.2b/Chimera works as you designed.
IE 5.2.2 hard crash
Omniweb 4.1.1 Error stating that DisplaySelections is not defined.

Perhaps it doesn't like writing the document when the script is in the body?

I changed the code to add a form input of type text and changed the action of DisplaySelections to set document.frmNamePro.results.value to the string I got back from the other two functions.

I also saw a few other things I'd do.  
1: pass the value of the form select as the parameter of the DisplaySelections function.  It's expensive to walk the elements looking for a selected marker, unless you're allowing multiple selections.
2: use a switch statement instead of hundreds of if then else...
3: close tags. Close the option tags, the table data and row tags, etc.

I've got a buddy who is way into fantasy football.  I'll have to send him to your site...
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.