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>
Related
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!" );
});
Right I have seen many threads about this problem but my problem is still unresolved. I have the J query being loaded first at the top of the scripts. Like so:
<asp:Content id="Content1" ContentPlaceholderID="ChildContent1" runat="server">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="/Scripts/shapefile.js"></script>
<script src="http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-compressed.js"></script>
<script src="http://spatialreference.org/ref/epsg/27700/proj4js/"></script>
<script src="/Scripts/WebForms/map.js"></script>
<script src="/Scripts/dbf.js"></script>
<script src="/Scripts/stream.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
I have two javascript files which use Jquery but only the map.js works with it and $ is defined. However in the shapefile.js when I use $, it is not defined. I am very confused. below is the code from the shapefile.js
$(document).ready(function () {
$("#SHPError").modal("show");
});
Any ideas what could be wrong
As a practice jQuery should be added as the top most script. That might be a problem here. If OpenLayer is a jQuery library.
<asp:Content id="Content1" ContentPlaceholderID="ChildContent1" runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.min.js"></script>
<script src="/Scripts/shapefile.js"></script>
<script src="http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-compressed.js"></script>
....
....
If jQuery is included and the request doesn't throw a 404 or another HTTP error (check your console) then it is most likely, that there is a jQuery object but not a $.
You could try one of the two:
jQuery(document).ready(function ($) {
$("#SHPError").modal("show");
});
// or
jQuery(document).ready(function () {
jQuery("#SHPError").modal("show");
});
I am using multiple jquery libraries in my website.
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var jQuery_1_11_3 = $.noConflict(true);
</script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="https://s3.amazonaws.com/legalzoom-marketplace/js/touch.js"></script>
I use Jquery 1.7.2 to make Jquery sortable work for mobile as per this. Because of this my bootstrap JS is not working, I have added the below code to remove make bootstrap work.
var jQuery_1_11_3 = $.noConflict(true);
and I am trying to show modal using
jQuery_1_11_3('.modal').modal('show')
but it doesn't seem to work. It throws the error below Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher. Any help will be much appreciated.
You must agree that You're doing wrong. Better to find and fix issue, than play with 2 big libraries.
I'm not sure but hope it helps:
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
var jQuery_1_7_2 = $.noConflict();
</script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var jQuery_1_11_3 = $.noConflict();
</script>
<script type="text/javascript">
(function($) {
$(function(){
// some other operations
});
}(jQuery_1_7_2));
</script>
<script type="text/javascript">
(function($) {
$(function(){
$('.modal').modal('show');
});
}(jQuery_1_11_3));
</script>
Reference: https://api.jquery.com/jquery.noconflict/
I'm using XSLT as my view layer and i want to include Jquery in my page so i did the following but with no mean the library still not working:
<script src="jquery-1.4.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">
alert("_______");
$(document).ready() {
alert("Jquery is working");
});
</script>
Note: the jquery-1.4.2.min.js file is in the same folder where my XSL file exist,
the strange thing i note is that the alert at the first line in the script is not working which means that the javascript at all is not working!! i tried that at chrome,firefox and IE with the same result.
try it like this
$(document).ready(function(){
alert("Jquery is working");
});
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
alert("_______");
$(document).ready(function () {
alert("Jquery is working");
});
</script>
WORKING DEMO
Try This:
<script src="jquery-1.4.2.min.js" type="text/javascript"></script> // remove this content
<script type="text/javascript">
alert("_______");
$(document).ready(function() {
alert("Jquery is working");
});
</script>
I found a solution here: https://raygun.com/blog/jquery-is-undefined/. I added this code <script>window.jQuery || document.write('<script src="path/to/your/jquery_file.js"><\/script>')</script> below before the </body> tag and succeeded in removing the "jQuery is not loaded / found" warning
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.