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:
- template A
- template B
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.
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: