ryanmorr/ready

Detect element availability on the initial page load and those dynamically appended to the DOM

ready

Detect element availability on the initial page load and those dynamically appended to the DOM

Install

Download the CJS, ESM, UMD versions or install via NPM:

npm install @ryanmorr/ready

Usage

Provide a selector string for the element(s) you want to target as the first argument and a callback function as the second argument. It returns a function that stops observing for new elements only for that particular selector/callback combination:

const stop = ready('.foo', (element) => {
    stop(); // Stop observing for ".foo" elements
});

When any element matching the selector becomes available, the callback is invoked in the context of the element as well as passing it as the only parameter. If multiple elements are found, the callback is invoked in succession for each element in document order.

Alternatively, provide just the callback function as the only argument to add a generic DOM ready event listener:

ready((doc) => {
    // The DOM is ready
});

License

This project is dedicated to the public domain as described by the Unlicense.

ready's Issues

Doesn't work for dynamically added elements

Hey @ryanmorr,

Version 1.3 doesn't work for dynamically added elements after DOM is loaded.

Multiple DatepickerPulldowns Overlap

First - nice tool, much better than the silly HTML date popup!
I have form that has two date fields, on two different lines. If someone opens popup on one, then on the other, they overlap. So, I tweaked code a bit to close any that may be open already when another is opened. Here is what I did, followed by the affected existing code:
`
..
function closeDatePickers(idOfTextBox) // dlc added
// fixes problem where multiple datepickers open
{
var datepickers = document.getElementsByClassName('datepicker');
var textbox;
var any = false;
var me = false;

for(var ix=0; ix< datepickers.length; ix++)
{
textbox = document.getElementById(datepickers[ix].id);
div = textbox.parentNode.getElementsByTagName('div');
for (jx=0;jx<div.length;jx++)
{
if (div[jx].getAttribute('class')=='datepickerdropdown')
{
textbox.parentNode.removeChild(div[jx]);
if (datepickers[ix].id == idOfTextBox) me = true;
any = true;
}
}
}
return me;
}

// This is called when they click the icon next to the date inputbox
function showDatePicker(idOfTextbox) {
var textbox = document.getElementById(idOfTextbox);

if (closeDatePickers(idOfTextbox)) return false; // just closing this one
/*
// See if the date picker is already there, if so, remove it
x = textbox.parentNode.getElementsByTagName('div');
for (i=0;i<x.length;i++) {
if (x[i].getAttribute('class')=='datepickerdropdown') {
textbox.parentNode.removeChild(x[i]);
return false;
}
}
*/

// Grab the date, or use the current date if not valid
..`

Unnecessary checks

The check() function runs everytime I register a new selector.
I see that's needed to detect for elements already present at the page, but why do you need to run through all listeners, instead of just the selector being registered? Running through the other listeners seems to be unnecessary, and could have a noticeable perform impact as the listeners list grows.

Any way to disconnect from a previously invoked ready()?

What the subject says. Since a ready() persists through lifetime of the page, I'm wondering if there's a way to disconnect/turn off a ready() after it's no longer needed.

Thanks, appreciate the code!

Browser support

Nice job! I came to this project looking for a simpler alternative (and jquery-free) to https://github.com/AdamPietrasiak/jquery.initialize.

Your project seems perfect for it, though just like jquery.initialize, the browser support could be extended to IE9 by using a MutationObserver polyfill, wouldn't it?

The ready function name became ryanmorrready

Hey @ryanmorr,

Thank you for this useful utility!
After the recent update (v1.3.0) the ready function name became ryanmorrready.