Error with jquery and libraries that use jquery

Question

Error with jquery and libraries that use jquery

Navigation

#1 by (1 votes)

0

I have a website where you use several libraries that use jquery:

nyroModal
timepicker
cleditor
...

The problem is that suddenly they have stopped working, and analyzing the browser console I get this:

TypeError: $(...).nyroModal is not a function[Saber más] index.php:190:3
TypeError: $(...).dialog is not a function[Saber más] index.php:1591:4
TypeError: $.widget is not a function[Saber más] jquery.ui.spinner.js:19:1
TypeError: $.ui is undefined[Saber más] jquery.ui.datetimepicker.js:26:1
TypeError: $.timepicker is undefined[Saber más] script.js:542:4
TypeError: $.browser is undefined[Saber más] jquery.maskedinput.js:8:6
TypeError: $.browser is undefined[Saber más] jquery.cleditor.js:156:3
TypeError: $(...).not(...).checkbox is not a function[Saber más] script.js:842:4
TypeError: "$(...).dialog is not a function"

It's like the Jquery library has stopped working.

The library called it this way:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.8.2.js"><\/script>')</script>
<!-- Do the same with jQuery UI -->
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script>window.jQuery.ui || document.write('<script src="js/libs/jquery-ui-1.9.1.js"><\/script>')</script>

<!-- Do the same with Lo-Dash.js -->
<!--[if gt IE 8]><!-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/0.8.2/lodash.js"></script>
<script>window._ || document.write('<script src="js/libs/lo-dash.js"><\/script>')</script>
<!--<![endif]-->
<!-- IE8 doesn't like lodash -->
<!--[if lt IE 9]><script src="http://documentcloud.github.com/underscore/underscore.js"></script><![endif]-->

<!-- Do the same with require.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.0.6/require.js"></script>
<script>window.require || document.write('<script src="js/libs/require-2.0.6.min.js"><\/script>')</script>

<link rel="stylesheet" href="css/nyroModal.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.nyroModal.custom.js"></script>
<script type="text/javascript">
$(function() {
$('.nyroModal').nyroModal();
});
</script>

javascript jquery html

asked by Alberto Mier 08.06.2018 в 12:15

source

1 answer

local variable referenced before assignment error when creating a reactive project using npx

score 1 · Answer 1

I get the impression that you are overcomplicating things using the window.variable || document.write(...) method. First try using the contents of the CDN before putting those fallbacks.

The following example worked for me without problems (I had to use a version of the plugin that I found in any site with https)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/0.8.2/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.0.6/require.js"></script>
<link rel="stylesheet" href="https://www.artofliving.org/sites/all/libraries/jquery.nyroModal/styles/nyroModal.css" type="text/css" media="screen" />
<script  src="https://www.artofliving.org/sites/all/libraries/jquery.nyroModal/js/jquery.nyroModal.custom.min.js"></script>

<a href="https://upload.wikimedia.org/wikipedia/commons/2/2e/HTTPS_Everywhere_logo.jpg" class="nyroModal" title="3rd Street Promenade">Pínchame para ver una imagen</a>


<script type="text/javascript">
$(function() { $('.nyroModal').nyroModal(); });

</script>

Now, I see that you are asking require.js . That library is precisely to load your dependencies in order establishing which depends on which one. You could require the jquery plugins stating that jQuery must first be loaded