We Keep Coding

How to include multiple JS references in a single JS file, then import only that one file?

I have the following JS files locally:
<script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.grouping.js"></script>
<script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script>
Is there an acceptable way to import all of these into a single js file, then pull in that single file anytime I need it?
For example, placing all the above files in jqwidgets.js and adding:
<script type="text/javascript" src="jqwidgets.js"></script>
...to the page?

how to call css and js files in webview?

I have one local html page in my android app.
in html page i call css and js files but when i run app , only context loaded and css and js don't load
I import css and js folders to android_assets/images/css nad android_assets/images/js
and i call css and js in html page like this:
<link href="./android_asset/images/css/bootstrap.min.css" rel="stylesheet" />
<link href="./android_asset/images/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="./android_asset/images/css/touchnswipe.min.css" rel="stylesheet" />
<link href="./android_asset/images/css/responsive.css" rel="stylesheet" />
<script src="./android_asset/images/js/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="./android_asset/images/js/bootstrap.min.js" type="text/javascript"></script>
<script src="./android_asset/images/js/modernizr.custom.js" type="text/javascript"></script>
<script src="./android_asset/images/js/jquery.mousewheel.min.js"></script>
<script src="./android_asset/images/js/jquery.hammer.min.js" type="text/javascript"></script>
<script src="./android_asset/images/js/TweenMax.min.js" type="text/javascript"></script>
<script src="./android_asset/images/js/responsive_example.min.js" type="text/javascript"></script>
And in Sites.java onCreate section i write this code:
WebView wbSites =(WebView)findViewById(R.id.wbSites);
// wbSites.setWebChromeClient(new WebChromeClient());
// wbSites.setWebViewClient(new WebViewClient());
wbSites.getSettings().setJavaScriptEnabled(true);
wbSites.loadUrl("file:///android_asset/images/sites.html");
Tip: htmlpage named sites.html and pasted in android_asset/images path
but still don't load js and css files.
pls help me

Have you tried including the file:// prefixes to all the resources you want to load?

i solve it
i most write address like this
<script src="./js/modernizr.custom.js" type="text/javascript"></script>
. Refers to local root => /android_asset/images/

How to load external Javascript file in MVC 5 _Layout Page

I want to be able to call external js file in mvc 5 _layout page, i have done a few researches on google, but no success, below is my code in the _Layout Head section:
<!-- start: MAIN JAVASCRIPTS -->
<!--[if lt IE 9]>
<script src="~/assets/plugins/respond.min.js"></script>
<script src="~/assets/plugins/excanvas.min.js"></script>
<script type="text/javascript" src="~/assets/plugins/jQuery-lib/1.10.2/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="#Url.Content("~/assets/plugins/jQuery-lib/2.0.3/jquery.min.js")"></script>
<!--<![endif]-->
<script type="text/javascript" src="#Url.Content("~/assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/bootstrap/js/bootstrap.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/blockUI/jquery.blockUI.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/iCheck/jquery.icheck.min.js")"></script>
<!-- end: MAIN JAVASCRIPTS -->
<script>
jQuery(document).ready(function () {
Main.init();
Index.init();
});
</script>
#RenderSection("JavaScript", required : false)
#RenderSection("CSS", required : false)
Then at the bottom of the _Layout page i have this:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/assets/plugins")
#RenderSection("Scripts", required : false)
In the View, i have this:
#section JavaScript
{
<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script type="text/javascript" src="#Url.Content("~/assets/plugins/flot/jquery.flot.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/flot/jquery.flot.pie.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/flot/jquery.flot.resize.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/jquery.sparkline/jquery.sparkline.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/jquery-easy-pie-chart/jquery.easy-pie-chart.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/fullcalendar/fullcalendar/fullcalendar.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/js/index.js")">
</script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
}
Please i will appreciate i someone could assist in suggesting what to do. thanks

