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");
});
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!" );
});
I am currently experiencing the following errors, while debugging my client-side code using web-browser:
TypeError: $ is undefined
ReferenceError: $ is not defined
In the in the "Network" tab, of the debugger, it shows the JQueries scripts as "404". Does this indicate my Jqueries are not being render/initialized
This is my client-side code:
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.signalR-2.1.0.min.js"></script>
<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub.
var notifications = $.connection.NotificationHub;
// Create a function that the hub can call to broadcast messages.
notifications.client.recieveNotification = function (role, descrip) {
// Add the message to the page.
$('#spanNewMessages').text(role);
$('#spanNewCircles').text(descrip);
};
// Start the connection.
$.connection.hub.start().done(function () {
alert("Preparing to send notifications...");
notifications.server.sendNotifications();
alert("Notifications have been sent.");
}).fail(function (e) {
alert(e);
});
//$.connection.hub.start();
});
</script>
<h1>New Notifications</h1>
<div>
New <span id="spanNewMessages"></span> role.<br />
New<span id="spanNewCircles"></span> descrip.<br />
</div>
Updated Jquery Scripts:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
Any help would be very helpful. Thank you
$ is an alias of jQuery. Your jquery script has to be included in your page if you want to use it.
As long as your jQuery script returns 404, you won't be able to use it. To help you, you could load the script from the jQuery website.
Replace this line :
<script src="Scripts/jquery-1.10.2.min.js"></script>
with this one :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
A good practice on a website is to load jQuery from the Google cdn as it will be most likely cached as many websites use it :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Another thing you can do to ensure that your script will do well is to make sure that there is no conflict with other scripts. Add this at the begining of your code :
jQuery.noConflict();
Make sure that you replace every $ with jQuery.
Example :
$('#spanNewMessages').text(role);
will become :
jQuery('#spanNewMessages').text(role);
If it does not work, remove all your code and just try to display alert(jQuery("h1").text()); like this :
jQuery(function () { alert(jQuery("h1").text()); });
The order of your script tags is wrong. You need to load jquery before jquery.signalr:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
<script type="text/javascript">
Many thanks to all, for your suggestion and help.
I manage to get the issue resolved through using the Scripts as the following below:
<script src="../Scripts/jquery-1.10.2.min.js"></script>
<script src="../Scripts/jquery.signalR-2.1.0.min.js"></script>
<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
I have a very simple page with static JS lib references.
<!DOCTYPE html>
<html>
<head>
<title>some title here</title>
<link rel="stylesheet" type="text/css" href="//SOMESERVER.com/1.0.4815/css/public.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="//SOMESERVER.com/1.0.4815/css/publicIE8.css" />
<script src="//SOMESERVER.com/1.0.4614/js/json2.js"></script>
<![endif]-->
<script type="text/javascript">
window.qbaka || (function(a,c){a.__qbaka_eh=a.onerror;a.__qbaka_reports=[];a.onerror=function(){a.__qbaka_reports.push(arguments);if(a.__qbaka_eh)try{a.__qbaka_eh.apply(a,arguments)}catch(b){}};a.onerror.qbaka=1;a.qbaka={report:function(){a.__qbaka_reports...
</script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="//SOMESERVER.com/1.0.4815/js/knockout.js"></script>
<script type="text/javascript" src="//SOMESERVER.com/1.0.4815/js/colorbox.min.js"></script>
<script type="text/javascript" src="//SOMESERVER.com/1.0.4815/js/public.js"></script>
<script type="text/javascript">
var user = {};
user.loggedIn = false;
user.displayName = '';
user.dateFormat = '';
user.timeFormat = '';
// bit more very simple code here
</script>
<script type="text/javascript">
$(document).ready(function () {
//correct code here
});
</script>
Code works perefectly for me and for QA team. But since I use QBAKA for logging JS errors - I got around 50 errors (different browsers, IPs, timezones, datetimes) that tells me:
Unknown variable or function '$'
in line with
$(document).ready(function () {
I always thought that libraries executes in order of appearance, so if I include reference to jQuery, I am sure that I can access immediately - without any try-catch or other stuff.
How it is possible? jQuery library (from google server) is not available and this JS lib is not loaded and code executes further? Any ideas?
if you using some other custom plugin in your page so it may be conflicts with $ (i.e Jquery)
try $.noConflict()
jQuery.noConflict();
(function( $ ) {
$(function() {
// More code using $ as alias to jQuery
});
})(jQuery);
links :
http://api.jquery.com/jquery.noconflict/
http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
Thanks,
Siva
try this
<script type="text/javascript">
$(document).ready(function () {
//correct code here
});
</script>
instead of
<script type="text/javascript">
$(document).ready(function () {
//correct code here
}
</script>
you have not call your $(document).ready function properly.
That error can caused by :
Your jquery file is not being properly loaded into your page.
or
<script type="text/javascript">
$(document).ready(function () {
)};
</script>
is executing earlier than jquery file is loaded.
For example try this
<script src="https://c15123524.ssl.cf2.rackcdn.com/jquery.min.js"></script>
instead of
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and check.
Check by view source if the jquery is loading properly or not .
Try to download the jquery file and use it from your local server.
I am using Laravel-4-Bootstrap-Starter-Site. I have this issue loading javascript files: Error: Popover requires tooltip.js It seems that is not causing majors problems but I am losing functionality.
Checking source code we can see that popover is loaded first and before than tooltip file.
<!-- Javascripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/popover-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/tab-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/alert-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/transition-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/modal-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/scrollspy-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/carousel-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/dropdown-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/tooltip-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/collapse-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/button-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/affix-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/wysihtml5/wysihtml5-0.3.0-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/wysihtml5/bootstrap-wysihtml5-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/datatables-bootstrap-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/datatables.fnReloadAjax-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/jquery.colorbox-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/prettify-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/jquery.uploadfile-88e9f41770fc597c379b2a75086bcb0f.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/common-75a4c5198cfe0c4468991a6000253513.js"></script>
<script type="text/javascript">
$('.wysihtml5').wysihtml5();
$(prettyPrint);
</script>
Question: is there a way to solve this issue?
I have had the same problem. The reason that happens is because basset loads the resources in order by name. and since p comes before t obviously it gets loaded afterwards coming up with the error. Hacking your way around the problem simply rename tooltip with to atolltip in vendors/twbs/bootstrap/js or instead requiring the directory to load the files in basset config you require each single js file in the order you want. The second option i did not test but should work.
I have written an exernal js file and in it is one function. In this function I am trying to call $.mobile.showPageLoadingMsg(); How would I do this? I have tried the following and it doesnt work:
function test() {
$.mobile.showPageLoadingMsg();
}
The order of script inclusion on the html is shown below:
<script src="jquery.mobile-1.1.1.min.js"></script>
<script src="jquery-1.7.2.min.js"></script>
<script src="cordova-2.0.0.js"></script>
<script src="master.js"></script>
and master.js is the one that makes the call.
You have to load the jQuery library before the jQuery mobile library.
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
<script src="cordova-2.0.0.js"></script>
<script src="master.js"></script>
jQuery min javascript file before mobile.js ok?
view: http://jsfiddle.net/7fxQf/24/