Dealing with prototype and jQuery including external js files in the same page

StackOverflow https://stackoverflow.com/questions/23344669

سؤال

I am working on an integration issue, dealing with an old website that has many scripts based on prototype. I have to integrate it into an external website's template that uses a script (let's call it external-jquery-script.js) on which I have no control, that uses jQuery.

external-jquery-script.js uses the $ operator, and obviously the script conflicts with prototype. The issue is specifically with a function in external-jquery-script.js (let's call it externalFunction()) that is needed in order for the template to work properly.

I can not change the external template, but I can just fill in the available placeholders.

In the page resulting from the integration, I have the following:

<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 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/script.js"></script>
...
  <!-- my page's stuff - end -->
... <!-- other contents... --> ...
</html>

Now, I tried redeclaring externalFunction() in my script.js, but still it doesn't work.

I redeclared it as follows:

(function($){
window.externalFunction = function(){
... //copied as is from external-jquery-script.js
}
})(jQuery);

I have two questions:

  1. Is there a way to include external-jquery-script.js telling the script to use the $ operator as jQuery operator?
  2. If the answer to the first question is "No", how would you suggest me to solve this problem?
هل كانت مفيدة؟

المحلول

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>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top