(TRJPRR)
I’ve been wanting to become better acquainted with the Mecurial revision control system (see Hg Init for more info). There’s also been a jQuery related issue I’ve been wanting to investigate. So I made the jump and
1. Created a plugin
2. Created a repository for that plugin at BitBucket
Prior to version 1.4, the array of functions saved by jQuery for execution when the DOM is ready (i.e. those functions added by $(document).ready(function...)) was an accessible property of jQuery. This meant that you could reference the array directly using something like $.readyList. Now, however, that array has been hidden within an anonymous, self-executing function (the deepest, darkest well of data hiding in javascript, here’s a bit of a primer). So re-executing all of the ready functions by grabbing a copy of that array becomes impossible.
The ReadyAgain plugin is my attempt to solve that issue. The specifics can be seen by looking at the code, but the basic concept is to override jQuery.ready to intercept each function as its added, and to save it within our own internal array.
So the initial commit of the code is there and I’ve typed up a page on the Wiki with some examples. I hope that people use it and maybe even contribute to it. It would certainly be something fun for me to be a part of and from which to learn.
An issue that has come up a couple of times regarding my ‘Read More Right Here’ Wordpress plugin is that, when the post content is loaded, effects like a thickbox or lightbox or whatever-box are not applied to images in the new content. More generally speaking, any javascript fanciness used on any of the new content elements is missing.
The reason is that most every javascript based modification is applied to the document within a ‘DOM Ready’ function (and rightly so) . With jQuery, this is the jQuery.ready function. So a plugin might add some nifty image effects to all images on the page like so: $('img').NiftyStuff(). But the images within the content pulled down by my plugin aren’t yet there. They don’t arrive to the page until after the ‘Read More’ link is clicked.
So how do you re-execute NiftyStuff and the potentially countless other plugin functions on that new content?
Live & Delegate
One quick solution would be to make use of jQuery’s live or delegate functions. When used, they will monitor the DOM for new elements and execute code as needed. But I guess this is still a relatively new process since it’s not something I’ve noticed in any of the plugins I’ve come across.
Rerun Ready (i.e. my plugin)
Re-execution of each of the saved ready functions is another possibility. What’s more, the ReadyAgain plugin will allow you to execute all of the ready functions within a more specific context (instead of the default ‘document’ context, see the wiki for more). So potentially only the new content will have the saved ready functions applied.
At this point you might be thinking to yourself “Great, so you’ve packaged this with ‘Read More Right Here’ and everything works perfectly”. Sorry, but no. At least not yet.
I experimented with it a bit, and it’s honestly just too hazardous. I mean, it’s a serious case of “Use at your own risk”. It is generally assumed (and again, rightly so) that the code executed within jQuery’s ready function will only be executed once. So you might see a new element with a static ID value added to the page over and over. Or you might see some element that’s animating with relative values (e.g. top:'+=25px'), which could happen over and over. Or any other number of possible side-effects.
This plugin is really something that (at least in its current form) should only be added on an individual basis. You have to examine what happens within the ready function of other jQuery based Wordpress plugins. There’s just no way that I can see to have this become default behavior within the RMRH Wordpress plugin.
But time will tell. Maybe creating this public repository will put some eyes on it and who knows what solutions will develop from that.
Comments are Okay