Waiting for an element to be ready in js

[Yansky]

I want to add some event handlers to elements on a page, but most of
the elements are generated by ajax and aren't created until the ajax
response finishes. Is there a better way than what I have below to do
this?


function waitForA(){
var ele = document.getEle mentById('meh') ;
if(!ele){
window.setTimeo ut(waitForA, 100);
}
else{
ele.addEventLis tener('mouseup' , ...);
}
}

function waitForB(){
var ele = document.getEle mentById('bah') ;
if(!ele){
window.setTimeo ut(waitForB, 100);
}
else{
ele.addEventLis tener('mouseup' , ...);
}
}

function waitForC(){
var ele = document.getEle mentById('sneh' );
if(!ele){
window.setTimeo ut(waitForC, 100);
}
else{
ele.addEventLis tener('mouseup' , ...);
}
}


I would really like to just be able to do something like this :

gottaWait('elem entID').addEven tlistener('...

so that I don't have to write a "wait" function for each element.

[Thomas 'PointedEars' Lahn]

Re: Waiting for an element to be ready in js

Yansky wrote:

I want to add some event handlers to elements on a page, but most of
the elements are generated by ajax and aren't created until the ajax
response finishes. Is there a better way than what I have below to do
this?
[...]

Most definitely. Add the event listener(s) when "the "ajax response
finishes", on readyState=4 of the request, instead, directly after the
element was created. If your XHR library is sophisticated enough, you
just have to adapt your *XHR event listener* slightly.


PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

[Rik Wasmus]

Re: Waiting for an element to be ready in js

On Fri, 02 May 2008 04:47:51 +0200, Yansky <thegooddale@gm ail.comwrote:

I want to add some event handlers to elements on a page, but most of
the elements are generated by ajax and aren't created until the ajax
response finishes. Is there a better way than what I have below to do
this?

I'd find a way to do let it be run just once when the response is there,
using the state changes...

function waitForA(){
var ele = document.getEle mentById('meh') ;
if(!ele){
window.setTimeo ut(waitForA, 100);
}
else{
ele.addEventLis tener('mouseup' , ...);
}
}
>
function waitForB(){
var ele = document.getEle mentById('bah') ;
if(!ele){
window.setTimeo ut(waitForB, 100);
}
else{
ele.addEventLis tener('mouseup' , ...);
}
}
>
function waitForC(){
var ele = document.getEle mentById('sneh' );
if(!ele){
window.setTimeo ut(waitForC, 100);
}
else{
ele.addEventLis tener('mouseup' , ...);
}
}
>
>
I would really like to just be able to do something like this :
>
gottaWait('elem entID').addEven tlistener('...
>
so that I don't have to write a "wait" function for each element.

something like this perhaps?:
function delayedEvent(st rId,strEventTyp e,eventAction){
var ele = document.getEle mentById(strId) ;
if(ele){
ele.addEventLis tener(strEvent, eventAction);
} else {
window.setTimeO ut(delayedEvent ,strId,strEvent Type,eventActio n);
}
}
--
Rik Wasmus

[Thomas 'PointedEars' Lahn]

Re: Waiting for an element to be ready in js

Rik Wasmus wrote:

On Fri, 02 May 2008 04:47:51 +0200, Yansky <thegooddale@gm ail.comwrote:

>I want to add some event handlers to elements on a page, but most of
>the elements are generated by ajax and aren't created until the ajax
>response finishes. Is there a better way than what I have below to do
>this?

>
I'd find a way to do let it be run just once when the response is there,
using the state changes...

Most definitely.

>[...]
>I would really like to just be able to do something like this :
>>
>gottaWait('ele mentID').addEve ntlistener('...
>>
>so that I don't have to write a "wait" function for each element.

>
something like this perhaps?:

Not very much like this. (Maybe you should get the basics right before you
try to make suggestions?)

function delayedEvent(st rId, strEventType, eventAction){

function delayedEvent(sI D, sEventType, fListener)
{

var ele = document.getEle mentById(strId) ;

var ele = document.getEle mentById(sID);

if(ele){

if (typeof fListener == "function")
{
if (ele)
{

ele.addEventLis tener(strEvent, eventAction);

ele.addEventLis tener(sEventTyp e, fListener, false);

But it's still incompatible and (therefore) error-prone anyway: The MSHTML
DOM does not implement W3C DOM Level 2+ Events, you'll need a wrapper like
_addEventListen er() in http://PointedEars.de/scripts/dhtml.js

} else {
window.setTimeO ut(delayedEvent ,strId,strEvent Type,eventActio n);

// add feature test here
window.setTimeo ut(
function() {
delayedEvent(sI D, sEventType, fListener);
},
250);
}
}
}

But, as we established before, this could only be a dirty hack, eating up
the client system's resources, and not a substitute for proper coding the
XHR event listener at all.

BTW, do not use tabs for indentation; use spaces which are uniformly displayed.


PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee