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