Develop Reference

What causes this: Uncaught TypeError: $ is not a function?

I know that this question has already been asked a lot, but none of the solutions suggested worked for me.
I think the problem lies within the jQuery references, but I lack the knowledge to know what is wrong.
Here's the references:
<script src="/tools/scripts/apps/cpc.js"></script>
<script src="/tools/Scripts/tools/jquery/v2_1_4/jquery-2.1.4.min.js"></script>
<script src="/tools/scripts/tools/jqueryui/jquery-ui.min.js"></script>
<script src="/tools/scripts/tools/jqgrid/js/i18n/grid.locale-de.js"></script>
<script src="/tools/scripts/tools/jqgrid/js/jquery.jqGrid_5_3_0.min.js"></script>
<script src="/tools/scripts/tools/jqgrid/js/jszip.min.js"></script>
<script src="/tools/Scripts/tools/date.js"></script>
<script src="/tools/scripts/apps/3rdParties/startPage3rdParties.js"></script>
<script src="/tools/Scripts/tools/jquerymap/dist/jquery.vmap.min.js"></script>
<script src="/tools/Scripts/tools/jquerymap/dist/maps/jquery.vmap.world.js"></script>
This is the codepart where it says jQuery is not a function:
jQuery(document).ready(function($){
// $("#sideNavBox").hide();
//$("#contentBox").css("margin-left:20px!important;");
writeAction();
writeTabs();
$("#DeltaPlaceHolderPageTitleInTitleArea").html("Counterparties");
$(".ms-webpartPage-root").css("border-spacing", "0px");
$(".ms-breadcrumb-top").hide();
$(".ms-mpSearchBox").hide();
//$("#titleAreaRow").hide();
$("#Ribbon.ListForm.Display.Manage.EditItem-Large").hide();
$("#fullscreenmode").click().trigger("click");
// startAutoLaunch();
});
I tried replacing jQuery with $, but it didn't change anything.
I also tried to define
var jQ = jQuery.noConflict(true);
and using jQ(document).ready(function($){
but that didn't work either.
Can someone help me with this issue?

The order in which your scripts are loaded matters. Try to put jquery library first and all its dependencies:
<script src="/tools/Scripts/tools/jquery/v2_1_4/jquery-2.1.4.min.js"></script>
<script src="/tools/scripts/tools/jqueryui/jquery-ui.min.js"></script>
<script src="/tools/scripts/tools/jqgrid/js/i18n/grid.locale-de.js"></script>
<script src="/tools/scripts/tools/jqgrid/js/jquery.jqGrid_5_3_0.min.js"></script>
<script src="/tools/scripts/tools/jqgrid/js/jszip.min.js"></script>
<script src="/tools/Scripts/tools/date.js"></script>
<script src="/tools/scripts/apps/3rdParties/startPage3rdParties.js"></script>
<script src="/tools/Scripts/tools/jquerymap/dist/jquery.vmap.min.js"></script>
<script src="/tools/Scripts/tools/jquerymap/dist/maps/jquery.vmap.world.js"></script>
<!-- your script should be last -->
<script src="/tools/scripts/apps/cpc.js"></script>
Also from the docs:
// Shorthand for $( document ).ready()
$(function() {
console.log( "ready!" );
});

jquery - How to resolve two jquery conflict

I have a page which includes two jquerys one for slider other for populate dropdawn.The problem is when I put both of them my jqueries are not working together.What should i do?
My index:
<!-- JAVASCRIPTs for slider -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/comment-reply.js"></script>
<script type="text/javascript" src="js/jquery.quicksand.js"></script>
<script type="text/javascript" src="js/jquery.tipsy.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.cycle.min.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>
<script type="text/javascript" src="js/jquery.eislideshow.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="js/jquery.aw-showcase.js"></script>
<script type="text/javascript" src="js/layerslider.kreaturamedia.jquery-min.js"></script>
<script type="text/javascript" src="js/shortcodes.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="js/jquery.tweetable.js"></script>
<script type="text/javascript" src="js/slider-layer.js"></script>
<!-- JAVASCRIPTs for dropdawn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('change','.productcategory',function(){
console.log("hmm its change");
var cat_id=$(this).val();
var div=$('#d').parent();
var op=" ";
$.ajax({
type:'get',
url:'{!!URL::to('findProductName')!!}',
data:{'id':cat_id},
success:function(data){
//console.log('success');
//console.log(data);
console.log(data.length);
op+='<option value="0" selected disabled></option>';
for(var i=0;i<data.length;i++){
op+='<option value="'+data[i].id+'">'+data[i].model+'</option>';
console.log(data[i].model);
}
div.find('.productname').html(" ");
div.find('.productname').append(op);
},
error:function(){
}
});
});
});
</script>
I try to add
<script type="text/javascript">
var jQuery = $.noConflict(true);
</script>
but when add this in the end of bouth script then slider work and dropdown not, and when not add this code for conflict works dropdown and slider doesn't work.
I use next links:
Can I use multiple versions of jQuery on the same page?
http://jsfiddle.net/PGLVs/
Any ideas of what I'm doing wrong?

