How to include javascript dynamically in this real world example?
<p>I read here it is possible to inlcude js dynamically
<a href="http://www.phpied.com/javascript-include/" rel="nofollow">http://www.phpied.com/javascript-include/</a> </p>

<p>I wanted to try with this real example by concerting tigra slider example (see <a href="http://www.softcomplex.com/products/tigra_slider_control/multiple_slider_designs_demo.html" rel="nofollow">http://www.softcomplex.com/products/tigra_slider_control/multiple_slider_designs_demo.html</a>) into dynamic code using <a href="http://accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/" rel="nofollow">http://accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/</a> to convert static code to dynamic one:</p>

<pre><code>&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;div style="float: left;position:relative"&gt;
&lt;div id="slider1" style="float: left"&gt;
&lt;script language="JavaScript"&gt;
    var A_TPL = {
        'b_vertical': false,
        'b_watch': true,
        'n_controlWidth': 120,
        'n_controlHeight': 16,
        'n_sliderWidth': 16,
        'n_sliderHeight': 15,
        'n_pathLeft': 1,
        'n_pathTop': 1,
        'n_pathLength': 103,
        's_imgControl': 'img/blueh_bg.gif',
        's_imgSlider': 'img/blueh_sl.gif',
        'n_zIndex': 1
    }

    var A_INIT1 = {
        's_form': 0,
        's_name': 'sliderValue1',
        'n_minValue': 0,
        'n_maxValue': 100,
        'n_value': 20,
        'n_step': 1
    }
    new slider(A_INIT1, A_TPL);
&lt;/script&gt;
&lt;/div&gt;

&lt;div style="float: left"&gt;
&lt;input name="sliderValue" id="sliderValue1" type="Text" size="3" &gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;
&lt;div style="float: left;position:relative"&gt;
&lt;div style="float: left"&gt;
&lt;script language="JavaScript"&gt;
    var A_INIT2 = {
        's_form': 0,
        's_name': 'sliderValue2',
        'n_minValue': -50,
        'n_maxValue': 50,
        'n_value': 0,
        'n_step': 1
    }
    new slider(A_INIT2, A_TPL);
&lt;/script&gt;
&lt;/div&gt;
&lt;div style="float: left"&gt;
&lt;input name="sliderValue" id="sliderValue2" type="Text" size="3"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;
&lt;div style="float: left;position:relative"&gt;
&lt;div style="float: left"&gt;
&lt;script language="JavaScript"&gt;
    var A_INIT3 = {
        's_form': 0,
        's_name': 'sliderValue3',
        'n_minValue': -100,
        'n_maxValue': 0,
        'n_value': -20,
        'n_step': 1
    }

    new slider(A_INIT3, A_TPL);
&lt;/script&gt;
&lt;/div&gt;
&lt;div style="float: left"&gt;
&lt;input name="sliderValue" id="sliderValue3" type="Text" size="3"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>which will give</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
    &lt;title&gt;
    &lt;/title&gt;
        &lt;script language="JavaScript" src="slider.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form action="index.html" method="get" name="demoForm"&gt;
&lt;script&gt;
document.write("&lt;table&gt;");
document.write("&lt;tr&gt;");
document.write("&lt;td&gt;");
document.write("&lt;div style=\"float: left;position:relative\"&gt;");
document.write("&lt;div id=\"slider1\" style=\"float: left\"&gt;");
document.write("&lt;script language=\"JavaScript\"&gt;");
document.write("    var A_TPL = {");
document.write("        'b_vertical': false,");
document.write("        'b_watch': true,");
document.write("        'n_controlWidth': 120,");
document.write("        'n_controlHeight': 16,");
document.write("        'n_sliderWidth': 16,");
document.write("        'n_sliderHeight': 15,");
document.write("        'n_pathLeft': 1,");
document.write("        'n_pathTop': 1,");
document.write("        'n_pathLength': 103,");
document.write("        's_imgControl': 'img\/blueh_bg.gif',");
document.write("        's_imgSlider': 'img\/blueh_sl.gif',");
document.write("        'n_zIndex': 1");
document.write("    }");
document.write("");
document.write("    var A_INIT1 = {");
document.write("        's_form': 0,");
document.write("        's_name': 'sliderValue1',");
document.write("        'n_minValue': 0,");
document.write("        'n_maxValue': 100,");
document.write("        'n_value': 20,");
document.write("        'n_step': 1");
document.write("    }");
document.write("    new slider(A_INIT1, A_TPL);");
document.write("&lt;\/script&gt;");
document.write("&lt;\/div&gt;");
document.write("");
document.write("&lt;div style=\"float: left\"&gt;");
document.write("&lt;input name=\"sliderValue\" id=\"sliderValue1\" type=\"Text\" size=\"3\" &gt;");
document.write("&lt;\/div&gt;");
document.write("&lt;\/div&gt;");
document.write("&lt;\/td&gt;");
document.write("&lt;\/tr&gt;");
document.write("");
document.write("&lt;tr&gt;");
document.write("&lt;td&gt;");
document.write("&lt;div style=\"float: left;position:relative\"&gt;");
document.write("&lt;div style=\"float: left\"&gt;");
document.write("&lt;script language=\"JavaScript\"&gt;");
document.write("    var A_INIT2 = {");
document.write("        's_form': 0,");
document.write("        's_name': 'sliderValue2',");
document.write("        'n_minValue': -50,");
document.write("        'n_maxValue': 50,");
document.write("        'n_value': 0,");
document.write("        'n_step': 1");
document.write("    }");
document.write("    new slider(A_INIT2, A_TPL);");
document.write("&lt;\/script&gt;");
document.write("&lt;\/div&gt;");
document.write("&lt;div style=\"float: left\"&gt;");
document.write("&lt;input name=\"sliderValue\" id=\"sliderValue2\" type=\"Text\" size=\"3\"&gt;");
document.write("&lt;\/div&gt;");
document.write("&lt;\/div&gt;");
document.write("&lt;\/td&gt;");
document.write("&lt;\/tr&gt;");
document.write("");
document.write("&lt;tr&gt;");
document.write("&lt;td&gt;");
document.write("&lt;div style=\"float: left;position:relative\"&gt;");
document.write("&lt;div style=\"float: left\"&gt;");
document.write("&lt;script language=\"JavaScript\"&gt;");
document.write("    var A_INIT3 = {");
document.write("        's_form': 0,");
document.write("        's_name': 'sliderValue3',");
document.write("        'n_minValue': -100,");
document.write("        'n_maxValue': 0,");
document.write("        'n_value': -20,");
document.write("        'n_step': 1");
document.write("    }");
document.write("");
document.write("    new slider(A_INIT3, A_TPL);");
document.write("&lt;\/script&gt;");
document.write("&lt;\/div&gt;");
document.write("&lt;div style=\"float: left\"&gt;");
document.write("&lt;input name=\"sliderValue\" id=\"sliderValue3\" type=\"Text\" size=\"3\"&gt;");
document.write("&lt;\/div&gt;");
document.write("&lt;\/div&gt;");
document.write("&lt;\/td&gt;");
document.write("&lt;\/tr&gt;");
document.write("&lt;\/table&gt;");
document.write("");
&lt;/script&gt;

&lt;input name="Submit" type="Submit" value="Submit"&gt;

&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>But only fields appear no slider when running the document. Why ?</p>
