In my default.jspx which contains the basic layout for the page I am trying to import some jquery libraries as follows
<head>
...
<spring:url value="/resources/js/lib/jquery-1.9.1.min.js" var="jquery_url" />
<spring:url value="/resources/js/lib/jquery.tokeninput.js" var="jquery_tokeninput_url" />
<script src="${jquery_url}" type="text/javascript"></script>
<script src="${jquery_tokeninput_url}" type="text/javascript"></script>
<script type="text/javascript">
$.noConflict();
</script>
<util:load-scripts />
...
</head>
but when the page is rendered in the browser the first script tag swallows the two others
<head>
...
<script type="text/javascript" src="/roo-inari/resources/js/lib/jquery-1.9.1.min.js">
//These lines are inside the first script tag
<script type="text/javascript" src="/roo-inari/resources/js/lib/jquery.tokeninput.js"/>
<script type="text/javascript">
$.noConflict();
//The tag is closed here
</script>
<link href="/roo-inari/resources/dijit/themes/tundra/tundra.css" type="text/css" rel="stylesheet">
...
Any idea what might be causing this? The project is based on a spring roo generated web mvc scaffold.
I am using Chrome v.25.
The simple solution was to write a comment inside the tag so that it is not closed automatically. Silly me
<script src="${jquery_url}" type="text/javascript"><!-- required for some browsers --></script>
Related
I am trying the jquery alert example on this webpage: http://www.tutorialscollection.com/jquery-demo/jquery-demo.php?ex=8.0_1. I'm new to using jquery and I can't figure out how to get the dependencies listed in the head section:
<head>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
Here is the full file, but probably not needed:
<!DOCTYPE html>
<head>
<title>Examples of using jQuery Alerts</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js" type="text/javascript"></script>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Example script -->
<script type="text/javascript">
$(document).ready( function() {
$("#basic_button").click( function() {
jAlert('Example of a basic alert box in jquery', 'jquery basic alert box');
});
});
</script>
</head>
<body>
<p>
<input id="basic_button" type="button" value="Show Basic Alert" />
</p>
</body>
</html>
Google hosts a CDN. To make sure JQuery's libary is loaded add this into the <head> tags
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
If you are trying this on a local machine then you can download jquery here and set it up in the <head> as this:
<script src="path_to_jquery" ></script>
I found the dependencies here:
http://www.tutorialscollection.com/jquery-demo.
This serves my purposes much better than the tutorial in this question: How to generate a simple popup using jQuery
I have quite a bunch of script and libraries that I am using in my website, which takes like 5 to 8 seconds to load.
ex.
<script type="text/javascript" src="../lib_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../lib_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib_components/angular/angular.js"></script>
<script type="text/javascript" src="../lib_components/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="../lib_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="../lib_components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="../lib_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="../lib_components/lodash/dist/lodash.min.js"></script>
<script type="text/javascript" src="../scripts/js/overdo.js"></script>
I want to show a loading bar till all the scripts have been loaded, can anyone guide me on whats needs to be done for that?
There is very simple approach you can use in case when all the scripts you want to load are loaded synchronously (you don't use modules loader, async attributes, etc) - like in your example.
The trick is add progress indicator script the very first on the page, before all your heavy scripts. It is also make sense to inline this script (because it shouldn't be too big ideally):
<script>
// some progress bar implementation progress.show()
console.log('showing progress, loading bar, etc.');
</script>
<script src="../lib_components/jquery/dist/jquery.min.js"></script>
<script src="../lib_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib_components/angular/angular.js"></script>
<script src="../lib_components/angular-resource/angular-resource.min.js"></script>
<script src="../lib_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="../lib_components/angular-cookies/angular-cookies.min.js"></script>
<script src="../lib_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../lib_components/lodash/dist/lodash.min.js"></script>
<script src="../scripts/js/overdo.js"></script>
<script>
// hiding loading bar
console.log('scripts loaded')
</script>
Now, for the implementation of the actual progress bar, it's up to you how and what to render. However, remember that depending on where you put those scripts DOM tree might not be loaded yet (if scripts are in <head>). I would anyway recommend to place scripts before closing </body>. The ideal structure for this approach would be:
<!DOCTYPE html>
<html>
<head>
<!-- some styles, no scripts here -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="assets/styles.css" />
</head>
<body>
<div class="loading" hidden>Loading...</div>
<!-- Some application HTML code -->
<script>
// show/create progress/loading
var loading = document.querySelector('.loading')
loading.hidden = false
</script>
<!-- many script tags ... -->
<!-- ... -->
<script>
// hide/remove progress/loading
loading.parentNode.removeChild(loading)
</script>
</body>
</html>
My Menu does not seem to function properly on photogallery page :-http://www.vancha.in/Photogallery.aspx
However its seems to function on the home page.
If I remove jquery-1.10.2.min.js file on photogallery page ,then it functions properly.
I'm using lightbox script.
There is some clash that's happening.
Please Help !
Regards,
Vancha
I have tried something like this since now I'm using pretty Photo:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var $jq161 = jQuery.noConflict();
</script>
<script type="text/javascript">
$jq161(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto();});
</script>
Its still not working :(
try something like this,Use the library you required
<script type="text/javascript" src="jquery1.4.2.js"></script>
<script type="text/javascript">
var jq_4 = jQuery.noConflict();
jq_4(function () {
jq_4('#gallery a').lightBox({ fixedNavigation: true });
})
</script>
http://interface88.blogspot.in/2012/07/using-multiple-version-of-jquery-on.html
http://api.jquery.com/jQuery.noConflict/
I can see that Jquery is referenced multiple times on this URL
http://www.vancha.in/Photogallery.aspx
You may need to fix that.
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>
I'm having some difficulties with what seems to be an issue with the order that I import the JS src.
I'm pretty new to JS / jQuery so for the most part have taken for granted that I only needed to include one script and all has been working fine.
I have a contact page, on the page there is a google map and form, the form also relies on som JS to pretty it up and to validate inputs.
These were working fine.
I've now just updated the login box that will be in the header, the dropdown uses a simple jquery function to display it when selected.
Now that I have this script in place I cannot get them all to work together, I've tried various combinations but none work so I must be missing something that's important, could someone please explain?
These are examples:
The map always displays and the login function is contained within the "helperFunctions" whilst the form function calls are within "ourContactForm"
1 :
The form displays correctly, the login will not work
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/map.js"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!--Disable zoom to pinch-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/helperFunctions.js"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript" src="js/jquery.jqtransform.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/ourContactForm.js"></script>
2 :
Form doesn't display how it should yet the login does
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/map.js"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!--Disable zoom to pinch-->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/helperFunctions.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/ourContactForm.js"></script>
other permutations result is not a great deal of anything working.
Thanks for your help
EDIT: using the details on jquery documentation solved :)
http://jquery.com/download/
In both examples You include both jQuery 1.3.2 and the latest one. Why? I guess, that Your plugins work with other version of jQuery. Just check it and include only one.
For anyone stumbling across this that made the same dumb mistake...
These:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
taken from http://jquery.com/download/
will solve the issue.