Side navigation
#3454 closed enhancement (invalid)
Opened October 06, 2008 08:52PM UTC
Closed October 07, 2008 02:00PM UTC
Need a ready() event for page elements
| Reported by: | vlucas | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.3 | 
| Component: | event | Version: | 1.2.6 | 
| Keywords: | events, ready | Cc: | vlucas, flesler | 
| Blocked by: | Blocking: | 
Description
I think there is a real need for a "ready" event that can be applied to elements with selectors, kind of like the "load" event that can be. The problem with using "load" - as the manual states - is that you have to use it *before* the element in the HTML source order or it won't work. There is a need for a "ready" event for individual elements that would be especially useful when combined with other events like "click" or "change".
Example:
<< element >>
$('#selectBox').bind('ready change', function() { doSomething(this); });
function doSomething(jqEl) {
    if(jqEl.val() == "blah") {
        $('#myDiv').show();
    } else {
        $('#myDiv').hide();
    }
}
There are cases where an option may be pre-selected (especially when correcting validation errors), but the doSomething() event will not be fired when the page is loaded (In this case, resulting in the '#myDiv' element not displaying when it needs to). There are also times when it's not possible to output the javascript *before* the element, like if it's being put together dynamically from a database and you want to output all the javascript together instead of having it strewn everywhere just before every element that needs it. A "ready" event would be a much more elegant solution, and would reduce the amount of code required to produce the same result otherwise.
Example:
<< element >>
doSomething($('#selectBox')); // extra code for element load/ready
$('#selectBox').bind('change', function() { doSomething(this); });
function doSomething(jqEl) {
    if(jqEl.val() == "blah") {
        $('#myDiv').show();
    } else {
        $('#myDiv').hide();
    }
}
So in this case, redundant code must be produced when the javascript cannot be output before the actual element in the HTML source. A simple "ready" event for elements would eliminate the need for the extra repetitive code.
Attachments (0)
Change History (1)
Changed October 07, 2008 02:00PM UTC by comment:1
| cc: | → vlucas, flesler | 
|---|---|
| component: | core → event | 
| resolution: | → invalid | 
| status: | new → closed | 
While I understand the test case, there's no logic for the 'ready' event. It's just an execute-right-away.
You simply do that with each:
function doSomething() { if( this.value == "blah" ) $('#myDiv').show(); else $('#myDiv').hide(); } $('#selectBox').change(doSomething).each(doSomething);BTW, note the your example doesn't work. doSomething(this) passes a dom element.