Within my php app I have multiple templates that get combined to form a single page. so say your on the about us page, the template would look like this
<?php
$this->render("header.php");
?>
my about us page
<?php
$this->render("footer.php");
?>
which is just a fancy way of doing an include(). However, header.php has some javascript that gets ran on document.ready via the jquery framework, and so does the page that requires the header. so you have something like this
<?php
$this->render("header.php"); // has its own $(document).ready
?>
<script type="text/javascript">
$(document).ready(function(){
console.log("test");
});
</script>
my about us page
<?php
$this->render("footer.php");
?>
The bug that I'm experiencing is that document.ready is getting called once for every document.ready on the page. in the above case console shows
test
test
If I comment out the rendering of header.php, the document.ready gets called just once like I want.
Besides using a semaphore, is a better way to prevent this? I tried buffering the output, but that doesn't seem to work.
Edit: added final output per request
<script type="text/javascript">
$(document).ready(function(){
// do some javascript like highlighting
// form elements with specific classes
});
</script>
display header here
<script type="text/javascript">
$(document).ready(function(){
console.log("test");
});
</script>
my about us page
display footer