reload js not page?

@pentaceAug 13.2007

Is there a way to tell the page to reload the js files or reread them once a page is fully loaded? I’m using an xmlhttp request to load a page into a div but the js files are inactive and I need to have it re-read the page to activate them. Is this possible?

to post a comment

JavaScript

14 Comments(s) _↴

@LeeUAug 14.2007 — #Why not just place the js links at the bottom of the page? That way they won't load until the rest of the page has already loaded.

@svidgenAug 14.2007 — #I'm not sure what you mean by having active and inactive js files. It seems like the problem you're having is due to non-modular code: aside from the initialization of globals, everything your script(s) do should be contained in methods. This avoids you the issue of trying to reload js files, because everything in the file can be called anytime you like.

For example, say you need the file [I]test.js[/I] to be run at a certain point in a page-load and then rerun later. Let's say you've got a simple file like this:

[code=html]alert(some_variable);[/code]

Change your file to look like this:

[code=html]function sayYay() {
 alert(some_variable);
 }
 
 sayYay();[/code]

Now, all the functionality of your js file is maintained, and it can be re-run with a simple method call. In your case, this would either be done immediately after your Ajax request or in the body tag:

[code=html]<body onLoad='sayYay();'>[/code]

Hope that helps!

@pentaceauthorAug 14.2007 — #Well the js is embeded and pulled in via xmlhttp request when they are pulled in the seem not to be active files. I have found a way to reload the js src's but not embeded js. I tried adding a function but it does not seem to work right. The js serc turns the embeded into a drop down menu

@Angry_Black_ManAug 14.2007 — #your saying that youre "xmlhttp.responsetext" property contains javascript that you want to then execute?

@pentaceauthorAug 14.2007 — #Yes the entire web page gets pulled into a div but the js is not active. I found reloading the src files works but does not help with js written driectly in the source. Per MS. Xmlhttp requires embeded js to have DEFER written in their script tag. Ie <script defer> but it still does not seem to work

@Angry_Black_ManAug 14.2007 — #i cant belive i used "youre" up there.. the crap was i thinking?

anyway, i dont have a solution for you. id suggest trying to eval() the contents of the responsetext property. but i'd start small. just have your ajax'd page send a [B]alert("test!")[/B] when it gets called.. then eval it in your readystatechanged function:

eval(xmlHttp.responseText)

which would effectively execute:

eval(alert("test!"))

which works in javascript when written as such. if that does work, then grow from there. find out just how much you can throw to your eval before stuff breaks. if it doesnt all work, then break the code down into sections until you find where it stops working... thats IF that works!

@Angry_Black_ManAug 14.2007 — #from testing, this does work on a small scale exactly as i described above:

http://webfiles.dreamhosters.com/ajax.html

@svidgenAug 14.2007 — #Interesting. The eval thing should scale pretty well. There are two other solutions as well, if you're interested:

One, which might be of particular use if you're trying to design a page with independent components, is to use an iframe instead of a "typical" Ajax request. Post a form or set the src of an iframe to load your content: you'll have yourself a well compartmentalized module in which your JavaScripts will run on load.

Another option, if you're using these requests merely to add JavaScript, is to simply create another JavaScript element:

[CODE]<html>
 <head>
 
 <script>
 function bodyLoaded() {
 new_script = document.createElement('script'); 

 new_script.setAttribute("language", "JavaScript"); 
 new_script.setAttribute("src", "ajax-alert.js"); 
 document.body.appendChild(new_script);
 } // bodyLoaded()
 </script>
 </head>
 
 <body onLoad="bodyLoaded();">
 
 this is my document.
 
 </body>
 
 </html>[/CODE]

My ajax-alert.js file is then:

[CODE]alert('test');[/CODE]

Hope that helps!

@pentaceauthorAug 14.2007 — #files like src=this.js are no issue files like were im laoding an html page thats source is

[code]
 <script>
 alert('Hello')
 </script>
 
 
 does not work   here is my current code
 
 
 
 <script type="text/javascript">
 
 
 var formZZ=''
 var loadedobjects=''
 var rootdomain="http://"+window.location.hostname
 var datasrc='';
 var url='';
 
 
 function ajaxpage(datasrc, url, containerid){
 
 var page_request = false
 if (window.XMLHttpRequest) // if Mozilla, Safari etc
 page_request = new XMLHttpRequest()
 else if (window.ActiveXObject){ // if IE
 try {
 page_request = new ActiveXObject("Msxml2.XMLHTTP")
 } 
 catch (e){
 try{
 page_request = new ActiveXObject("Microsoft.XMLHTTP")
 }
 catch (e){}
 }
 }
 else
 return false
 page_request.onreadystatechange=function(){
 loadpage(page_request, containerid)
 
 }
 if(url!=''){
 page_request.open('GET', url, true)
 page_request.send(null)
 
 
 if(url==''){
 var xmlMessage = datasrc;
 
  page_request.open("POST", URLto, false) 
 
  // for ie compatability 
  page_request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
  page_request.send(xmlMessage) 
 
  }
 
 }
 function loadpage(page_request, containerid){
 if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
 
 
 
 
 document.getElementById(containerid).innerHTML=page_request.responseText;
 
 
 
 
 
 
 
 }
 
 
 
 
 function runme(formz,actionz) {
 if (formz==''){
 formz=formZZ;}
 var qs = '' 
 for (e=0;e<formz.elements.length;e++) { 
 if (formz.elements[e].name!='') { 
 if ((formz.elements[e].checked==false)&&(formz.elements[e].type=='radio')){formz.elements[e].name=''; formz.elements[e].value='';}
 if ((formz.elements[e].checked!=true)&&(formz.elements[e].value=="on")){formz.elements[e].name=''; formz.elements[e].value='';}
 
 
 
 
   var name = formz.elements[e].name; 
   qs+=(qs=='')?'':'&' 
   qs+= name+'='+escape(formz.elements[e].value); //alert(qs);
   } 
  } 
  qs+=""; 
 
  InPutData=qs
 
   ajaxpage(InPutData, '', 'rightcolumn');
 
 }
 var URLto='';
 
 </script>

@Angry_Black_ManAug 15.2007 — #the only reason my example innerHTMLs is to show you the contents of my "javascript.js" file.

when you innerHTML, that stuff isnt going to execute. its just going to assign html there. you have to eval like i said to get stuff to trigger. or you have to use some of the methods that svidgen mentioned.

if you had a live page, it would be easier to see your qualm, but i think the problem lies in you expecting that innerHTMLing stuff will execute it.

@pentaceauthorAug 19.2007 — #i tried eval it errors any ideas?

@Angry_Black_ManAug 19.2007 — #youre in luck:

if [eval works], then grow from there. find out just how much you can throw to your eval before stuff breaks. if it doesnt all work, then break the code down into sections until you find where it stops working... [/QUOTE]

@pentaceauthorAug 19.2007 — #heh i tried eval with a page that only contained <script>

alert('boo')

</script> and it failed with an error so i dont know..

@Angry_Black_ManAug 19.2007 — #well, first of all, always note the error when you post a problem. it only makes sense..

...

secondly, "<script>" doesnt eval. thats just to let HTML know that a script tag is coming up. did you even look at the coding on my site that is a proof-of-concept?

Also in #JavaScript _↴

ECMA Script complilers?How to reset my game How to split string by seperator not in quotation?

Success!

Help @pentace spread the word by sharing this article on Twitter...

Tweet This

reload js not page?

14 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

reload js not page?

14 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #JavaScript _↴