By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,743 Members | 1,058 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,743 IT Pros & Developers. It's quick & easy.

Please help me in updating a DOM element with Javascript contents

P: 5
Greetings

I have a huge Javascript with inclusion of external scripts and all. I
got this by doing a XSLT .
Now I have the contents in a Javascript variable, but I'm not able to
update the element with the javascript contents.
But when viewed as a seperate HTML file with the below contents I'm
able to see the milonic menu http://www.milonic.com .

[HTML]<div>
<script type="text/javascript" language="javascript"
src="milonic_src.js">
<!-- comment inserted for Internet Explorer --></
script><script type="text/javascript" language="javascript"
src="mmenudom.js">
<!-- comment inserted for Internet Explorer --></
script><script type="text/javascript" language="javascript">
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;
with(mainStyle=new mm_style()){
bordercolor="#43BAF1";
borderstyle="solid";
borderwidth=1;
separatorcolor="#CCC";
separatorpadding=0;
separatorwidth=1;
fontfamily="Arial";
fontsize="11px";
fontstyle="normal";
fontweight="bold";
itemheight=18;
menubgcolor="";
offbgcolor="transparent";
offcolor="#666666";
onbgcolor="transparent";
oncolor="#43BAF1";
pagebgcolor="transparent";
pagecolor="#FFF";
outfilter="fade(duration=0.2)";
overfilter="Fade(duration=0.2)";
rawcss="padding-left:13px;padding-right:
13px";
separatorPadding=0;
onsubimage="ni-on_downboxed.gif";
subimage="ni-off_downboxed.gif";
}
with(menuStyle=new mm_style()){
bordercolor="#CDCDCD";
borderwidth=1;
separatorcolor="#ccc";
separatorpadding=0;
fontfamily="Arial";
fontsize="11px";
fontstyle="normal";
fontweight="normal";
image="";
itemheight=18;
offbgcolor="#F7F7F7";
offcolor="#666";
onbgcolor="#43BAF1";
onbgimage="ni-bg_highlight_btn.gif";
oncolor="#fff";
pagebgcolor="#43BAF1";
pagebgimage="ni-bg_highlight_btn.gif";
pagecolor="#F7F7F7";
menubgcolor="#F7F7F7";
styleid=1;
outfilter="fade(duration=0.2)";
overfilter="Fade(duration=0.2)";
padding=2;
rawcss="padding-left:5px;padding-right:5px;";
subimage="ni-menu_arrow_off.gif";
onsubimage="ni-menu_arrow_on.gif";
subimagepadding=3;
}
with(milonic=new menuname("main")) {
alwaysvisible=1;
position='relative';
orientation='horizontal';
style=mainStyle;
overflow="scroll";
aI("showmenu=Export...;text=Export...;url=;");
}
with(milonic=new menuname("Export...")) {
top='offset=0';
left='offset=-1';
style=menuStyle;
overflow="scroll";
aI("showmenu=Export Page;text=Export Page;url=;");
aI("showmenu=Export Report;text=Export
Report;url=;");
aI("showmenu=My Presentations;text=My
Presentations;url=;");
}

with(milonic=new menuname("Export Page")) {
top='offset=0';
left='offset=-1';
style=menuStyle;
overflow="scroll";
aI("text=Microsoft
Excel;url=javascript:exportPage('xls',
'58ea5cc2eab33c5ea8e3b66545c2f0a0');");
aI("text=org PDF
format;url=javascript:exportPage('pdf','58ea5cc2ea b33c5ea8e3b66545c2f0a0',
'9496551d86e583f1fbe3b66580a004a0');");
}

with(milonic=new menuname("Export Report")) {
top='offset=0';
left='offset=-1';
style=menuStyle;
overflow="scroll";
aI("text=Advisor
Viewer;url=javascript:exportReport('wsv',
'58ea5cc2eab33c5ea8e3b66545c2f0a0');");
}

with(milonic=new menuname("My Presentations")) {
top='offset=0';
left='offset=-1';
style=menuStyle;
overflow="scroll";
aI("text=Add page to
presentation;url=javascript:addPageToPresentationI nternal('58ea5cc2eab33c5e -
a8e3b66545c2f0a0');");
aI("text=View My Current
Presentation;url=javascript:downloadPresentation() ;");
aI("text=View My Presentation
History;url=javascript:presentationHistory();");
}

drawMenus();
</script>
<a nmouseover="javascript:popup('main','milonicmenu') "
onmouseout="javascript:popdown()" name="milonicmenu"
id="milonicmenu"></a>
</div>[/HTML]

I'm desperately looking for inputs in fixing this problem.
I'm just using prototype Ajax library for making my Ajax Request.
But I want to inject Javascript contents to an element in DOM.
I have a JSP page which is already loaded and using the DOM
I try and update the element present in the JSP page.
But I'm not able to inject the javascript guess my javascripts
contents are blown away because of evalScripts().
I try using extractScripts() but not able to inject them in to the DOM
element.
The javascript contents are meant for generating Milonic Menus
dynamically, I have pasted the contents at the start of my post.
When I view it as a separate HTML file with the contents and the
external javascript files I'm able to see my milonic menu.
But I want this to be injected into an DOM element dynamically.
Please provide assistance in this regard.

Thanks
Dec 2 '07 #1
Share this Question
Share on Google+
9 Replies


P: 5
Greetings

Just to add few things which was missed out in the earlier post by me.

I'm done with 90% and above of coding like parsing XML, building XML for milonic menu, XSL, transforming milonic menu XML using XSL to generate the (X)HTML contents.


The (X)HTML contents was only pasted on the above post, now the only thing which I'm not able to achieve is update a DOM element with the above mentioned (X)HTML contents.

Any pointers

Thanks in advance.
Dec 2 '07 #2

acoder
Expert Mod 15k+
P: 16,027
Add the JavaScript to the head element:
Expand|Select|Wrap|Line Numbers
  1. // script is a variable containing the script element
  2. document.getElementsByTagName("head")[0].appendChild(script);
Add the HTML elements to the body.
Dec 3 '07 #3

P: 5
Greetings

Thanks a lot for your inputs but still no success I'm pasting de code snippet where I'm not able to append the Javascript contents as a child to <HEAD> tag

code:

Expand|Select|Wrap|Line Numbers
  1. var str = new StringBuffer();      
  2. str.append("<script type='text/javascript' src='js/lib/milonic_src.js'></script>\n"+"<script type='text/javascript' src='js/lib/mmenudom.js'></script>\n<script type='text/javascript'>"+contents.extractScripts()+"</script>");            
  3.  
  4. var taken = str.toString();      
  5. var trimmed = taken.fulltrim();      
  6. document.getElementsByTagName("head")[0].appendChild(trimmed);
Any pointers please
Dec 3 '07 #4

RMWChaos
100+
P: 137
Greetings

Thanks a lot for your inputs but still no success I'm pasting de code snippet where I'm not able to append the Javascript contents as a child to <HEAD> tag

code:

Expand|Select|Wrap|Line Numbers
  1. var str = new StringBuffer();      
  2. str.append("<script type='text/javascript' src='js/lib/milonic_src.js'></script>\n"+"<script type='text/javascript' src='js/lib/mmenudom.js'></script>\n<script type='text/javascript'>"+contents.extractScripts()+"</script>");            
  3.  
  4. var taken = str.toString();      
  5. var trimmed = taken.fulltrim();      
  6. document.getElementsByTagName("head")[0].appendChild(trimmed);
Any pointers please
Mevryck,

Try giving your script (or an empty place-holder script element) in the HTML an id, then update by referencing the id via getElementById(). So it might look something like this:

Expand|Select|Wrap|Line Numbers
  1. <!--
  2. var scriptOne = document.getElementById('scriptone');
  3. scriptOne.src = "newLocation";
  4. //-->
  5.  
  6. <html>
  7. <body>
  8. <script id='scriptone' src="oldLocation"></script>
  9. </body>
  10. </html>
  11.  
Be aware that some element attributes cannot be changed this way, and you must use the DOM method instead of this JS method, and vice versa.

Good luck,

RMWChaos
Dec 3 '07 #5

P: 5
Greetings

Thanks a lot for your inputs.
The below pasted contents are present in my JSP page
Expand|Select|Wrap|Line Numbers
  1. <div id="milonicmenu" name="milonicmenu" style="float:left;">
  2.     <script id="milonicsrc" type="text/javascript"></script>
  3.     <script id="mmenudom" type="text/javascript"></script>
  4.     <script id="menudata" type="text/javascript"></script>
  5. </div>
  6.  
And in my external Javascript I have the following code.

Expand|Select|Wrap|Line Numbers
  1. var payload = results.substr(2, results.length-2);
  2. $("drop_downs").innerHTML = payload;
  3.  
  4. var contents = $("milonic_menu_contents").innerHTML;
  5.  
  6. var str = new StringBuffer();
  7. str.append(contents.extractScripts());
  8.  
  9. var taken = str.toString();
  10. var trimmed = taken.fulltrim();
  11.  
  12. var milonicsrc = document.getElementById('milonicsrc');
  13. milonicsrc.src = "js/lib/milonic_src.js";
  14.  
  15. var mmenudom = document.getElementById('mmenudom');
  16. mmenudom.src = "js/lib/mmenudom.js";
  17.  
  18. var menudata = document.getElementById('menudata');
  19. menudata.appendChild(trimmed);
  20.  
  21. var milonicmenu = document.getElementById('milonicmenu');
  22. milonicmenu.appendChild(contents);
  23.  
Well the javascript file(s) milonic_src.js and mmenudom.js are included successfully but the real problem is I have Javascript contents stored in variable trimmed I got to inject / insert / update it to the corresponding script element.

The variable trimmed contains the javascript contents which I have pasted at the start of this thread discussion.

Any pointers
Dec 4 '07 #6

acoder
Expert Mod 15k+
P: 16,027
Try:
Expand|Select|Wrap|Line Numbers
  1. menudata.appendChild(document.createTextNode(trimmed));
Dec 4 '07 #7

P: 5
Greetings

I would like to thank all the developers for giving me all possible inputs, still I'm NOT ABLE to UPDATE / INSERT/ INJECT the script contents.

Expand|Select|Wrap|Line Numbers
  1. <script>with(milonic=new menuname("Milonic")){...etc } drawMenu();</script>
So I have posted a topic in the concerned forum, Milonic to know whether I can dynamically update a DOM element *after a page has been loaded*.

Thanks a lot, I will definitely share my findings to everyone
with regard to milonic.
Dec 7 '07 #8

RMWChaos
100+
P: 137
So I have posted a topic in the concerned forum, Milonic to know whether I can dynamically update a DOM element *after a page has been loaded*.
mevryck,

You most certainly can update a DOM element dynamically after the page has loaded.

Here are two ways to do it:

Expand|Select|Wrap|Line Numbers
  1. // If your HTML code looks like this
  2. <script id='myscript' src='scriptOne.js'></script>
  3.  
  4. // Then your JS would look like this:
  5. var chngScript = document.getElementById('myscript');
  6.  
  7. // Javascript properties change method
  8. chngScript.src = "scriptTwo.js";
  9.  
  10. // DOM attribute change method
  11. createElem.setAttribute("src", "scriptTwo.js");
  12.  
The problem is that sometimes one way does not work, and other times the other way does not work. Some of the experts around here can explain why. So the best way to do this (yes, I'm quoting you now gits =D) is to create a "util-method", which allows you to create an exception list of attributes to use say with the Javascript method, and all the rest default to the DOM method.

Something like this:

Expand|Select|Wrap|Line Numbers
  1.       /**
  2.       * the util-method is a simple method that encapsulates the
  3.       * setAttribute() and property-setting - i simply call it set_node_attrib
  4.       * @param docroot the document
  5.       * @param id node-id
  6.       * @param attr_state true when we wnat to set the value
  7.       * explicitly, false when we want to remove it
  8.       * @param attr the attribute-name
  9.       * @param the value to set
  10.       */
  11.  
  12.       function set_node_attr(docroot, id, attr_state, attr, value) {
  13.           var node = docroot.getElementById(id);
  14.           var exceptions = { onclick: 1 };
  15.  
  16.           if (attr in exceptions) {
  17.               _set_node_prop(node, attr, value);
  18.           } else  if (attr_state) {
  19.               node.setAttribute(attr, value);
  20.           } else {
  21.               node.removeAttribute(attr);
  22.           }
  23.       }
  24.  
  25.       /**
  26.       * @private
  27.       */
  28.       function _set_node_prop(node, attr, value) {
  29.           node[attr] = value;
  30.       }
  31.  
Hope that gets you through your problem.

P.S. - If it works for you, don't thank me, thank gits. =D
Dec 7 '07 #9

100+
P: 428
This method allows the browser to interpret any string as a literal script source.
Whenever possible, however, insert a script with a src to a file instead of literal text.

Expand|Select|Wrap|Line Numbers
  1. document.newScript= function(s){    
  2.     var el= document.createElement('script');
  3.     el.type= 'text/javascript';
  4.     try{
  5.         el.appendChild(document.createTextNode(s));
  6.     }
  7.     catch(er){
  8.         el.text= s;
  9.     }
  10.     return document.getElementsByTagName('head')[0].appendChild(el);
  11. }
// test case
var str='(function ahoy(){alert("Ahoy!")})()'
document.newScript(str);
Dec 7 '07 #10

Post your reply

Sign in to post your reply or Sign up for a free account.