Basically you should release release $ or jQuery variable for newer versions so add noConflict between both versions as below. This will make $ alias available for newer version.
<script src"olderversion"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src"newerversion"></script>
If in case you have to call any plugin with lot of lines using $ or jQuery using old versions you can folow below approach.
jQuery.noConflict();
(function( $ ) {// if you want to use $
$(function() {
// More code using $ as alias to jQuery
});
})(jQuery);
// Other code using $ as an alias to the other library
jQuery.noConflict();
(function( jQuery ) {// if you want to use $
$(function() {
// More code using jQuery as alias to jQuery
});
})(jQuery);
Please mark it as answer if it meets your requirement.

a quick example:
in the head:
<script type="text/javascript" src="/jqueryV1.js"></script>
<script type="text/javascript">
var $myJQ = jQuery.noConflict();
</script>
<script type="text/javascript" src="/jqueryV2.js"></script>
<!-- the version 2 in now in $ while the 1 is in $myJQ -->
code that uses version 2 can keep the global $.
Now in the rest of your code, you could simply replace all the $ by $myJQ where the version 1 is used, but it means rewriting all, what you can do instead is to use an argument that acts as a local var, to be able to keep $ in the code that uses version 1:
(function($){
//inside this function, using $ means using the global $myJQ
$('#selector')...
})($myJQ);

Javascript $ is not defined with document.ready

I have the following code, and I'm getting a "$ is not defined" result with the document.ready script not working correctly. I've looked up many different questions of this online, and I cannot figure it out.
<script src="scripts/jquery-3.1.0.js"></script>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/jquery.mobile.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
$(document).ready (function() {
$( "body>[data-role='panel']" ).panel();
});
</script>

Try This
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "body>[data-role='panel']" ).panel();
});
</script>

need to use jquery-1.min.js and jquery.min.js together

I need to use both below files but just one of the can work if both of the use in pae
<script src="jquery.min.js"></script>
<script src="jquery-1.min.js"></script>//just this work
Or if change order
<script src="jquery-1.min.js"></script>
<script src="jquery.min.js"></script>//just this work
I use a drag and drop plugin , this need jquery.min.js and my theme need to jquery-1.min.js for be responsive

You should be able to do this when you use noConflict.
<!-- load jQuery-1 -->
<script type="text/javascript" src="jquery-1.min.js"></script>
<script type="text/javascript">
var jQuery_1_min = $.noConflict(true);
</script>
<!-- load jQuery -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var jQuery_min = $.noConflict(true);
</script>
Now whenever you need one of these files you can do this.
//example
$jQuery_min('.selector').live('click', function(){
//do something
});
If it still wont work I dont know anymore... This is the way everybody does it. Quick google search.

Why does prototype.js interfere with unrelated javascript operations?

Building a website. When I order my tags like this, LightCycle works but Lightbox doesn't:
Lightcycle works, Lightbox doesn't:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/prototype.js"></script>
When I order it like this, Lightbox works but LightCycle doesn't:
Lightbox works, LightCycle doesn't:
<script type="text/javascript" src="./js/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Frustrating.

You're having a conflict because both libraries use the $ shortcut. Look into the noconflict feature of jQuery or the equivalent of prototype.
You can read more here: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Because they use the same $ shorthand.
Try the following:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="./js/prototype.js"></script>

Does a call to jQuery.noConflict() fix it? You can also give jQuery an alias within your on functions if you miss the $ shortcut:
var $j = jQuery.noConflict();
References:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
http://samsami2u.wordpress.com/2009/03/14/prototypejs-jqueryjs-conflict-and-resolution/

So using Surreal Dreams recontamination, I implemented this:
<script src="./prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
$j("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
<script type="text/javascript" src="./js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="./js/lightbox.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.lite.1.0.min.js"></script>
<script type="text/javascript">
$(function() {
$('#slideshow1').cycle({
delay: 2000,
speed: 1000,
});
});
</script>
The next question that springs to mind is what to replace 'someid' with. I'm assuming '#slideshow1'. But what displays when I do this is just a plain black page. Annoying.