Error on page – sometimes works sometimes doesnt??

@creati29Apr 20.2010

Hi I sort of made a thread about this earlier but I dont feel I explained the problem very well, if you go to ~~[url]~~http://love2-create.com[/url] and click on the orange “view profile” link about halfway down the left hand column a tab opens showing a profile with a small picture gallery at the bottom, this gallery works fine in firefox and google chrome, however in safari it works sometimes but not always and in IE it usually works on the first time the page is loaded but then when the page is refreshed and the profile link is clicked I get an Error: ‘document.getElementById(…)’ is null or not an object on line 60,

the lines in question look like this:

[code=html]buildcontentdivs:function(setting){ var alldivs=document.getElementById(setting.id).getElementsByTagName(“div”) for (var i=0; i<alldivs.length; i++){ if (this.css(alldivs[i], “contentdiv”, “check”)){ //check for DIVs with class “contentdiv” setting.contentdivs.push(alldivs[i]) alldivs[i].style.display=”none” //collapse all content DIVs to begin with } } },[/code]

Does anyone know why this may be, and how it can possibly work sometimes but not always?? its totally got me baffled so if anyone can help I would very very much appreciate it

Regards,

Keir

to post a comment

JavaScript

20 Comments(s) _↴

@kinaApr 20.2010 — #Are you calling this function like this:

<body onload="buildcontentdivs();">

? Or some other way? If not, try that.

I suspect you are calling the function before the DOM is ready (fully loaded) so the elementById is null.

You can call an initJS() function with 'onload' (call it what you like) where all the init() type functions are called.

@creati29authorApr 20.2010 — #thanks for getting back to me! I've been stuck on this for ages and am starting to understand what the problem is, now i just need to work out a solution.

From what I can understand (which isnt much!) you are right by the way, basically the script is being loaded before it should be. This is because the page that contains the picture gallery is being loaded as a page within a page using a dynamic content script from dynamic drive. Normally there should be an inline script below the picture gallery which reads as follows:

[code=html]
 featuredcontentslider.init({
 id: "slider1",  //id of main slider DIV
 contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
 toc: "markup",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
 nextprev: ["", ""],  //labels for "prev" and "next" links. Set to "" to hide.
 revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
 enablefade: [true, 0.2],  //[true/false, fadedegree]
 autorotate: [true, 3000],  //[true/false, pausetime]
 onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
 //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
 //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
 }
 })
 [/code]

But the problem I have is that the script that loads the gallery page does not allow for inline scripts, instead you load them onclick like this:

[code=html]
 <a href="javascript:lefthandAccordion.pr('profilesection',1);ajaxpage('profiles/anita/anita.htm','profilesection');loadobjs('profiles/contentslider.js','profiles/contentslider2.js','profiles/contentslider.css');" class="readmore">Anita Ryan</a>
 [/code]

See the loadobjs part of that link is what loads the scripts you wish to run on the page being loaded, however (I feel like im repeating myself and rambling but jsut want to give as much detail as I can so i apologise) you cannot have an inline script so is there a way to delay the loadobjs part of that link until everything else has been loaded?

Thanks for getting back to me I appreciate it

@kinaApr 20.2010 — #Try as I said before.

<body onload="mysetup();">

<javascript ...>

function mysetup() {

loadobs(...);

}

Just perhaps setTimeout() may be of help depending on what you want to do; but would not be a wise alternative to a proper dom ready approach.

http://www.electrictoolbox.com/using-settimeout-javascript/

@kinaApr 20.2010 — #Getting your meaning now.

The dom ready should be taken care of by the scripts loading the sub page. But if it is not expecting this to be ajax loaded, you may need to run the scripts after ajax call back rather than after ajax called.

@kinaApr 20.2010 — #Looked at : http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

If the content page has scripts ( especially if depend on the dom in some way) move them to the host page and call then from (at the end of) the ajax call back.

Same with loadobs() - call from the end of the ajax callback function* (after set innerHTML of the div). * defined in the statement xmlhttp.onreadystatechange=mycallbackfunction; in ajaxpage()

@creati29authorApr 20.2010 — #Thank you Kina for your help I really do appreciate it and I feel cheeky for asking but if you don't mind, and I understand if you do, but could you be abit more lamens as to what I need to change within the ajax.js in order to get this working, I understand the problem but I fear the solution is in waters too deep for me..

Sorry for asking alot of you, it can't be fun explaining this to someone with my limited knowledge

@kinaApr 20.2010 — #Here's a typical ajax use :

function getinfo()

{

xmlhttp=GetXmlHttpObject();

if (xmlhttp==null)

{

alert ("Browser does not support HTTP Request");

return;

}

var url="info.html";

xmlhttp.onreadystatechange=[B]stateChanged[/B];

xmlhttp.open("POST",url,true);

xmlhttp.send(null);

}

function [B]stateChanged[/B]()

{

if (xmlhttp.readyState==4)

{

if (xmlhttp.responseText!=null) {

document.getElementById("infodiv").innerHTML=xmlhttp.responseText;

[I]loadobjs(); [/I]//<<<<<<<<<<<< add js setup / init calls here (any that operate on the new content) Don't alter your ajaxpage script except to add the js call after the responseText is applied.

}

}

[B]stateChanged[/B] could be another name, just so long as matches.

Also, any scripts declared in page returned by ajax should instead be declared in the page with the ajax call instead; though I don't think this is needed in your case because the ajax loaded text doesnt contain any scripts, just some of the elements that the script needs, hence calling the scripts after the page is updated.

An alternative is to change

xmlhttp.open("POST",url,true);

to

xmlhttp.open("POST",url,false);

- non-asynchronous; waits for response

so the loadobjs() will not run until the page is updated (but wastes a second or two in the waiting, so not as good; can be useful in rare ocasions though).

Note that some scripts will init / setup as soon as declared, as in your case as far as i can tell - solution same though as loadobjs loads the scripts (and initialises/runs them).

To sleep now. Good luck.

@creati29authorApr 21.2010 — #I just can't seem to get my head around the solution i'm going to keep working on it until i do though - i'm sorry Kina I feel like i've wasted your time because you've been really helpful, but implementing your advice is just beyond what I know.

Thanks again though I will keep trying to make sense of it but like I said my level of knowledge is like toe high so explaining to me can't be fun, if you think theres anything that could simplify it any further than you have done I will as always be extremely appreciative.

@kinaApr 21.2010 — #Look for this line in ajaxpage.js and change as follows:

An alternative is to change

xmlhttp.open("POST",url,true);

to

xmlhttp.open("POST",url,false);

- non-asynchronous; waits for response

so the loadobjs() will not run until the page is updated (but wastes a second or two in

the waiting, so not as good; can be useful in rare ocasions though).

Don't worry if yours is GET rather than POST, just try change true to false

@creati29authorApr 21.2010 — #in ajax.js I've only got one reference to anything similiar to ("GET", url, true) and it reads like,

page_request.open('GET', url+bustcacheparameter, true)

page_request.send(null)

}

but i dont think that is what you meant?

Now, you go to bed like you said you were, I've wasted enough of your time being a brickwall for you to sling help at and its starting to get embarrasing for me! lol

Thank you though Kina your a really helpful person!

@kinaApr 21.2010 — #that's equivalent

try change true to false

@creati29authorApr 21.2010 — #i tried, it made the page not load at all

@kinaApr 21.2010 — #Oops, also need to call the second function.

So, xmlhttp.onreadystatechange=stateChanged;

xmlhttp.open("POST",url,true);

xmlhttp.send(null);

change to

page_request.onreadystatechange=[B]stateChanged[/B];

page_request.open("POST",url,true);

page_request.[B]send[/B](null);

[B]stateChanged(); [/B]//<<<<<<<<<<<<<<<<< just add the function named in onreadystatechange after send()

@creati29authorApr 21.2010 — #what i have in front of me reads like

else

return false

page_request.onreadystatechange=function(){

loadpage(page_request, containerid)

}

if (bustcachevar) //if bust caching of external page

bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()

page_request.open("GET",url, false);

page_request.send(null);

loadpage();

}

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

}

