I've just include the notify Plugin for bootstrap into my page. When I call
echo '<script>$( document ).ready(function() {$.notify("Hello World");});</script>';
the console told me this:
Uncaught ReferenceError: $ is not defined
Here are my Javascript includes.
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-notify.min.js"></script>
<script src="assets/js/select2.min.js"></script>
<script src="assets/js/contact.js"></script>
<script src="assets/js/smoothscroll.js"></script>
<script src="assets/js/counter.js"></script>
<script src="assets/js/page.js"></script>
<script src="assets/js/responsive-menu.js"></script>
Keep your jquery and boostrap js links in the top portion of your head tag and test it again .The problem must be resolved.
This is generally occurs because your doc ready function is loading prior than jquery.js.
<html>
<header>
jquery.js and bootstrap.js at top here
</header>
<body>
</body>
all the remaining links
<script>
document ready here
</script>
<html>
Related
My HTML document has Bootstrap, but Bootstrap won't detect jQuery. Here is my <head> tag:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.slim.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js" type="application/javascript"></script>
</head>
But it gives to me this error:
Uncaught Error: Bootstrap JavaScriopt requires jQuery
Use one of these 3 script tags, preferably 2nd one.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.slim.js"></script>
**<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>**
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
If for some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version.
Using jQuery.noConflict, you can make multiple versions of jQuery coexist on the same page. For instance
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.slim.js"></script>
<script>
var jq1 = jQuery.noConflict();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script>
var jq2= jQuery.noConflict();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
var jq3 = jQuery.noConflict();
</script>
but as mention above use only one version of jquery.
I have linked jQuery and jQuery mobile to my code. I got this error in the console:
TypeError: $.mobile is undefined
I have rechecked the URL and all are correct, I have update the files(jQuery, jQuery mobile) and the issue is still exists.
I have place the jquery.js before jquery.mobile.js
This is my code:
<script src="JS/jquery.js" type="text/javascript"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script src="JS/bootstrap.min.js" type="text/javascript"></script>
<script src="JS/code.js" type="text/javascript"></script>
and it's on the end of the file.
the content of code.js: http://pastebin.com/3LTcxs9S
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-
1.3.1.min.js"></script>
try this by replacing your code
NOTE* put jquery mobile script at last after putting all jquery library scripts, im sure it will work
I've a page that contain chart and map menu for report function.
Then, I choose Highchart-Highmap library to reach the purpose above.
The chart function runs well but when I develop map function there's a error appear
TypeError: ma is not a function
I've traced the problem that the ma function is appear in highchart.js and highmaps.js but I don't know how to resolve this conflict.
I've try put jQuery.noConflict(); in highmaps but the conflict still appear
This how I code in main page
... some html code
<script type="text/javascript" src="././js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="././js/highcharts/highcharts-more.js"></script>
<script type="text/javascript" src="././js/highcharts/highcharts-3d.js"></script>
<script type="text/javascript" src="././js/highcharts/modules/drilldown.js"></script>
<script type="text/javascript" src="././js/highcharts/modules/exporting.js"></script>
... some html code
<script type="text/javascript" src="././js/Highmaps/highmaps.js"></script>
<script type="text/javascript" src="././js/Highmaps/modules/data.js"></script>
<script type="text/javascript" src="././js/Highmaps/modules/exporting.js"></script>
How I can resolve this problem?
Instead of highmaps, you need to use map.js module.
<script src="//code.highcharts.com/maps/modules/map.js"></script>
Here is the documentation on using both together.
You must include this script tag after highcharts.js:
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
I encountered the same issue, and resolved it by placing highcharts after the maps
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
http://jsfiddle.net/danny_shumer/tc898kgv/2/
I have a jQuery Mobila app wrapped with Cordova that I test on my Android device. It is fine when I launch it normally, but when I use a web intent (https://github.com/Initsogar/cordova-webintent) to launch it, the console debug shows random errors coming from the jQuery Mobile js file:
D/CordovaLog(24140): file:///android_asset/www/jquery/jquery.mobile-1.4.0.min.js: Line 7661 : Uncaught TypeError: Object # has no method 'addClass'
D/CordovaLog(22727): file:///android_asset/www/jquery/jquery.mobile-1.4.0.min.js: Line 10116 : Uncaught TypeError: Object # has no method 'each'
I am aware that these bugs are properly caused by the code I am trying to render on startup, and I'm guessing that the js files I include in the tags in index.html might be in the wrong order. Here is my current setup:
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="jquery/jquery-1.9.1.min.js"></script>
<script src="jquery/jquery-ui.min.js"></script>
<script src="jquery/jquery.ui.touch-punch.min.js"></script>
<script src="jquery/jquery.mjs.nestedSortable.js"></script>
<script src="js/json2.js"></script>
<script src="js/jstorage.js"></script>
<script src="jquery/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
app.initialize();
</script>
I have also tried putting jquery.mobile-1.4.0.min.js under jquery-1.9.1.min.js, but similar things have happened.
Afterwards, I re-ordered them into this:
<script src="jquery/jquery-1.9.1.min.js"></script>
<script src="jquery/jquery.mobile-1.4.0.min.js"></script>
<script src="jquery/jquery-ui.min.js"></script>
<script src="jquery/jquery.ui.touch-punch.min.js"></script>
<script src="jquery/jquery.mjs.nestedSortable.js"></script>
<script src="js/json2.js"></script>
<script src="js/jstorage.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript" src="js/app.js"></script>
And it seemed to work fine for a while or so, but am still seeing jQuery Mobile bugs here and there.
I have following script:
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">
jAlert("message","title");
</script>
in my html head.but the dialog is not showing up when I load the page(it would if I simply use alert).
where did I do wrong? Am I missing the corresponding js files?
edit: I included the jquery.alerts.js file.it is still not working.
edit: I added this line and put the file in the dir
<script type="text/javascript" src="jquery.alerts.js"></script>
Yes I put it inbetween.
I opened the browser console and saw this:
"Uncaught TypeError: Cannot read property 'scrollHeight' of null jquery-1.8.2.js:9405"
jAlert isn't a part of native jQuery.
You can find the project page here, the download link is at the bottom.
Make sure you include it straight after jQuery - your code should look as follows:
<link rel="stylesheet" type="text/css" href="jquery.alerts.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery.alerts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jAlert("message","title")
});
</script>