Menu
I am using a web application framework (Symfony 1.3.6), which follows the MVC pattern.
The view layer is comprised of a template decorator. The template file may also include other templates - this is what gives rise to my question.
Assuming that there is a page (lets call it the 'homepage'), which is comprised of several templates - (the code has been refactored out so the 'sub templates' can be used on other pages.
As a result of the refactoring, the small templates - which are used by the main template - ('homepage' in our example), need to contain their jQuery related code.
lets say the homepage template uses 2 'sub templates:
assume that template A consists of the following snippet:
<div id="field1">This is field 1</div>
<script type="text/javascript">
$(document).ready(function(){
$('#field1').click(function(){
alert('Field 1 clicked!');
});
</div>
</script>
assume that template B consists of the following snippet:
<div id="field2">This is field 2</div>
<script type="text/javascript">
$(document).ready(function(){
$('#field2').click(function(){
alert('Field 2 clicked!');
});
</div>
</script>
Now the template 'homepage' looks like this:
<html>
<head>
<title>Multiple jQuery snippet test</title>
<script src="path_to_jquery"></script>
</head>
<body>
<div>include_template('template A')</div>
<div>include_template('template B')</div>
</body>
</html>
I have tried this - and to my suprise, it worked in that there was only one $(document).ready() in the merged, final page ('homepage).
I am not sure if either my Browser (Firefox) or the web framework (Symfony), had done some 'cleaning up' behind the scenes.
So my question is that what is the best way to proceed if you want to refactor jQuery functionality into 'little reusable templates' that can be reused to provide the same functionality in different pages?
BTW, I hope no one suggests writing a jQuery plugin, as that is SO not what I'm talking about.
500
Can we add more than one 'document. ready' function in a page? Yes we can do it as like I did in below example both the $(document).
$( document ).ready()A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
Multiple $(document). It's great to be able to group your functions within a file or even across multiple files, and jQuery's flexible $(document). ready() function allows you to do that, pain free.
There are no problems with multiple $(document).ready() calls, only a couple of caveats:
$(document).ready() will not be visible in any others. See this simple demo.Also see this previous question on SO:
157
You can indeed use as many instances of $(document).ready() on a page as you like. You can group your blocks of initialization code in whichever way makes the most sense for your application. What you gain in flexibility you may lose a bit in clarity, though, since it's no longer as easy to see what happens when onLoad fires.
References: jQuery Tutorial on Multiple $(document).ready()
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
