js file not loaded but next script executed? - javascript

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.

Related

jQuery not working with HTML or CSS

My code editor is throwing errors when I save this js file because of errors like:
-'$' was used before it was defined.
-Expected exactly one space between 'function and '('
This is what's in my JS file:
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 970) {
$('.navbar').addClass('navbar-fixed-top');
}
});
});
I am using HTML, CSS, and JS. I am trying to use the JQuery library but it is not being recognized by my html file. I am inserting it above my external .js file, so I don't think that is the issue. Here is what is in my HTML file:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
I am using the brackets editor, where the error is being thrown
Anyone know what the issue might be? Thanks in advance.
Below works fine for me.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
window.alert("Hello Jquery is Working....."); //put whatever you want to do here
});
</script>
</head>
<body>
</body>
</html>

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);

How resolve TypeErrors for SignalR

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>

JotForm conflict with JQuery

I am trying to use JQuery datepicker along with Jotform in my html page.
but it seems that jquery and jotform dont get along after all .
<script type="text/javascript" src="js/jquery.min.1.8.3.js"></script>
<script src="js/jotform.js" type="text/javascript"></script>
If i eliminate first line of above code the jotform works fine and if i eliminate the second line and keep first line the datepicker will work fine. (Jotform is an online form builder)
There is a conflict record since 2011 but i cant find if that is solved or not.
$(function() {
//-----------------------------------
// Show Picker
$('#startDate').datepicker({
showButtonPanel: true
});
//-----------------------------------
// Show Picker
$('#dueDate').datepicker({
showButtonPanel: true
});
});
The following is part of the section of my code
<link rel="stylesheet" type="text/css" href="css/jNotify.jquery.css" media="screen" />
<script type="text/javascript" src="js/jNotify.jquery.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jotform.js" type="text/javascript"></script>
<script type="text/javascript" src="js/ajax_load.js"></script>
<script type="text/javascript" src="js/validator.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc.js"></script>
<script type="text/javascript" src="scripts/calendar.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc-ar.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc-fa.js"></script>
<link type="text/css" href="styles/jquery-ui-1.8.14.css" rel="stylesheet" />
Any tip and help will be highly appreciated
Ok, this is too large to explain in a comment:
Using jQuery noConflict mode
http://api.jquery.com/jQuery.noConflict/
First, add the noConflict script after loading jQuery:
<!-- this is where you are loading jQuery -->
<script type="text/javascript" src="here/you/are/loading/jquery.js"></script>
<!-- and now lets enter in noConflict mode -->
<script type="text/javascript">
$.noConflict();
</script>
This way the $ function is "free" again so other lib can use it (the same name can't be used by two libraries, it's a global var so shit is going to happen).
Well, now on we won't be using $ for jQuery. If you want to use jquery, the new magic word is jQuery (yeah, very original), for example:
jQuery("#menu").show();
So, if you have to use datepicker, just replace $ with jQuery. For example:
jQuery('#startDate').datepicker({
showButtonPanel: true
});
Remember, the keyword $ is no longer attached to jQuery. So you have to use jQuery everywhere. Or you can also use a new alias, for example if you think jQuery is too large:
var j = jQuery.noConflict();
//and now we are going to use it:
j("#menu").show();
There are more examples here: http://api.jquery.com/jQuery.noConflict/
Just use self calling anonymous function and pass jQuery and catch it as $ in your code such as :
(function($){
$(function() {
//-----------------------------------
// Show Picker
$('#startDate').datepicker({
showButtonPanel: true
});
//-----------------------------------
// Show Picker
$('#dueDate').datepicker({
showButtonPanel: true
});
});
})(jQuery);
and modify jquery script inclusion as such(same as TheBronx suggested):
<!-- this is where you are loading jQuery -->
<script type="text/javascript" src="here/you/are/loading/jquery.js"></script>
<!-- and now lets enter in noConflict mode -->
<script type="text/javascript">
$.noConflict();
</script>
This is the only way that uses minimal code change. Thanks.

jQuery multiple versions noConflict in IE

I have a javascript widget that I wrote using jQuery 1.8 that loads on a clients website that uses jQuery 1.3. I cannot get noConflict working properly in IE without some really ugly hacks. Here is what the page looks like after my widget is rendered:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.min.js"></script>
</head>
<html>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$jq = $.noConflict();
</script>
</body>
</html>
In chrome, this works great, $jq is defined as jQuery 1.8.3, but in IE 8 this does not work, $jq is defined as jQuery 1.3. My guess is that its a timing issue, the script gets executed before the new jQuery is loaded. I put in some call back timers and it works, but I cant imagine having embedded callback timers is the right way to go.
Any ideas?
EDIT
I cannot namespace jQuery1.3, the client uses it throughout the page and does not want to upgrade.
<!-- load jQuery 1.5 -->
<script type="text/javascript" src="http://foo.com/jquery-1.5.js"></script>
<script type="text/javascript">
var jQuery_1_5 = $.noConflict(true);
</script>
<!-- load jQuery 1.6 -->
<script type="text/javascript" src="http://foo.com/jquery-1.6.js"></script>
<script type="text/javascript">
var jQuery_1_6 = $.noConflict(true);
</script>
in this case -
use
jQuery_1_6(document).ready(function($) {
// Code using $ as usual goes here.
});
instead of
jQuery(document).ready(function($) {
// Code using $ as usual goes here.
});
see here - http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/
I ended up going with LABjs, which is a javascript loader. This way I can synchronously load scripts and execute code on them accordingly:
<script>
$LAB
.script("framework.js").wait()
.script("plugin.framework.js")
.script("myplugin.framework.js")
.wait(function(){
myplugin.init();
framework.init();
framework.doSomething();
});
</script>

Categories

Resources