I found a solution to my problem, that I'll share here.
Since I could not change the template, except for the "my page's stuff" area, I decided to override the jQuery part of the template, downloading automatically the script, through a cron, and replacing automatically the jQuery calls with a prototype/conflict-safe version, including the fixed script in the page, after the original version.
Now, since the script added a listener $(document).ready
, I also had to replace it with a Prototype version, disabling (in a sense) the jQuery listener.
Here is the script that executes the automatic replacement ($1
represents the js script name, passed as a parameter):
#!/bin/bash
sed -i "s#\$(document)\.ready(#document\.observe(\'dom\:loaded\'\,#g" $1 ##THIS REPLACES $(document).ready with the prototype's equivalent
sed -i 's#\$(#jQuery(#g' $1 ##THIS REPLACES $( with jQuery(
sed -i 's#\$\.#jQuery\.#g' $1 ##THIS REPLACES $. with jQuery.
sed -i 's#(\$)#(jQuery)#g' $1 ##THIS REPLACES ($) with (jQuery)
before including this new script, I also added the following script, to avoid conflicts and to prevent the $(document).ready
to be fired:
<script>
<!--
jQuery = jQuery.noConflict(true); //After this jQuery is callable only throught the jQuery variable
jQuery.holdReady(true); //After this jQuery(document).ready stays pending, waiting for a jQuery.holdReady(false) that will never come, turning off the listener in the first jQuery script, that would cause problems otherwise
-->
</script>
So, I can now have the following, perfectly working, having both jQuery and Prototype in the same page, using an external template, including the fixed version of external-jquery-script.js
:
<html>
<!-- external template's stuff - begin -->
...
<script src="http://www.external-website.com/js/common/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://www.external-website.com/js/common/external-jquery-script.js"></script>
...
<!-- external template's stuff - end -->
<!-- my page's stuff - begin -->
...
<script>
<!--
jQuery = jQuery.noConflict(true);
jQuery.holdReady(true);
-->
</script>
<script type="text/javascript" src="http://www.my-website.com/js/prototype.min.js"></script>
<script type="text/javascript" src="http://www.my-website.com/js/external-jquery-script-fixed.js"></script>
<script type="text/javascript" src="http://www.my-website.com/js/script.js"></script>
...
<!-- my page's stuff - end -->
... <!-- other contents... --> ...
</html>