Jquery slider doesn't work with own jQuery variable

Question

I am creating a widget that will eventually sit on a clients site, and I need to create my own jQuery variable, so that the jquery versions don't conflict. Currently I have the following code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> // Clients own jquery.

<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script> // My jQuery.
<script type="text/javascript">
    var $sf_jquery = $.noConflict(true);
</script>

Everything else works just fine, but jQuery slider stopped working when I changed to my own jquery:

TypeError: $sf_jquery(...).slider is not a function

Is the problem with the jQuery slider, or am I missing something else here?

Good plain javascript slider -tips are welcome as well!

Edit: Everything the widget needs, is inside function call like this:

$sf_jquery(function(){ // all of the code here });

Edit: The jQuery Ui is imported aswell. Just forgot to add it here. The importing looks like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> // Clients own jquery.

<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    var $sf_jquery = $.noConflict(true);
</script>
<script type="text/javascript" src="sf_content/js/jquery-ui.min.js"></script>

Edit, Solution! Dummy me didn't think that the slider isn't part of the native jQuery. The noConflict must be after the jQueryUI, like this:

<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="sf_content/js/jquery-ui.min.js"></script>
<script type="text/javascript">
    var $sf_jquery = $.noConflict(true);
</script>

where is your slider initializing code – Pranav C Balan Jun 10 '15 at 09:13 — Pranav C Balan, Jun 10 '15 at 09:13

score 1 · Accepted Answer · answered Jun 10 '15 at 09:20

1

You aren't including jQueryUI code (at least in your example).

Slider is part of jQueryUI and is not native to jQuery alone. (https://jqueryui.com/slider/)

answered Jun 10 '15 at 09:20

Jamie Barker

8,145
3
29
64

1

Problem solved once again! Thanks a lot buddy! Added the working code to the question for others to see. – GotBatteries Jun 10 '15 at 09:28

score 0 · Answer 2 · answered Jun 10 '15 at 09:14

0

Your "noconflict" function must be called before the second jQuery call.

answered Jun 10 '15 at 09:14

Thibault Henry

816
6
16

Tried it, doesn't work, and this suggest something else: http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page – GotBatteries Jun 10 '15 at 09:20

Jquery slider doesn't work with own jQuery variable

2 Answers2