Need a bit of help with js written by js

[The_Hat]

I have a module I created for users of my website that will dynamically write a JavaScript spry collapsible list.. The actual server interface is php that writes out js using docWrite.. So they can place information from my website by placing

<script type="text/javascript" src="http://example.com/page.php?user=5"></script>

Anywhere.

Part of the overhead for the collapsible list is a function list that uses references to functions specified in an external js file. What I have works fantastic in FireFox but throws a "'Spry' is undefined" error in IE7.

Here is a sample of the php code

<?
echo "document.write('\\n');";
echo "document.write('<sc'+'ript');";
echo "document.write(' type=\"text/javascript\"');";
echo "document.write(' language=\"javascript\">');";
echo "document.write('\\n');";
echo "document.write('\\<!-- <![CDATA[');";
echo "document.write('\\n');";

$jscount = 1;
$jsloop = $count+1;
while($jscount < $jsloop){
echo "document.write('var CollapsiblePanel$jscount = new Spry');";
echo "document.write('.');";
echo "document.write('Widget');";
echo "document.write('.');";
echo "document.write('CollapsiblePanel(\"');";
echo "document.write('CollapsiblePanel$jscount\");');";
echo "document.write('\\n');";
$jscount++;}

//echo "document.write('".$javascript."');";
echo "document.write('\\// ]]> -->');";
echo "document.write('\\n');";
echo "document.write('</sc'+'ript>');";
?>

And here is the resultant generated js code as it appears in the rendered page

<script type="text/javascript" language="javascript">
<!-- <![CDATA[
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3");
var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4");
var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5");
var CollapsiblePanel6 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel6");
var CollapsiblePanel7 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel7");
// ]]> -->
</script>

So here's what I think the problem is.. FireFox doesn't have a problem with it but evidently when IE writes the code into the page it hits that period in the name Spry.Widget.CollapsiblePanel and doesn't wait before it knows the rest of the story before trying to act on it. How can I get IE to not read the functions until they have been completely rendered? I have tried breaking the code into separate docWrite commands and that didn't work.. I have also tried using "&#46;" instead of a "." and that didn't work.

[edited by: The_Hat at 8:24 am (utc) on April 3, 2009]

[The_Hat]

I am sorry the "Spry.Widget.CollapsiblePanel" I referenced before is more appropriately referred to as a method. Thanks.

[KansasCoder]

Not sure but can you use an escape character before the periods?

'spry\.widget\.etc'

[The_Hat]

Thanks for the response, I think I tried that and had the same result. Though I might have only tried one and not two.. Will try that this evening.

[Fotiman]

Not being familiar with Spry, can I ask where is the code that configures the Spry object located?

[The_Hat]

From the OP- Part of the overhead for the collapsible list is a function list that uses references to functions specified in an external js file.

example.com/SpryAssets/SpryCollapsiblePanel.js

[Fotiman]

The point I was trying to make was, is that reference included prior to his script that references it?

[The_Hat]

Yes, It is. If it wasn't I wouldn't expect it to work in FireFox either.

Here is a more complete example of fully rendered code as displayed by firebug.

<script type="text/javascript" language="JavaScript" src="http://example.com/SpryAssets/SpryCollapsiblePanel.js"></script>
<link href="http://example.com/SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">

<bunch of divs etc that hold the information>

<script type="text/javascript" language="javascript">
<!-- <![CDATA[
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3");
var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4");
var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5");
var CollapsiblePanel6 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel6");
var CollapsiblePanel7 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel7");
// ]]> -->
</script>

[edited by: The_Hat at 2:33 am (utc) on April 4, 2009]

[The_Hat]

So here is what I did, I placed all of the loop code for the building of the CollapsiblePanel1 - 7 in another .php file.. I then linked to it using

<?
echo "document.write('<sc'+'ript');";
echo "document.write(' type=\"text/javascript\"');";
echo "document.write(' language=\"JavaScript\"');";
echo "document.write(' src=\"http://example.com/SpryAssets/SpryCollapsiblePanel2.php?count=$count\">');";
echo "document.write('</sc'+'ript>');";

?>

This way all of the building of the method lists gets taken care of in a separate file and is included in the parent as a block only after the looping is done. Works great.