im assuming thats wrong?

This must be exasperating for you Kina, you have the patience of Job!

@kinaApr 21.2010 — #loadpage();

should be

loadpage(page_request, containerid)

@creati29authorApr 21.2010 — #I reread what you have said and put

page_request.open("GET",url, false);

page_request.send(null);

loadpage(page_request, containerid);

}

and it appears to be working, Kina would you mind as one last thing just testing http://www.love2-create.com - then clicking the orange "view profile" link on the left hand side and telling me if the gallery works for you?

@kinaApr 21.2010 — #I have made an example:

http://www.tji-java-ide.com/ajax1.html

The alert (div content) is blank because of time for ajax callback.

If swap these lines, it works:

[B]xmlhttp.open("GET",url,true); // <<<<<<<

///xmlhttp.open("GET",url,false); stateChanged(); // <<<<<<<[/B]

http://www.tji-java-ide.com/ajax2.html

So now:

[B]///xmlhttp.open("GET",url,true); // <<<<<<<

xmlhttp.open("GET",url,false); stateChanged(); // <<<<<<<[/B]

You can save the three files ajax1.html and ajax1_extra.html to try on your site.

ajax2.html:

<html><body><div id="infodiv"></div>

<script type="text/javascript">

function GetXmlHttpObject()

{

if (window.XMLHttpRequest)

{

// code for IE7+, Firefox, Chrome, Opera, Safari

return new XMLHttpRequest();

}

if (window.ActiveXObject)

{

// code for IE6, IE5

return new ActiveXObject("Microsoft.XMLHTTP");

}

return null;

}

