Client Side Things
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me



Go Back   Codewalkers ForumsOther TechnologiesClient Side Things

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Codewalkers Forums Sponsor:
Old January 29th, 2010, 04:25 PM
naifwonder naifwonder is offline
Registered User
Codewalkers Newbie (0 - 499 posts)
 
Join Date: Mar 2008
Posts: 17 naifwonder User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 h 4 m 40 sec
Reputation Power: 0
Javascript error only in Chrome: Cannot set property of null

I am using a script called ajax_load.js that defines a function, ajaxpage(), that allows a person to load the contents of an external page into a div item. I have it setup so I may use ajaxpage() to load pages with other div items in it. The problem is that I cannot reference the div items loaded by ajaxpage(). I have provided an example below to illustrate this. It was working fine in the prior version of Google Chrome and is still working fine in IE 8, IE 7, and Firefox. The version of Chrome I am currently using is 4.0.249.78

Here is the example; All the files used in this example are listed below:

74.54.95.210/~admin/js_test/ajaxtest.html
74.54.95.210/~admin/js_test/ajax_load.js
74.54.95.210/~admin/js_test/ajaxtest_external.html
74.54.95.210/~admin/js_test/blank.png

The breakdown of what is happening:

ajaxtest.html is the primary file here. It loads ajax_load.js into it, which defines the ajaxpage() function.

ajaxpage() works like this .. ajaxpage('external_page_name.file_ending', 'target_div_element');

ajaxtest.html contains a div item with the id "sample_target". ajaxpage() is used to load the contents of ajaxtest_external.html into it, which is another div item with the id "sample_target_external".

Here is where it gets complicated: Once the "sample_target_external" div is loaded by ajaxpage(), ajaxtest_external.html attempts to use javascript to set the innerHTML value of "sample_target_external". However, it does not work and the error comes up "Uncaught TypeError: Cannot set property 'innerHTML' of null"

The function used to try and change the innerHTML value of "sample_target_external" is, load_text(), which is defined in ajaxtest.html

If you want to see it all in action, load up the following url:

74.54.95.210/~admin/js_test/ajaxtest.html


This code was working just fine in the prior stable version of chrome, and still works properly in IE 8, IE 7, and Firefox without any errors (The version of chrome giving me problems is 4.0.249.78). Does anyone know how to go about fixing this? Is this something wrong with the latest version of chrome, or is this on my end? ANY help would be greatly appreciated. The site I am currently working on relies heavily on this working, and having to change things means altering several thousand lines of code.

Reply With Quote
Old February 1st, 2010, 11:17 PM
jamestrowbridge jamestrowbridge is offline
Contributing User
Codewalkers Novice (500 - 999 posts)
 
Join Date: Jul 2008
Location: Cleveland, Ohio, USA
Posts: 605 jamestrowbridge User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 6 Days 22 h 32 m 27 sec
Reputation Power: 7
If I were you, I'd scrap this and use jQuery load():
http://api.jquery.com/load/
__________________
Sir, a desire of knowledge is the natural feeling of mankind; and every human being, whose mind is not debauched, will be willing to give all that he has to get knowledge.

Reply With Quote
Old February 2nd, 2010, 12:06 AM
naifwonder naifwonder is offline
Registered User
Codewalkers Newbie (0 - 499 posts)
 
Join Date: Mar 2008
Posts: 17 naifwonder User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 h 4 m 40 sec
Reputation Power: 0
jQuery does seem very powerful, but it seems a little intense for what I need done. I can adapt a different script to load the pages, but I am still curious as to why it would just stop working in chrome. :/

According to a reply on another forum, it is because I am using onload to call the functions when an image loads, and since chrome loads the images before everything else, the error is being caused. I am looking into that right now.

Reply With Quote
Old February 9th, 2010, 03:39 AM
naifwonder naifwonder is offline
Registered User
Codewalkers Newbie (0 - 499 posts)
 
Join Date: Mar 2008
Posts: 17 naifwonder User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 h 4 m 40 sec
Reputation Power: 0
I found a fix. it turns out that it was how chrome handles script execution relative to the loading of the DOM that was causing the error. Since I was using an onload event during the loading of an image file, it was being executed before the DOM loaded, meaning the object the script was referencing was coming up as null.

Instead of using an onload event in conjunction with a small image file, I am now using simple <script> tags in the file loaded through ajax. The reason I didn't do this before is because when ajax loads a file, javascript in it is not executed. The fix for this is to modify the ajax_load.js file to use eval() to execute the javascript. The code below will load pages via ajax into a div element and execute javascripts in the loaded file. Please note that it will only execute scripts embedded in <script> tags, and may not necessarily work for javascripts imported in through <script src=. The code is below:


/***********************************************
* Dynamic Ajax Content- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(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);

var x = document.getElementById(containerid).getElementsBy TagName("script");
for(var i=0;i<x.length;i++)
{
eval(x[i].text);
}

}

if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=pag e_request.responseText;
}



function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}


The script above is actually a modified version of a script taken from dynamicdrive.com. The original version does not execute javascripts in loaded files where as the example above does. The chunk of the code responsible for this update is below:

var x = document.getElementById(containerid).getElementsBy TagName("script");
for(var i=0;i<x.length;i++)
{
eval(x[i].text);
}


For more information on the original script, including usage tutorials and examples can be found at dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Reply With Quote
Old February 9th, 2010, 02:53 PM
naifwonder naifwonder is offline
Registered User
Codewalkers Newbie (0 - 499 posts)
 
Join Date: Mar 2008
Posts: 17 naifwonder User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 h 4 m 40 sec
Reputation Power: 0
As a side not, if the page you are loading contains only javascript, it won't work properly in IE. For some reason, it registers as a blank page and the script tags don't get processed. To fix this, just add a &nbsp; somewhere in the page (&nbsp; is just a space) to prevent it from registering as a blank page, and it should work just fine.

Reply With Quote
Reply

Viewing: Codewalkers ForumsOther TechnologiesClient Side Things > Javascript error only in Chrome: Cannot set property of null


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.

© 2003-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap