I've been having trouble implementing jQuery - in particular, replicating this exercise from Code Academy. I understand from this other question on Stack Overflow that the <script> referencing jQuery.js needs to be placed before the <script> referencing the local JavaScript file in order for the $(document).ready(); to be recognized.
As such, here is index.html:
<!DOCTYPE html>
<html>
<head>
<title>Behold!</title>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<script type='text/javascript' src='index.js'></script>
</head>
<body>
<div id="menu">
<h3>jQuery</h3>
<div>
<p>jQuery is a JavaScript library that makes your websites look absolutely stunning.</p>
</div>
<h3>jQuery UI</h3>
<div>
<p>jQuery UI includes even more jQuery goodness!</p>
</div>
<h3>JavaScript</h3>
<div>
<p>JavaScript is a programming language used in web browsers.</p>
</div>
</div>
</body>
</html>
And then here is my index.js:
$(document).ready(function() {
$("#menu").accordion({collapsible: true, active: false});
});
In both Chrome and IE, this displays as a entirely blank page, with no trace of the jQuery accordion or text whatsoever.
Please let me know if I'm overlooking something - I really appreciate the help. Thanks!
This:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.j" type="text/javascript"></script>
Should be this:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
I don't know if this error is just from copy'n'paste but the file extension is incorrect (should be "js" and not "j").
Furthermore you do not include jQuery itself (only jQuery UI).
Use the following head-Area:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<script type='text/javascript' src='index.js'></script>
These work for me.
Related
I am kinda new to programming, I wanted to make this example run on my php page http://jsfiddle.net/N78hs/2138/ but it just doesnot work for me
I've tried to create a .js file in (root/js) folder and call it on my php page but it didnot work for me.
here you can find head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
and here is the body
<body>
<div id="fullcalendar"></div>
</body>
thank you in advance
I think you did not connect all js and css libraries.
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script src="http://qtip2.com/static/javascripts/libs/jquery.fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://qtip2.com/static/stylesheets/libs/jquery.fullcalendar.css">
<link rel="stylesheet" href="http://qtip2.com/v/stable/jquery.qtip.css">
<script src="http://qtip2.com/v/stable/jquery.qtip.js"></script>
you have to include it in head part of your html. or on the bottom of the body tag.
you just need to add you file in head section
<html>
<head><title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="~/js/my.js"></script>
</head>
<body>
<div id="fullcalendar"></div>
</body>
</html>
I am a complete newbie when it comes to jQuery, but I'm trying to run a simple accordion() code on my HTML page.
This is the link I've used, I included the compressed production jQuery 2.1.0
<head>
<link rel="stylesheet" type="text/css" href="stylesheetkomik2.css">
<script src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="scriptkomik2.js"></script>
<title>Komiktoneel</title>
</head>
The piece of code I'm trying to accordion() is a series of tags with tags in them, which contain paragraphs, like this:
<div id="content">
<h3>This is the first heading</h3>
<div><p>First paragraph</p></div>
<h3>This is the second heading</h3>
<div><p>Second paragraph</p></div>
</div>
scriptkomik2.js contains nothing other than the following code:
$(document).ready(function(){
$("#content").accordion();
})
Is there something wrong in my code or is the linking wrong?
Thank you
You need to add jQuery UI
Accordion is a widget from jQuery UI and this library works on top of jQuery. So you need to add both js to your project.
<script src="js/jquery.js"></script>
<script src="js/jquery.ui.js"></script>
jQueryUI is missing. You have to add jQueryUI as well for accordian widget.
<head>
<link rel="stylesheet" type="text/css" href="stylesheetkomik2.css">
<script src="jquery-2.1.0.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="scriptkomik2.js"></script>
<title>Komiktoneel</title>
</head>
.accordion isn't a valid jQuery method. I think you're looking for jquery UI: https://jqueryui.com/accordion/
Try implementing that and see what happens.
Add the following script tag. Accordion is part of jQuery UI
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
I am trying to build my personal website using express and want to put a datepicker on one of the page.
I tried to change the ejs file of this page, however, nothing works.
I am wondering if it is because that the layout.ejs file exists, and wondering how can I just load jquery-ui in only of the ejs.file? Because I cannot find any related npm to install . Many thanks for answering！XD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
<script>
$(function() {
$( "#datepick" ).datepicker();
});
</script>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
There is another similar question, but I think the answer does not works for me.
node.js - DatePicker jquery UI not workinng
When I just use Express and change the index.ejs like the following, it works , but when there are many pages, it seems that it cannot be loaded...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function() {
$('#datepick').datepicker();
});
</script>
</head>
<body>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
node.js - DatePicker jquery UI not workinng
For whom run into the same problem, this is the reference.
I finally found the answer by checking the code.I was unable to load JQuery for in the layout.ejs, I retyped the following in order to load the bootstrap, but actually by using https://npmjs.org/package/twitter-bootstrap-node twitter-bootstrap-node, there is no-need to load the javascripts again. This may be a common problems for beginners in Node.JS like me.Hope this answer can be helpful to people who run into the same problem and the code is in the answer of the related problem.
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/bootstrap.js"></script>
<script src="/vendor/twitter/less/bootstrap.less"></script>
Hi look at this jsfiddle link http://jsfiddle.net/w7PHj/
you need to use like this....
$('#datepick').datepicker();
I am trying to setup bootstrap-calendar, but I am having some difficulties. I used the command
$ bower install bootstrap-calendar
to download the dependences and I created a test index file which looks like this:
<html>
<head>
<title>calendar test</title>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/language/en-GB.js"></script>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/calendar.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/moment.js"></script>
<script type="text/javascript" src="bower_components/underscore/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-calendar/css/calendar.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/docs/assets/css/bootstrap.css">
<script type="text/javascript">
var calendar = $('#calendar').calendar();
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
Opening index.html with a browser, gives an empty page. Any idea why?
Thanks in advance
It is possible that simply the order which you include your scripts is wrong. I usually put jQuery on top (considering most things are dependent upon it, it will need to be loaded first) then bootstrap.js below it, then underscore, so on and so forth. Scripts should also be included at the end of the body for speed, although it could also be possible that your scripts are running in the head before the dom is loaded, and #calendar is not found simply because it's not there yet. Try those things, good luck!
Weired because it shouldn't matter how things done in Server side.
Master Page:
<head runat="server>
<script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="PageHeadPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</head>
Content Page:
<asp:Content ContentPlaceHolderID="PageHeadPlaceHolder" Runat="Server">
<link href="prettyPhoto315/css/prettyPhoto.css" type="text/css" rel="stylesheet" />
<script src="prettyPhoto315/js/jquery.prettyPhoto.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto({
});
});
</script>
</asp:Content>
though client finds jquery-2.0.2.min.js it fails to execute $(document).ready...
saying '$ reference is not defined'.
I Tried:
when i move the <script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script> to the content page... everything works right.
using <script src="~/jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
the script is not found at all.
same happens if i move a <link href="prettyPhoto315/css/prettyPhoto.css" type="text/css" rel="stylesheet" /> to the master page, the page does not show the specific style sheet.
when checking the output HTML, it all seem correct in the right order.
i uploaded the output HTML to http://pastebin.com/ULi228BF
please help asap. thanks.
Do it declaratively in the master page by dragging the jQuery files from Solution Explorer window to the code view of the mark-up. Then see if it works and compare the two versions of the paths.
GOT IT! OMG KNEW it is something that shouldn't matter
IrishChieftain post got me to test the pages again, and found the problem!
Apperantly the jquery.magnifier.js library i used is incompatible with jQuery 1.6+
are is breaking jQuery script for some reason overriding
therefore:
<script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="windowfiles/dhtmlwindow.js"></script>
<script type="text/javascript" src="jquery.magnifier.js"></script>
<script type="text/javascript"> $(document).ready(); </script>
wont work...
while:
<script src="jquery/jquery-1.3.6.min.js" type="text/javascript"></script>
<script type="text/javascript" src="windowfiles/dhtmlwindow.js"></script>
<script type="text/javascript" src="jquery.magnifier.js"></script>
<script src="jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(); </script>
does!
hope someone can make use of this info.
and thanks for the help.