I have problem with simple modal! Is not working I got some errors! I have mootols and jquery in header.php
Error is:
Uncaught TypeError: Object #<Object> has no method 'addEvent' demo.js:8
(anonymous function) demo.js:8
(anonymous function) mootools-core-1.3.1.js:354
h mootools-core-1.3.1.js:32
Array.implement.each mootools-core-1.3.1.js:38
invoke.fireEvent mootools-core-1.3.1.js:353
h
My code is:
<script type="text/javascript" src="js/mootools-core-1.3.1.js"></script>
<script type="text/javascript" src="js/mootools-more-1.3.1.1.js"></script>
<script type="text/javascript" src="js/simple-modal.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Move your last script tag to first
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/mootools-core-1.3.1.js"></script>
<script type="text/javascript" src="js/mootools-more-1.3.1.1.js"></script>
<script type="text/javascript" src="js/simple-modal.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
It will work..
or may be you have multiple instances of jQuery on your page.
You need to either:
Aet rid of one of them (there's no need to have both)
Alias the jQuery used in custom.js
Use noConflict() to resolve which jQuery gets access to the $
variable.
Related
<!-- Vendor JS Files -->
<script src="../assets/vendor/jquery/jquery-3.6.0.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/vendor/datatables/datatables.js"></script>
<script src="../assets/vendor/apexcharts/apexcharts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js" integrity="sha512-FHZVRMUW9FsXobt+ONiix6Z0tIkxvQfxtCSirkKc5Sb4TKHmqq1dZa8DphF0XqKb3ldLu/wgMa8mT6uXiLlRlw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="../assets/vendor/chart.js/chart.min.js"></script>
<script src="../assets/vendor/echarts/echarts.min.js"></script>
<script src="../assets/vendor/quill/quill.min.js"></script>
<script src="../assets/vendor/simple-datatables/simple-datatables.js"></script>
<script src="../assets/vendor/tinymce/tinymce.min.js"></script>
<script src="../assets/vendor/php-email-form/validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempus-dominus/6.0.0-beta2/js/tempus-dominus.js"></script>
<script src="https://kit.fontawesome.com/a98bc9d553.js" crossorigin="anonymous"></script>
<!-- Template Main JS File -->
<script src="../assets/js/main.js"></script>
What's wrong with my script init? already tried, it always give me Uncaught TypeError: $(...).tempusDominus is not a function eventhough the Jquery already at the top
This page outlines using the picker with jQuery. The jQuery-provider.js file must be included after the main picker code. jQuery is no longer a requirement and is here for backwards compatibility.
Forgot to include the JSProvider.js
I'm working with IONIC/AngularJS and I have a lot of JS Scripts.
I have seen that sometimes when the app is loading, some of the script is not loaded yet, so failed to login in the app (I have a login screen at first).
This is all my scripts:
<!-- ionic/angularjs js -->
<script src=" lib/Pouchdb/pouchdb-4.0.1.min.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript" src="js/ng-cordova.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script type="text/javascript" src="lib/a0-angular-storage/dist/angular-storage.min.js"></script>
<script type="text/javascript" src="lib/ion-affix/ion-affix.js"></script>
<script type="text/javascript" src="lib/angular-qr/angular-qrcode.js"></script>
<script type="text/javascript" src="lib/angular-qr/qrcodejavascript.js"></script>
<script type="text/javascript" src="js/angular-jwt.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<script type="text/javascript" src="js/angular-locale_es-es.js"></script>
<script type="text/javascript" src="lib/angular-elastic/elastic.js"></script>
<script type="text/javascript" src="lib/angular-filter/dist/angular-filter.min.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/qrcode_V2.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/factoryutils.js"></script>
<script type="text/javascript" src="js/Toast.js"></script>
<script type="text/javascript" src="js/jquery.urlshortener.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
<script type="text/javascript" src="js/sweetalert.min.js"></script>
<script src="lib/ionic-material/ionic.material.min.js"></script>
<script type="text/javascript" src="js/ngprogress.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/MenuCtrl.js"></script>
<script src="js/HomeTabCtrl.js"></script>
<script src="js/LoginCtrl.js"></script>
<script src="js/TabEventosCtrl.js"></script>
<script src="js/DatabaseCtrl.js"></script>
<script src="js/HandleTokenValidity.js"></script>
My error is the next:
"TypeError: Cannot read property 'getPreferredLanguage' of undefined
at Object.getPreferredLanguage (file:///android_asset/www/js/ng-cordova.js:2826:32)
at file:///android_asset/www/js/LoginCtrl.js:76:39
at processQueue (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:23394:28)
at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:23410:27
at Scope.$eval (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:24673:28)
at Scope.$digest (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:24484:31)
at Scope.$apply (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:24778:24)
at done (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:19191:47)
at completeRequest (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:19363:7)
at XMLHttpRequest.requestLoaded (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:19304:9)",
source: file:///android_asset/www/lib/ionic/js/ionic.bundle.js (21157)
The problem starts when trying to access to $cordovaGlobalization scope but I think that the library associated is not loaded at that time.
My question is if there is any way to make the application to wait until all the JS scripts have been loaded?
Thanks
I think your are looking for ionic.Platform.ready()
ionic.Platform.ready(function(){
// will execute when device is ready, or immediately if the device is already ready.
});
Link to documentation
You have to include the following code in your app.js file,
.run(function($ionicPlatform){
$ionicPlatform.ready(function() {
// The $ionicPlatform.ready event is called when Cordova's deviceready event fires
});
});
It will executes, when your all the js files are get Loaded...
Load jQuery
Load Highcharts 4.0.1
Load Highmaps 1.1.6 (which says it is compatible with 4.0.x)
seeing this error:
Uncaught TypeError: HighchartsAdapter.addAnimSetter is not a function
===
<html>
<head>
<script type='text/javascript' src='https://code.jquery.com/jquery-1.11.2.min.js'></script>
<script type='text/javascript' src='https://code.highcharts.com/4.0.1/highcharts.js'></script>
<script type='text/javascript' src='https://code.highcharts.com/maps/1.1.6/modules/map.js'></script>
</head>
</html>
fiddle: http://jsfiddle.net/93ukkqoh/ (see error in the javascript console)
Am I missing something obvious here?
Use following libraries in the following order
<script type='text/javascript' src='https://code.jquery.com/jquery-1.11.2.min.js'></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type='text/javascript' src='https://code.highcharts.com/maps/1.1.6/modules/map.js'></script>
So I recently transfered over my files from one server to another. For some reason on the new
server I am getting odd errors in chrome under the network tab such as:
Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: autoResize is not defined
Some pages even stopped working!
I was messing around with the order of my script links.
Here is my current order:
<script type="text/javascript" src="assets/assetsz/js/modernizr.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.cookie.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/responsive-tables.js"></script>
<script type="text/javascript" src="assets/assetsz/js/custom.js"></script>
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script type="text/javascript" src="assets/assetsz/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/page-manager.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script src='https://coinbase.com/assets/button.js' type='text/javascript'></script>
How should I order this and is there any way to make it so the order doesnt matter?
Thanks I have no idea what to search for this so I am stuck.
EDIT: New order. Less errors. http://prntscr.com/3y98gt
<!---JQuery/Javascript-->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/modernizr.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.cookie.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/responsive-tables.js"></script>
<script type="text/javascript" src="assets/assetsz/js/custom.js"></script>
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script type="text/javascript" src="js/page-manager.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script src='https://coinbase.com/assets/button.js' type='text/javascript'></script>
1rst place: JQuery
2nd place: JQuery Migrate
3rd place: JQuery UI
4th place: Bootstrap
Order of the rests are less important, but pay attention to don't call function before is loading by the script tag, eso
Another advice: separate CSS and JS files. It's a bad idea to mix everything.
Pay also attention: for performance reason, it's better to load JS at the end of the page. But CSS have to take place in the head section.
For starters, every script which uses jQuery should be loaded after your jQuery include. So, putting jquery-1.11.1.min.js on top should be a quick fix.
I al having trouble using AND prototype.js (for appear() and fade() function in menu) AND jqplot for drawing graphs.
When I load external js files like this, then prototype works but I have no jqplot graph (case A) :
<script src="includes/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="includes/scriptaculous/scriptaculous.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="includes/dist/jquery.js"></script>
<script language="javascript" type="text/javascript" src="includes/dist/jquery.jqplot.js"></script>
<script type="text/javascript" src="includes/dist/jquery.min.js"></script>
<script type="text/javascript" src="includes/dist/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" hrf="includes/dist/jquery.jqplot.min.css" />
<link rel="stylesheet" type="text/css" href="includes/dist/jquery.jqplot.css" />
<script type="text/javascript" src="includes/dist/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="includes/dist/plugins/jqplot.pointLabels.js"></script>
<script type="text/javascript" src="includes/dist/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script type="text/javascript" src="includes/dist/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="includes/dist/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="includes/dist/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="includes/dist/plugins/jqplot.canvasOverlay.js"></script>
When I first load the jqplot files and then the prototype files, then I have a graph but no navigation in my menu's (case B)
<script language="javascript" type="text/javascript" src="includes/dist/jquery.js"></script>
In case A I get the error :
TypeError: element.dispatchEvent is not a function
TypeError: element.getStyle is not a function
In case B I get the error :
TypeError: $(...).ready is not a function
How can I use both ??
Thanks.
Try this
load jQuery
<script language="javascript" type="text/javascript" src="includes/dist/jquery.js"></script>
Run noconflict()
<script language=javascript">jQuery.noConflict()</script>
load Prototype and Scripty
<script src="includes/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="includes/scriptaculous/scriptaculous.js" type="text/javascript"></script>
then load everything else. Also it looks like you are double loading jQuery, which will cause problems.
Also for the error
$(...).ready is not a function
In this situation $() is the Prototype method - and this is trying to run the jQuery ready() method - find this and change to
jQuery(...).ready