tags:

views:

64

answers:

3
Q: 

How to include javascript dynamically in this real world example ?

I read here it is possible to inlcude js dynamically http://www.phpied.com/javascript-include/

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

<table>
<tr>
<td>
<div style="float: left;position:relative">
<div id="slider1" style="float: left">
<script language="JavaScript">
    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);
</script>
</div>

<div style="float: left">
<input name="sliderValue" id="sliderValue1" type="Text" size="3" >
</div>
</div>
</td>
</tr>

<tr>
<td>
<div style="float: left;position:relative">
<div style="float: left">
<script language="JavaScript">
    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);
</script>
</div>
<div style="float: left">
<input name="sliderValue" id="sliderValue2" type="Text" size="3">
</div>
</div>
</td>
</tr>

<tr>
<td>
<div style="float: left;position:relative">
<div style="float: left">
<script language="JavaScript">
    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);
</script>
</div>
<div style="float: left">
<input name="sliderValue" id="sliderValue3" type="Text" size="3">
</div>
</div>
</td>
</tr>
</table>

which will give

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title>
    </title>
        <script language="JavaScript" src="slider.js"></script>
</head>
<body>
<form action="index.html" method="get" name="demoForm">
<script>
document.write("<table>");
document.write("<tr>");
document.write("<td>");
document.write("<div style=\"float: left;position:relative\">");
document.write("<div id=\"slider1\" style=\"float: left\">");
document.write("<script language=\"JavaScript\">");
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("<\/script>");
document.write("<\/div>");
document.write("");
document.write("<div style=\"float: left\">");
document.write("<input name=\"sliderValue\" id=\"sliderValue1\" type=\"Text\" size=\"3\" >");
document.write("<\/div>");
document.write("<\/div>");
document.write("<\/td>");
document.write("<\/tr>");
document.write("");
document.write("<tr>");
document.write("<td>");
document.write("<div style=\"float: left;position:relative\">");
document.write("<div style=\"float: left\">");
document.write("<script language=\"JavaScript\">");
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("<\/script>");
document.write("<\/div>");
document.write("<div style=\"float: left\">");
document.write("<input name=\"sliderValue\" id=\"sliderValue2\" type=\"Text\" size=\"3\">");
document.write("<\/div>");
document.write("<\/div>");
document.write("<\/td>");
document.write("<\/tr>");
document.write("");
document.write("<tr>");
document.write("<td>");
document.write("<div style=\"float: left;position:relative\">");
document.write("<div style=\"float: left\">");
document.write("<script language=\"JavaScript\">");
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("<\/script>");
document.write("<\/div>");
document.write("<div style=\"float: left\">");
document.write("<input name=\"sliderValue\" id=\"sliderValue3\" type=\"Text\" size=\"3\">");
document.write("<\/div>");
document.write("<\/div>");
document.write("<\/td>");
document.write("<\/tr>");
document.write("<\/table>");
document.write("");
</script>

<input name="Submit" type="Submit" value="Submit">

</form>

</body>
</html>

But only fields appear no slider when running the document. Why ?

+1  A: 

Don't use document.write. Use .innerHTML instead to add HTML to document.

Also you cannot add javascript to document like that. You need to eval() it (and that's very bad practice) or, much better, write a function which can be executed when you need it.

Māris Kiseļovs  2010-10-13 12:42:19
I would have bolded it like this: **Do not use `document.write`**
Pointy  2010-10-13 12:44:58
*"Don't use `document.write`"* = good. *"Use .innerHTML instead"* = enh, not a great idea for script content. *"Also you cannot add javascript to a document like that. You need to eval() it"* = bad. You don't need eval(). Use a `script` tag.
T.J. Crowder  2010-10-13 12:49:41
1°) innerHTML may cause problem with old browsers which I need to be compatible with in big corp environments some have still not upgrade/
 2010-10-13 20:44:14
2°) I ask source code for THIS example not for generalities
 2010-10-13 20:44:39
A: 

i'd presume that you need to do something in the document or body onload events.

my 'normal' javascript is a bit rusty, so i won't attempt an example, tho there are plenty around to get a feel from.

that's my gut feel anyway..

jim  2010-10-13 12:44:10
+2  A: 

If you need to add a script to the page dynamically, do it by injecting a <script src="..."></script> tag into the <head>. Injecting script content directly onto the page is, as you've seen, problematic.

VoteyDisciple  2010-10-13 12:46:31
This is the basic classical static way that everybody knows of course this is not dynamic. Dynamic means you can include a script at runtime that would be stored in a variable.
 2010-10-13 13:10:22
that's what the guy here explains http://www.phpied.com/javascript-include/
 2010-10-13 13:12:13
*"This is the basic classical static way that everybody knows..."* Everybody does **not** know it. You said you wanted to dynamically load scripts, which this does. You didn't say the script *content* had to be dynamic. If you find yourself in a situation where the script *content* has to be dynamic as well, odds are good a bit of refactoring is required.
T.J. Crowder  2010-10-13 13:19:26
@voteyDisciiple is saying the same thing as your link - add <script> tag to head (but please you "the dom way" as described in the article you link)
oberhamsi  2010-10-13 13:22:08
Naturally the script you include can be generated dynamically.
VoteyDisciple  2010-10-13 13:47:06
@Crowler please don't consider me more stupid than I seem to be to you :) It's up to me to judge whereas I do need it or not. My question is not about your judgment on this, it's about if you know HOW to do this or not and if yes of course give details with code snippet. I know javascript programming since the internet exists so I'm not absolute beginner on this language
 2010-10-13 18:00:18
So what I'm looking for is guru's knowledge.
 2010-10-13 18:01:45
Understood. You've gotten advice from a couple gurus here. Please let us know if we can help with any other questions.
VoteyDisciple  2010-10-14 00:31:10

related questions

What JavaScript patterns do you use most?
Javascript events
What style do you use for creating an "class" in JavaScript?
Graphing JavaScript Library
What's the difference in closure style
Getting the text from a drop-down box
How to specify javascript to run when ModalPopupExtender is shown
Length of Javascript Associative Array
How Do I Post and then redirect to an external URL from ASP.Net?
How to set up a CSS switcher in ASP.NET
Wrapping lists into columns
Javascript keyboard events primer? (or rather: help me with my custom dropdown)
Http Auth in a Firefox 3 bookmarklet
Best Debugging Tools for JavaScript/xulrunner Development
How can I turn a string of HTML into a DOM object in a Firefox extension?
Call ASP.NET Function From Javascript?
Javascript troubleshooting tools in IE
MAC addresses in JavaScript
Capturing TAB key in text box
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP .Net Custom Client-Side Validation
What JavaScript library would you choose for a new project and why?
Detecting font in JavaScript