Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

Please help me in updating a DOM element with Javascript contents

Newbie
  
Join Date: Dec 2007
Posts: 5
#1: Dec 2 '07
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
Newbie
  
Join Date: Dec 2007
Posts: 5
#2: Dec 2 '07

re: Please help me in updating a DOM element with Javascript contents

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.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#3: Dec 3 '07

re: Please help me in updating a DOM element with Javascript contents

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.
Newbie
  
Join Date: Dec 2007
Posts: 5
#4: Dec 3 '07

re: Please help me in updating a DOM element with Javascript contents

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
RMWChaos's Avatar
Familiar Sight
  
Join Date: Oct 2007
Location: DFW, Texas, USA
Posts: 137
#5: Dec 3 '07

re: Please help me in updating a DOM element with Javascript contents

Quote:

Originally Posted by mevryck

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
Newbie
  
Join Date: Dec 2007
Posts: 5
#6: Dec 4 '07

re: Please help me in updating a DOM element with Javascript contents

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#7: Dec 4 '07

re: Please help me in updating a DOM element with Javascript contents

Try:
Expand|Select|Wrap|Line Numbers
  1. menudata.appendChild(document.createTextNode(trimmed));
Newbie
  
Join Date: Dec 2007
Posts: 5
#8: Dec 7 '07

re: Please help me in updating a DOM element with Javascript contents

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.
RMWChaos's Avatar
Familiar Sight
  
Join Date: Oct 2007
Location: DFW, Texas, USA
Posts: 137
#9: Dec 7 '07

re: Please help me in updating a DOM element with Javascript contents

Quote:

Originally Posted by mevryck

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:

Quote:

Originally Posted by gits

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
Needs Regular Fix
  
Join Date: Jun 2006
Posts: 424
#10: Dec 7 '07

re: Please help me in updating a DOM element with Javascript contents

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);
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,392 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved