Access ID imported from AJAX

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Access ID imported from AJAX

Post 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');" />
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

You could have the Ajax code add an object reference to the newly created element.

How is the element created by Ajax?
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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).
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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.
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Post 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.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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
}
}
}
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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?
Post Reply