By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,466 Members | 1,176 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,466 IT Pros & Developers. It's quick & easy.

Waiting for an element to be ready in js

P: n/a
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.
Jun 27 '08 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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
Jun 27 '08 #2

P: n/a
On Fri, 02 May 2008 04:47:51 +0200, Yansky <th*********@gmail.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.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);
}
}
--
Rik Wasmus
Jun 27 '08 #3

P: n/a
Rik Wasmus wrote:
On Fri, 02 May 2008 04:47:51 +0200, Yansky <th*********@gmail.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('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(ele){
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
--
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
Jun 27 '08 #4

This discussion thread is closed

Replies have been disabled for this discussion.