Is it possible to remove the two $() aka ready handlers from the script below? I'd like to load the jquery before the DOM is ready, but still be able to refer to #certification.
$(function(){
$("#certification").multiselect({
minWidth: "500",
noneSelectedText: "Certification Testing: Start Time - End Time (EST):",
selectedText: function(numChecked, numTotal, checkedItems){
return 'Certification Testing: ' + numChecked + ' of ' + numTotal + ' checked';
}
});
});
EDIT: Please assume #certification appears before the above script (in <head>). I'd like to refer to #certification from the script before the entire DOM is ready. Is it possible to do this without the $ ready handler?
EDIT2: Please assume above is located in <head>
RESOLUTION: From the advice given, I was able to resolve the issue. The $(function(){}) ready handler was removed, with the #certification element appearing before the jquery. The #certification element and jquery were both moved from the <head> to the <body>, where it should be. Now the jquery displays before the rest of the DOM is ready, as intended. Thanks all for your answers.
Is it possible to remove the two $() aka ready handlers from the script below? I'd like to load the jquery before the DOM is ready, but still be able to refer to #certification.
$(function(){
$("#certification").multiselect({
minWidth: "500",
noneSelectedText: "Certification Testing: Start Time - End Time (EST):",
selectedText: function(numChecked, numTotal, checkedItems){
return 'Certification Testing: ' + numChecked + ' of ' + numTotal + ' checked';
}
});
});
EDIT: Please assume #certification appears before the above script (in <head>). I'd like to refer to #certification from the script before the entire DOM is ready. Is it possible to do this without the $ ready handler?
EDIT2: Please assume above is located in <head>
RESOLUTION: From the advice given, I was able to resolve the issue. The $(function(){}) ready handler was removed, with the #certification element appearing before the jquery. The #certification element and jquery were both moved from the <head> to the <body>, where it should be. Now the jquery displays before the rest of the DOM is ready, as intended. Thanks all for your answers.
-
2
"the two
$()aka ready handlers" - There's only one ready handler in your script. – nnnnnn Commented Oct 10, 2013 at 20:46 - if "Please assume above is located in <head>" than how "#certification appears before the above script."? – Yair Nevet Commented Oct 10, 2013 at 20:50
- you can't have divs inputs etc in the <head>.... – Kevin B Commented Oct 10, 2013 at 21:00
6 Answers
Reset to default 5The #certification element needs to exist in order to select it. You should be able to put the script after the definition of the element and be ok.
OK:
<script>
$(function(){
$('#certification').whatever();
});
</script>
<div id="certification"></div>
NOT OK:
<script>
$('#certification').whatever();
</script>
<div id="certification"></div>
OK:
<div id="certification"></div>
<script>
$('#certification').whatever();
</script>
It depends on exactly what you're trying to do, a little more context would help. it's however worth noting that if you have that JS snippet in the head section (I'm assuming that's where you want to put it based on 'before DOM loads'), #certification will not exist as that refers to a DOM element with ID 'certification'.
More information on exactly what you're trying to do would help advise better.
What I would remend is to make your block a function and call that on DOM ready as such:
function doMultiSelect(elem) {
elem.multiselect({
minWidth: "500",
noneSelectedText: "Certification Testing: Start Time - End Time (EST):",
selectedText: function(numChecked, numTotal, checkedItems){
return 'Certification Testing: ' + numChecked + ' of ' + numTotal + ' checked';
}
});
}
and then you can call it on DOM ready with
$(function() {
doMultiSelect($("#certification"));
});
I just saw your clarification. Do:
<div id="certification""></div>
<script> $("#certification").multiselect.......</script>
That should work just fine
No you cannot. Elements will not be available till the DOM is ready. or move the script after the element #certification. in your code. $(function(){}); makes sure that your script referring to the elements run fine (since the ready callback gets executed only when the document is ready), no matter where it is placed.
if you refer to the element via $('#certification') outside document.ready or before the element in DOM it just won't pick the element, same is the case with any selector,except for event delegation where you bind the event to the document head to be delegated to any matching selector(which is a different animal altogether)because document head is something you can refer to all the time.
one universal way is to poll for element availability, and defer until it's there:
(function doit(){
var fields= $("#certification");
if(!fields.length){return setTimeout(doit, 50);}
fields.multiselect({
minWidth: "500",
noneSelectedText: "Certification Testing: Start Time - End Time (EST):",
selectedText: function(numChecked, numTotal, checkedItems){
return 'Certification Testing: ' + numChecked + ' of ' + numTotal + ' checked';
}
});
}());
i would prefer to use an event or a delegated observer, but this will work if you can't order the tags in an optimal way.
I'd like to load the jquery before the DOM is ready, but still be able to refer to #certification
How e?
The #certification is part of the DOM, how do you want to refer it before it's loaded?
If you'll run your script after the element deceleration is will make sense.
"Is it possible to remove the two
$()aka ready handlers from the script below?"
Your script contains only one ready handler, but yes, it can be removed.
"Please assume
#certificationappears before the above script. I'd like to refer to#certificationfrom the script before the entire DOM is ready. Is it possible to do this without the $ ready handler?"
Yes. Code in a script element can refer to elements that appear before that script, because elements higher up in the page source have already been parsed and added to the DOM. So if your script is after the element then you can simply do this:
$("#certification").multiselect({
minWidth: "500",
noneSelectedText: "Certification Testing: Start Time - End Time (EST):",
selectedText: function(numChecked, numTotal, checkedItems){
return 'Certification Testing: ' + numChecked + ' of ' + numTotal + ' checked';
}
});
"EDIT2: Please assume above is located in
<head>"
Huh? This contradicts your previous "Please assume" statement. How can the script be located in the head yet still be located after the #certification element? You are not supposed to include "regular" elements in the head section, just the title element plus base, link, meta, style or script elements as appropriate. If you do include #certification in the head it may work in some browsers, but it's not a good plan.
The rule isn't really very plicated. In order for any given script to refer to an element the script must run after the element has been added to the DOM. So either:
- include the script element after the element(s) it references
- include the script in a DOM ready (or onload) handler
- both of the above
Note that you can include multiple script blocks on the page, so you can include just the $("#certification").multiselect({...}) part in its own script element located immediately after the #certification element and then include other scripts somewhere else (e.g., in a DOM ready handler in the head, or at the end of the body just before the closing </body> tag).
EDIT: From some ments you posted under another answer, "Won't the $ entail waiting for the DOM to finish loading still?" and "So I can't avoid using the $() ready handler? Is there no way to write jquery without it?", and the fact that in your original question you talked about having two "$() aka ready handlers", it seems that you have misunderstood what the $() function does.
$() is just an alias for jQuery(), and creates a DOM ready handler only when passed a function as an argument. When you pass a string, as in $("#certification") that is nothing to do with creating ready handlers.