Waiting for an element to be ready in js

Y

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.getElementById('meh');
if(!ele){
window.setTimeout(waitForA, 100);
}
else{
ele.addEventListener('mouseup', ...);
}
}

function waitForB(){
var ele = document.getElementById('bah');
if(!ele){
window.setTimeout(waitForB, 100);
}
else{
ele.addEventListener('mouseup', ...);
}
}

function waitForC(){
var ele = document.getElementById('sneh');
if(!ele){
window.setTimeout(waitForC, 100);
}
else{
ele.addEventListener('mouseup', ...);
}
}


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

gottaWait('elementID').addEventlistener('...

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

Thomas 'PointedEars' Lahn

Yansky said:
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
 
R

Rik Wasmus

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.getElementById('meh');
if(!ele){
window.setTimeout(waitForA, 100);
}
else{
ele.addEventListener('mouseup', ...);
}
}

function waitForB(){
var ele = document.getElementById('bah');
if(!ele){
window.setTimeout(waitForB, 100);
}
else{
ele.addEventListener('mouseup', ...);
}
}

function waitForC(){
var ele = document.getElementById('sneh');
if(!ele){
window.setTimeout(waitForC, 100);
}
else{
ele.addEventListener('mouseup', ...);
}
}


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

gottaWait('elementID').addEventlistener('...

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

something like this perhaps?:
function delayedEvent(strId,strEventType,eventAction){
var ele = document.getElementById(strId);
if(ele){
ele.addEventListener(strEvent,eventAction);
} else {
window.setTimeOut(delayedEvent,strId,strEventType,eventAction);
}
}
 
T

Thomas 'PointedEars' Lahn

Rik said:
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('elementID').addEventlistener('...

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(strId, strEventType, eventAction){

function delayedEvent(sID, sEventType, fListener)
{
var ele = document.getElementById(strId);

var ele = document.getElementById(sID);

if (typeof fListener == "function")
{
if (ele)
{
ele.addEventListener(strEvent,eventAction);

ele.addEventListener(sEventType, 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
_addEventListener() in http://PointedEars.de/scripts/dhtml.js
} else {
window.setTimeOut(delayedEvent,strId,strEventType,eventAction);

// add feature test here
window.setTimeout(
function() {
delayedEvent(sID, 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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,900
Latest member
Nell636132

Latest Threads

Top