CODEWITHSUNDEEP
jqueryprototypejs
Man Of God
Man Of God

Reputation: 784

How to solve Jquery noconflict when it still shows $ is not a function with prototype js

I am developing a page where I will have to use Jquery in noconflict mode along side prototypejs. I have put jquery in no conflict mode many times successfully but this time i am still getting the error

TypeError: $ is not a function prototype.js:7126:29

which means Jquery noconflict is still not releasing the dollar variable for prototypejs.

I tried 

<script  src="js/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var jQuery=$.noConflict();
</script>

<script src="js/prototype/prototype.js" type="text/javascript"></script>

I got the same error then i went with 

<script  src="js/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$.noConflict();
</script>

<script src="js/prototype/prototype.js" type="text/javascript"></script>

and finally with

<script  src="js/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>

<script src="js/prototype/prototype.js" type="text/javascript"></script>

For each of them i am still getting the same error.

How to solve Jquery noconflict when it still shows $ is not a function with prototype js ?

Upvotes: 0

Views: 2592

Answers (1)

Makarand Patil
Makarand Patil

Reputation: 1001

The code you are trying is correct. I can see the only problem here is that the either or both jQyery and prototype file you are loading is not loaded due to some reason. Maybe the path is not correct. Try using CDN as given below in Code Snippet which is working as expected.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var $j=$.noConflict();
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js" type="text/javascript"></script>
<div id='mainDiv'>
This is a Div
</div>

<script type="text/javascript">
//prototype js code for selecting Div with id='mainDiv'
console.log($('mainDiv'));

//jQuery document ready function
$j(document).ready(function(){
	console.log('jQuery Document ready Function');
});
</script>

Upvotes: 1

Related Questions