Today I started to use JQuery. I found this explanation of how to do it.
On that page I also have a complete code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
});
</script>
</head>
<body>
API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>
I copy paste the code and it does not work. I have to mention that it works if I try it on the page that I have mentioned before (so JavaScripts are switched on in my browser).
I have to idea how to solve this problem because I have no error message and has no previous experience with the jquery. Can anybody help me with that?
ADDED:
I found a feature that can be important. When I load the above mentioned code/page, the auto-complete works as it is expected! If I reload the page, it change its appearance a bit (a space between the input field and top of the page appears) and auto-complete stops to work. Does it tell you something?
It's because it should be: $("#example").autocomplete({ source: data })
It seems the docs you found is outdated. A more up to date version can be found here: http://jqueryui.com/demos/autocomplete/
try .split(",")
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ,");
also attach a sorce
$("#example").autocomplete({
source: data
});
Related
Trying to make the #intro_title bounce when the document is ready. I loaded both the jQuery and jQuery UI libraries and I still get "Uncaught TypeError: $(...).effect is not a function". I suspect that this is an issue with importing the jQuery UI library so...
I tried loading the libraries at the end of the body, head, html, etc. and changed "src" to "href" but I get the same result each time. I even tried both Google's and jQuery's hosted libraries only to meet the same result.
lodge_101.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="lodge_101_main.css">
<head>
<title>Scipio Lodge 101</title>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<h1 id="intro_title">WELCOME TO LODGE 101</h1>
<script src="lodge_101_main.js"></script>
</body>
</html>
lodge_101_main.js
$(document).ready(function() {
$("#intro_title").effect("bounce", { times:3 }, "slow");
});
Why does this continue to happen and how can I fix it? I'm still new to programming so please be very critical of my work, thank you!
you have to load the jquery library before the jquery ui. just change your script tags position. move the jquery script tag at the first position.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Try defining jquery before jquery-ui.
I am trying to use jQuery for the first time and I am coding it by hand. But my jQuery code doesn't work at all... Here's my setup :
Index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="mainCSS.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="mainJQuery.js"></script>
</head>
<body>
<div class="test"> </div>
</body>
</html>
mainCSS.css
.test {
background-color:#FF0004;
border-radius:25px;
display:block;
height:500px;
width:500px;
}
mainJQuery.js
// JavaScript Document
$(document).ready(function() {
$('.test').click(function() {
$('.test').fadeOut('slow');
});
});
Just to state it for the record:
In order for your jQuery code to work, you need to link to the jQuery library in your HTML.
If you are following a tutorial that doesn't include this in the first step, you should find another tutorial to follow. If you got to this question because you did not follow the first step of your tutorial, you should read more carefully before falling back on StackOverflow, or risk getting some serious downvotes.
The two most common ways of including jQuery in your HTML page are:
1) Downloading the library, and linking to a local copy. In your <head> section:
<script type="text/javascript" src="/url/path/to/local/jquery.min.js"></script>
2) Linking to a remote copy of the jQuery on Google's CDN. Again, in <head>:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
If you don't link to jQuery using one of those options, or something similar, your code will not work. In most browsers you will be able to tell that this is the problem by opening the Javascript console, typing "jQuery" and getting an error like jQuery is not defined.
It's amazing that I couldn't find a duplicate question to close this in favor of, but then again I didn't click on every single "Why doesn't this simple jQuery script work" question on StackOverflow.
And there are a lot.
I know that Document.ready - DONt wait for images to download.
So why it does here ?
http://jsbin.com/ehuke4/27/edit#source
(after each test - change the v=xxx in the img SRC)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert('0');
});
</script>
</head>
<body >
<img src='http://musically.com/blog/wp-content/uploads/2011/04/Google-Logo.jpg?v=42333' />
</body>
</html>
I think, the problem comes out from JSBin.com
Because, when you try this example on JSFiddle.net, it works properly
http://jsfiddle.net/vqte9/
It has to do with the fact that you're using "alert()", I think, though I'm not 100% sure why. If you change your code like this:
<body>
<div id='x'></div>
<img ...>
</body>
<script>
$(function() { $('#x').text("hello there"); });
</script>
you'll see that the text is filled in before the image loads.
edit — I don't know why this would make a difference, but I notice quite different behavior when I set up the ready handler with:
$(function() { whatever; });
and:
$(document).ready(function() { whatever; });
Now that's not supposed to be the case; the two forms are supposed to do exactly the same thing, as far as I know. However, they don't seem to. Here is a jsbin example that sets up the ready handler with the first form, and here is one that uses the second one. They behave very differently for me. I'll have to check the jQuery source to figure out how that can be true.
Here is the jQuery documentation explaining the equivalence of $(handler) and $(document).ready(handler).
I need to dynamically update the contents for every few seconds, without reloading the page, so i thought to use jquery load() function, this loads the contents fine but not the js or jquery file from head tag.
Here is sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{$PAGE_TITLE}</title>
<link rel="stylesheet" type="text/css" href="../web/css/style.css" />
<script type="text/javascript" src="../web/js/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="../web/js/wz_tooltip.js"></script>
<script type="text/javascript" src="../web/js/tip_centerwindow.js"></script>
<script type="text/javascript" src="../web/js/tip_balloon.js"></script>
<script type="text/javascript">
{literal}
$(document).ready(function() {
setInterval(function(){
$("#content").load("load_contents.php");
},20000);
......
});
{/literal}
</script>
</head>
<body>
<div class="content">
</div>
</body>
</html>
Suggest me the solution...
Updated: Tooltip js is not loading, y?...
I can't find the reference, but any javascript in the page that is loaded will automatically be disabled to prevent conflicts. If you need to do something to the loaded content, I would suggest using either live() or delegate() on the main page to act on the loaded content.
I agree with fudgey about using live (delegate isn't an option in 1.3.2) if possible. If your plugin doesn't support that though (which I'm guessing it doesn't since it's not working), you can pass a function to .load that will run when the content is loaded. Here you will want to hook up these new elements to your plugin. For example, so for instance say you wanted to use draggable from jQuery UI on all divs inside content , you might do
$(document).ready(function() {
var init = function(){
$("#content div").draggable();
};
init();
setInterval(function(){
$("#content").load("load_contents.php", init)
},20000);
});
If you do this with your tooltip plugin and whatever else, you are reloading into content, it should work. Be careful to call the init method only on content within #content so you don't end up adding tooltips twice to other areas. Using a plugin that uses delegate (upgrade to latest jQuery) or live will avoid having to do the selection and rebind each time you add elements, making for faster reloads.
The .war is served from GlassFish v3. I am trying to include a javascript file from my jspx.
<script type="text/javascript" src="/base/interface/Service.js"></script>
I get the following in my http response
<script src="/base/interface/Service.js" type="text/javascript" />
The problem is that it should include the </script> tag. I believe this is why it works on Chrome, but not on Firefox or IE. Any idea how to force <script></script>
Update: Not sure if any of this is pertinent, but here is the beginning of my jspx file
<jsp:root version="2.0"
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:fmt="http://java.sun.com/jsp/jstl/fmt"
xmlns:form="http://www.springframework.org/tags/form"
xmlns:spring="http://www.springframework.org/tags"
xmlns="http://www.w3.org/1999/xhtml">
<jsp:output doctype-root-element="html"
doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>
<jsp:directive.page contentType="text/html" pageEncoding="UTF-8"/>
...
I used <script ...><jsp:text> </jsp:text></script> and that retained the closing tag. I think this is ugly, so if anyone has a better answer I would definitely be interested.
Unfortunately, jspx is known to "minimize" empty elements. One way to prevent the minimization without adding a space to the rendered HTML is to insert a comment. For example:
<script ...><!-- keep open/close tags --></script>
It is still ugly, though.
A potentially cleaner solution would be to create a custom taglib that outputs correct HTML, e.g.:
<m:htmlScript type="text/javascript" src="/js/jquery-1.4.4.min.js"/>
producing:
<script type="text/javascript" src="/js/jquery-1.4.4.min.js">
Another alternative would be to encapsulate the tag in CDATA:
<![CDATA[<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>]]>
I covered this topic in more detail here:
How to produce valid HTML with JSPX? (not XHTML)
Yet another ugly solution:
<tag>${null}</tag>