Page 1 of 1
Access ID imported from AJAX
Posted: Wed Sep 26, 2007 10:13 am
by JAB Creations
How can I adapt this script to access an ID that is included via an AJAX includes? I need to "refresh" the JavaScript engine to know the ID has been added
after the page has finished loading.
JavaScript
Code: Select all
// setStyleById: given an element id, style property and
// value, apply the style.
// args:
// i - element id
// p - property
// v - value
//
function setstylebyid(i, p, v)
{
var n = document.getElementById(i);
n.style[p] = v;
}
XHTML JavaScript Event
Code: Select all
<element onevent="setstylebyid('menuaudio', 'backgroundColor', '#666');" />
Posted: Wed Sep 26, 2007 10:24 am
by feyd
You could have the Ajax code add an object reference to the newly created element.
How is the element created by Ajax?
Posted: Wed Sep 26, 2007 8:02 pm
by JAB Creations
How is the element created by Ajax?
AJAX includes
What does an include do in PHP? It takes code from another file/page and includes it.
So after the page has loaded the script exists but the ID does not. Once the user makes an action AJAX will include a file and insert it's XHTML code in to a layer. The ID the script is looking for is included in the XHTML which is dynamically added to the page
after it has loaded (hence AJAX).
Posted: Wed Sep 26, 2007 10:04 pm
by JAB Creations
Testing this further I've found that if a script tries to access the ID (and say change it's backgroundColor) it is possible by default from within the AJAX included file itself, but I still can't do so from the initially loaded page.
Posted: Wed Sep 26, 2007 11:34 pm
by feyd
There one minor difference between Ajax includes versus PHP includes. There's only one real way to include code in PHP. There's many in Ajax.
Posted: Wed Sep 26, 2007 11:35 pm
by JAB Creations
Here are a couple of odd things...
1.) The error console initially tells me that the ID does not exist.
2.) When trying to trigger the background color to change from another element (either in the initially loaded page or from the AJAX includes) it works if I've already loaded the AJAX includes....
3.) HOWEVER while it does see the ID and change it's background color it immediately resets back to the original background color if I call the function from the initial page load but it works just fine if the script to change the background color is from an element loaded from the AJAX includes.
So from that I know that the issue is that my single function which includes multiple sub-functions that it's simply not initially seeing the ID.
As far as all the other bizarre behavior I'm going to try to get a working test.
Posted: Wed Sep 26, 2007 11:48 pm
by JAB Creations
Further information, after changing request.readyState from 4 to 3 changing the background color of the ID included via AJAX worked and did not turn itself off.
However the problem remains that if I try to change the background color in the same event whatsoever that it will always fail to see the ID initially.
Posted: Wed Sep 26, 2007 11:52 pm
by Zoxive
Its probably because you are trying to change/do whatever, before the include is done/finished.
Make have some way of checked to see if the include is finished to attempt to do what you want to do.
Posted: Wed Sep 26, 2007 11:54 pm
by JAB Creations
Yeah, here is the AJAX includes script I am using. How would I modify this or my script to "wait" in the sense until after the AJAX script is done all inside the same set of functions triggered by the single event?
Code: Select all
//
// AJAX Includes
//
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)
}
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 == 3 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_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
}
}
}
Posted: Thu Sep 27, 2007 2:06 am
by JAB Creations
It's become clear to me that the issue is the order of the events being executed. I looked up JavaScript event order and ended up reading this...
http://www.quirksmode.org/js/events_order.html
So in my mind I'm now thinking we can somehow "contain" the sub-function (changing the background color to an ID that does not yet exist) by holding it until all the other sub-functions have executed or in another method wait to execute the specific sub-function until it detects the ID exists (addeventhandler). Thoughts?