function getinfo()

{

xmlhttp=GetXmlHttpObject();

if (xmlhttp==null)

{

alert ("Browser does not support HTTP Request");

return;

}

var url="ajax1_extra.html";

xmlhttp.onreadystatechange=stateChanged;

///xmlhttp.open("GET",url,true); // <<<<<<<

xmlhttp.open("GET",url,false); stateChanged(); // <<<<<<<

xmlhttp.send(null);

}

function stateChanged()

{

if (xmlhttp.readyState==4)

{

if (xmlhttp.responseText!=null) {

document.getElementById("infodiv").innerHTML=xmlhttp.responseText;

}

}

}

getinfo();

alert(document.getElementById("infodiv").innerHTML);

</script>

And ajax1_extra.html is simple the word hello

@creati29authorApr 21.2010 — #I have checked and rechecked the gallery and the only very very minor thing that is wrong is that if I clear the cache then load the page then only once the page has been refreshed will the images show, but from where I was before your help that is amazing, no more error messages etc.

Honestly thank you very much for the patience and helpfulness youve shown me tonight, I think I would have given up on me about an hour ago if I was you!

@kinaApr 21.2010 — #I guess that's because of caching

onload might help with that - waits for images to load (at least in IE).

Might be more to it though - another day ...

btw, the alert() in the example takes the place of any real javascript

glad there's progress. i had some free time. Ajax is simple really and powerful. Just needs care when run scripts on the returned content.

Gotta sleep now !

@creati29authorApr 21.2010 — #The first bit post of yours I can really understand.. sleep time !

Thanks once again for all your help

Also in #JavaScript _↴

cookie help needed I need java coding timer control Is it possible

Success!

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

Tweet This

Error on page – sometimes works sometimes doesnt??

20 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Error on page – sometimes works sometimes doesnt??

20 Comments(s) ↴

Also in #JavaScript ↴

Success!

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

Social

Version

20 Comments(s) _↴

Also in #JavaScript _↴