CODEWITHSUNDEEP
javascriptjquery
Sam Jefferies
Sam Jefferies

Reputation: 594

Ensure second script loads only after the first

Jquery is loading after a custom plugin (elevateZoom). Causing the elevateZoom to fail.

Is there a workaround for this?

Please note: Due to policy I can only change the body text. 

<script type="text/javascript" src="/sites/default/files/jquery.elevateZoom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    $("#zoom_01").elevateZoom(); 
  }); 
</script>

<p>
  <img id="zoom_01" alt="" data-entity-type="" data-entity-uuid=""
       data-zoom-image="/sites/default/files/2017-06/Ipad-with-loupe.png"
       src="/sites/default/files/2017-06/Ipad-with-loupe-small.png" />
</p>

The error message in console is the following:

Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' 'unsafe-inline'

Live link - https://www.workbooks.com/test-jquery-zoom

Upvotes: 0

Views: 190

Answers (2)

jsalonen
jsalonen

Reputation: 30531

your website has a Content Security Policy that prevents you loading jQuery from CDN.

The live site you linked has the following signature for Content-Security-Policy header:

Content-Security-Policy:script-src 'self' 'unsafe-eval' 'unsafe-inline' https://www.youtube.com/ https://maps.googleapis.com ; object-src 'self'

You either need to add ajax.googleapis.com domain to that policy or host jQuery in one of the sites thats already whitelisted.

Upvotes: 1

Charan Putrevu
Charan Putrevu

Reputation: 84

Give the script tags in this order

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="/sites/default/files/jquery.elevateZoom.min.js"></script>

This makes the browser to load jquery first and then the plugin next. You can try using requirejs library. It can load the js files asynchronously and has the feature of loading the dependencies first and the plugins next.

Upvotes: 0

Related Questions