TypeError: 'undefined' is not a function (evaluating '$(document)')

Use jQuery's [`noConflict`][1]. It did wonders for me

var example=jQuery.noConflict();
example(function(){
example('div#rift_connect').click(function(){
example('span#resultado').text("Hello, dude!");
});
});

That is, assuming you included jQuery on your HTML

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


[1]:

[To see links please register here]

;(function($){
// your code
})(jQuery);
Place your js code inside the closure above , it should solve the problem.

I have also faced such problems many time in web develoment carrier. Actually its not JS conflict, When we load html website to the browser we face no such error, but when we load these type of website through localhost we face such problem. That's because of localhost. When we load scripts through the localhost it scans the script and renders the output. But when we didn't use localhost. It just scan the output. Example, when we write php code putside the localhost and run without host we get error. But if the code is correct and is run through host we get actual output, and when we use inspect element we get the output code in HTMl format but not in PHP format this is because of rendering of the code.

This is rendering error. So to fix these jquery code error one of the solution may be using this method.

jQuery(document).ready(function($){
/******** Body of Jquery Code*****/
});



What this code does is register '$' as the varible to the function by applying jquery. Else by default the .js file is only read as javascript.

I would use this

(function ($) {
$(document);
}(jQuery));

You can pass $ in function()

jQuery(document).ready(function($){

// jQuery code is in here

});

or you can replace `$(document);` with this `jQuery(document);`


or you can use `jQuery.noConflict()`

var jq=jQuery.noConflict();
jq(document).ready(function(){
jq('selector').show();
});