my bootstrap modal won't show if i use offline "bootstrap.min.js" & "jquery.js"
here the code :
<script type="text/javascript" src="jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" scr="js/bootstrap.min.js"></script>
but it can work normaly when i use this online lib :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
what's wrong with that?
thanks,
Related
I want to use jquery that needs to include some javascript files :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.calendars.js"></script>
<script type="text/javascript" src="js/jquery.calendars.plus.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.calendars.picker.css">
<script type="text/javascript" src="js/jquery.plugin.js"></script>
<script type="text/javascript" src="js/jquery.calendars.picker.js"></script>
so how can I include these files to ioni2 app
why you are using jquery datepicker ? there is available ionic date picker so you can see how to adding it with this url https://www.npmjs.com/package/datepicker-for-ionic
Ok so I am trying to load sb-admin-2 and the menu is not collapsing, I browsed for some solutions and none of them work for me, also as you can see the data-table is not working too and my tags looks like this:
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/bootstrap.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-ui-router.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-animate.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-messages.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-ui-validate.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-cookies.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/ng-file-upload-shim.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/ng-file-upload.min.js"></script>
<!--SB ADMIN FILES-->
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/metisMenu.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/dataTables.responsive.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/sb-admin-2.min.js"></script>
can you help me out guys.
ps: I am loading sb-admin through angularjs and django
gentos - i had a similar issue (sidebar not collapsing) and it turned out that i had overlapping jquery's. Once i removed the calls to both jquery and jquery.min files and just used a jquery link:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
collapsible sidebar returned. I also reordered jquery and put the above link at the top of my HTML file (above bootstrap, metisMenu, etc.)
I am new to JQuery stuff ,but this is ridiculous ,i cant do drag and drop work
.php file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP Test</title>
</head>
<body>
<span id="drag">Drag me</span>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
</body>
</html>
my drag js file
$(document).ready(function() {
$('#drag').draggable();
});
By the way, do i need to have JQuery UI to make drag and drop stuff?
Thank you
You should include the libraries in the correct order:
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
Your custom code (drag.js) should be last, after jquery and jquery-ui have been loaded.
The draggable() function requires jQueryUI to work. After including jQueryUI your code works fine.
$('#drag').draggable();
http://codepen.io/tejzpr/pen/raXqKz
I would use cdn to save on speed and resources, and also be sure that you have a working copy. The order was probably your issue, however, as people mentioned above.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
You should first load UI script and use it after.
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
Important: don't forget jQuery 2.* browser compatibility:
https://jquery.com/download/#jquery-2-x
It doesn't support IE 8 or earlier!
the website can be found here: http://www.healthygit.com
Basically when the site loads depending on what order I include the javascript depends what breaks, for example:
If I include the Menu JavaScript (below) first then the menu will not work but the image slider will.
Menu JS:
<script type="text/javascript" src="js/jquery.js"></script><!-- jQuery -->
<script type="text/javascript" src="js/jquery.easing.js"></script><!-- jQuery Easing effects -->
<script type="text/javascript" src="js/megamenu_plugins.js"></script><!-- Mega Menu Plugins (scroller, form, hoverIntent) -->
<script type="text/javascript" src="js/megamenu.js"></script><!-- Mega Menu Script -->
But if I include the menu files last the menu will work and the slider will not, the slider files are:
<script type="text/javascript" src="js/jquery.list-rotator.min.js"></script>
<script type="text/javascript" src="js/preview.js"></script>
The errors I am getting are:
ReferenceError: jQuery is not defined
...),delay:m(a(this).attr("delay"),bE),effect:r[a(this).attr("effect")]!=undefined?...
jquery....min.js (line 1)
And
ReferenceError: $ is not defined
$(document).ready(
preview.js (line 1)
Can anyone help me please?
I noticed in your webpage that you placed jQuery last. I think it should be at the first. Have you tried it in the following order:
<script type="text/javascript" src="js/jquery.js"></script><!-- jQuery -->
<script type="text/javascript" src="js/jquery.easing.js"></script><!-- jQuery Easing effects -->
<script type="text/javascript" src="js/megamenu_plugins.js"></script><!-- Mega Menu Plugins (scroller, form, hoverIntent) -->
<script type="text/javascript" src="js/megamenu.js"></script><!-- Mega Menu Script -->
<script type="text/javascript" src="js/jquery.list-rotator.min.js"></script>
<script type="text/javascript" src="js/preview.js"></script>
Tell me if it helps.
I am using jquery and its related plugins in my site.
Since i use more js. for visiting each page in my site. all the js loads so site loading time increases.
How to use js libraries efficiently without loading js for each page visit.
UPDATE:
I am using
<!-- JQUERY-->
<script src="{$TEMPLATE_FACK}/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$.noConflict();
</script>
<script src="{$TEMPLATE_FACK}/js/global.js" type="text/javascript"></script>
<!-- JQUERY.VALIDATE SCRIPT -->
<script src="{$TEMPLATE_FACK}/js/jquery.validate.js" type="text/javascript"></script>
<!--JS VALIDATION SCRIPTS -->
<script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/scriptaculous/src/scriptaculous.js"></script>
<script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/jsvalidate.js"></script>
<!--jQuery URL Script-->
<script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/jquery.url.js"></script>
<!-- TINYMCE SCRIPTS -->
<script type="text/javascript" src="{$TEMPLATE_FACK}/tinymce/jquery.tinymce.js"></script>
<script src="{$TEMPLATE_FACK}/tinymce/tiny_mce_src.js" type="text/javascript"></script>
<script src="{$TEMPLATE_FACK}/js/quicktags.js" type="text/javascript"></script>
<!-- WORD COUNT -->
<script src="{$TEMPLATE_FACK}/js/jquery.wordcount.js" type="text/javascript"></script>
<!-- Thick box scripts -->
<script src="{$TEMPLATE_FACK}/js/thickbox.js" type="text/javascript"></script>
<!--JS FOR GRAPH (Highcharts Refer: http://highcharts.com/ref/#plotOptions-pie-point-events)-->
<script type="text/javascript" src="{$TEMPLATE_FACK}/js/graph/highcharts.js"></script>
<!-- 1a) Optional: add a theme file -->
<!--
<script type="text/javascript" src="{$TEMPLATE_FACK}/js/graph/themes/gray.js"></script>
-->
<!-- 1b) Optional: the exporting module -->
<!--<script type="text/javascript" src="{$TEMPLATE_FACK}/js/graph/modules/exporting.js"></script>-->
<!--JS FOR Tag adding in Faq add1.html - added by Mogan Dec 02, 2010-->
<script src="{$TEMPLATE_FACK}/js/create_html.js" type="text/javascript"></script>
<!--FANCY BOX -->
<script type="text/javascript" src="{$TEMPLATE_FACK}/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="{$TEMPLATE_FACK}/js/fancybox/jquery.fancybox-1.3.2.js"></script>
This much of js i am using in header section. once i am visiting each page all these loads again and again
The user doesn't have to load it each time, just be sure to set your cache headers correctly so the user caches the JavaScript files that are reused. For libraries specifically (since this is tagged jQuery), look at using a CDN - which will also have the cache headers I mention, as well as parallelizing the download since it's not on your own domain.
Also, you can use a Content delivery network (CDN) for libraries like jQuery etc. Google provides a bunch.
Additionally to the previous answer you should minify all javascript file together, optionally you can use gzip compression.