move
#Scripts.Render("~/bundles/jquery")
to before its dependencies
i.e.
<script type="text/javascript" src="#Url.Content("~/assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js")"></script>
requires JQuery.js
but you load it after. So moving the include of JQuery above the script which required it, will fix that issue.
Please apply this to all scripts and their dependencies

Just like in normal HTML:
<script type="text/javascript" src="http://link-to-external-javascript-file.js"></script>

Javascript / jquery files conflicting with each other

I am using a theme which references 4 javascript/jquery files and I am using a slider image which is referencing 3 javascript/jquery files. However, they are conflicting with each other.
What files are conflicting with each other and how can I fix this issue?
Thanks
<!-- Code for theme -->
<script src="js/libs/modernizr-2.6.2.min.js"></script>
<!-- Code for sliding banner -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- Code for theme -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.0.min.js">\x3C/script>')</script>
<script src="js/main.js"></script>

1) .min is just minified version of file.
2) don't use both.
3) either use .min or normal jquery library.
<!-- Code for sliding banner -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- Code for theme -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script src="js/main.js"></script>
<script src="js/libs/modernizr-2.6.2.min.js"></script>

You don't need to add these:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.0.min.js">\x3C/script>')</script>
Because you are loading jQuery1.10+ above all other scripts, so why do you need to add jQuery.min.js and jQuery.1.9.0.
As this code comment says:
<!-- Code for theme -->
For a theme you don't need multiple jQuery libs to be loaded in a single page.

I'm not sure but have you tried $.noConflict() ?

How can I properly add CSS and JavaScript to an HTML document?

This very well might be a very stupid question.
I'm trying to add an empty CSS file, an empty JavaScript file and the jQuery library into the most basic of HTML files, as follows:
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="theme.css">
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" />
<script src="application.js" />
</head>
<body>
<h1 class=test>This is a test! Hello, world!</h1>
</body>
</html>
However, it doesn't work. The h1 doesn't display in my browser when the link or any of the scripts are present, but displays normally otherwise.
What am I doing wrong here? Why doesn't this work, and how can I make it work?
Thank you very much,
Eden.

Your <script> tags cannot be self closing. Try changing them to look like <script src="..." type="text/javascript"></script>

two things. script tags should have an end tag.
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" /></script>
<script type="text/javascript" src="application.js" /></script>
Another thing, see if you are navigating to the right file. Assume that your directory tree is the next
directory
|-yourHTMLpage.html
|-jquery-2.0.3.js
|-application.js
\-theme.css
then the next will work
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js" />
<script type="text/javascript" src="application.js" /></script>
<link rel="stylesheet" type="text/css" href="theme.css">
But in most recent standards, we are using a folder for css and js files, like the next
directory
|-yourHTMLpage.html
|-js
|-jquery-2.0.3.js
\-application.js
\-css
\-theme.css
Then you have to adapt the link,
<script language="javascript" type="text/javascript" src="js/jquery-2.0.3.js" />
<script type="text/javascript" src="js/application.js" /></script>
<link rel="stylesheet" type="text/css" href="css/theme.css">
Notice the "js/" addition for javascript files and "css/" addition for css files. HTML will navigate from its directory to the said file. But if the file isn't there as the source element is telling, then the page won't load the said file.

Are the css and js files in the same folder as your html ?
To see what is wrong, try a developper console to see what requests are sent (Press 'F12' on chrome or install the firebug extension on Firefox). There should be a "Network" tab that shows what files are requested and if your browser does or doesn't find them.

Are you sure that the path to the several files is correct? If it is, is the class of the h1 spelled correctly?
You should embed the javascript files like this:
<script language="javascript" type="text/javascript" src="jquery-2.0.3.js"> </script>
<script language="javascript" type="text/javascript" src="application.js"> </script>

Here is the simple method for include css and javascript file to your page.
<link rel="stylesheet" type="text/css" href="YOUR FILE PATH">
<script src="YOUR FILE PATH" type="text/javascript"></script>