I'm trying to put a timepicker into a form using this plugin: http://jonthornton.github.io/jquery-timepicker/. It seemed like all I had to do was download the library and use jQuery and jQuery ui, but so far I cannot get this to work even though the datepicker from jQuery works great.
Here's my code:
<link rel="stylesheet" href="/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="js/timepicker.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="js/timepicker.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
$(function() {
$('#timepicker1').timepicker();
});
</script>
<form method="post" action = "makecleaningappt">
What day would you like a cleaning?
<input type="text" id="datepicker" name = "date">
What time would you like to start?<br>(example format: 3 pm)
<input type="text" id="timepicker1" name = "time" >
...
I get the following error when I run this in firefox:
TypeError: $(...).timepicker is not a function
I have also tried not embedding the js call to timepicker in a lambda function. I have also tried attaching the timepicker id to a div element. Neither of these options works. I have seen in other SO posts that this error is usually when there is a naming conflict, but I don't have anything named 'timepicker' in my code apart from the include of the timepicker.css and timepicker.js files.
I'd appreciate any suggestions for troubleshooting this. Thanks!
The code works with the jQuery and jQuery ui versions you have. I updated your code to use a hardcoded path and the code runs.
$(function() {
$("#datepicker").datepicker();
});
$(function() {
$('#timepicker1').timepicker();
});
<link rel="stylesheet" href="/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<!-- Updated stylesheet url -->
<link rel="stylesheet" href="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<!-- Updated JavaScript url -->
<script src="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<form method="post" action="makecleaningappt">
What day would you like a cleaning?
<input type="text" id="datepicker" name="date">What time would you like to start?
<br>(example format: 3 pm)
<input type="text" id="timepicker1" name="time">
</form>
It means that the JavaScript file is not where you have it looking. The console probably has a message that says: "Failed to load resource: the server responded with a status of 404 (Not Found)"
If the file is there, than check to make sure that the JS file actually has content in it.
I ran into the same issue. Call it amateurish, but the issue was resolved by adding both JQuery and JQuery UI plugins to my code in addition to the the CSS and JS file custom to Timepicker.co.
Timepicker's site states:
To use jQuery Timepicker you'll need to include two files:
jquery.timepicker.min.js and jquery.timepicker.min.css. Then, assuming
you have an element in your document, with class timepicker,
you can use the code on the right (or the code below, if you are
reading on mobile) to initialize the plugin.
They miss the part about having JQuery and JQuery UI in your code as well (probably due to obviousness for most coders. Regardless, I've submitted a request to change the wording on the website so beginners (like me) don't experience frustration over this silly mistake.
Related
I have created an AdBlock detector, and my jQuery dialog does not seem to be working. Note: the "adblock" variable is already referenced. Also, I am using Squarespace, which is why I had to add the code to the body.
if(adblock) {
$("body").html('<div id="alert-dialog" title="Turn off AdBlock"> Please turn your AdBlocker off. It hurts our business. To turn off AdBlock, just disable it on this page. Thank you.<br><br><br> Sincerely, The <i>Wildwood Howl</i></div>'+$("body").html());
$(function() {
$( "#alert-dialog" ).dialog();
});
}
Here is the error:
TypeError: $("#alert-dialog").dialog is not a function
AKA the dialog function is undefined. I don't know why. Here are my added links and scripts.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
Click here to see my page. Also, there are supposed to be background images, but they are not showing up.
I can provide a jsfiddle for this. Thanks. Help is appreciated.
The problem is probably because you're adding jQuery twice.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
---------------^ remove this
jQuery UI extends the $ created by jquery-1.10.2, but then you add jquery-latest.min.js which probably overwrites the $ created earlier which has the jQuery UI functions.
also make sure you're code runs after these two scripts are evaluated and DOM is ready
I'm trying to upload a file and send it to a java servlet using post method. My dojo is 1.8. Just started working with javascript and still have tons to learn. Please correct me if you can. So i have a couple of undefined attributes: label, UploaderID and dojo source path which is supposed to be true!
**************** REVISED CODE ***************************
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>dojox.form.Uploader</title>
<link href="dijit/themes/dijit.css" rel="stylesheet" />
<link href="dijit/themes/claro/Common.css" rel="stylesheet" />
<link href="dijit/themes/claro/form/Common.css" rel="stylesheet" />
<link href="dijit/themes/claro/form/Button.css" rel="stylesheet" />
<link href="dojox/form/resources/UploaderFileList.css" rel="stylesheet" />
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"
data-dojo-config="parseOnLoad: true, async: true,
isDebug: true,
packages: [{name: 'dojo', location: '.'},
{name: 'dijit', location:
'/dojo/dijit'},
{name: 'dojox', location:
'/dojo/dojox'},
]"></script>
<script>
dojo.require("dojo.domReady")
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.require("dojox.form.Uploader");
dojo.require("dojox.form.uploader.FileList");
dojo.require("dojo.parser");
});
</script>
</head>
<body class="claro">
<form method="post" action="user" id="myForm" enctype="multipart/form-data" >
<fieldset style="background-color:lightblue;">
<h1 id="greeting">User Administration</h1>
<p>First Name: <input type="text" name="fname" size="20">
LastName: <input type="text" name="lname" size="20"></p>
<input class="browseButton" name="uploadedfile" multiple="false"
type="file" data-dojo-type="dojox.form.Uploader" label="Select Some File"
id="uploader" />
<p><input type="submit" label="Submit" data-dojo-type="dijit.form.Button" />
</p>
<div id="files" data-dojo-type="dojox.form.uploader.FileList"
uploaderId="uploader"></div>
</fieldset>
</form>
</body>
</html>
I'm noticing several errors here:
First line in your <script>:
dojo.required("dojo.domready")
dojo.required() does not exist and should be dojo.require().
Besides that, dojo.domready is not even a module and should be dojo.domReady
The following code is just wrong:
function(parser){
parser.parse();
});
You probably copy pasted it from a code example that was using AMD, however, you're no longer using AMD (but dojo.require()), so this code won't even compile.
However, you're using the parseOnLoad mechanism, so in fact you don't need to parse the page by yourself (this will even cause errors because you're going to parse the same widgets twice).
Remove that part of the code, all you need to make the parse on load mechanism to work is:
dojo.require("dojo.parser");
This code looks like some failed try to convert an AMD example to non-AMD code, another thing you're doing wrong is:
dojo.require("dijit.form/Button");
You should use the dot notation when usin pre-AMD code (dijit.form.Button). Dojo will probably understand this, at least it will in the recent Dojo versions, but I doubt that this will work in older versions of Dojo.
You're splitting attribute names by a newline, for example:
<input class="browseButton" name="uploadedfile" multiple="false" type="file" data-
dojo-type="dojox.form.Uploader"
label="Select Some File" id="uploader" />
The attribute name data-dojo-type should probably be one 1 line, I don't think it's valid if you split that attribute onto multiple lines.
The Dojo configuration property to parse the page when it's loaded is parseOnLoad (not ParseOnLoad). I'm not sure if Dojo handles these properties case insensitive, but normally JavaScript properties are case sensitive.
However, you're already using the data-dojo-config property on your <script> tag loading Dojo, so you actually don't even need that.
If you fix all these errors your script should work fine (with or without AMD), as you can see in this fiddle: http://jsfiddle.net/e65EY/
Have set up the dojo.js correctly? How are you using your application? Have you downloaded the dojo source files in your machine or using some remote server.
You can use the google CDN as show below. Also have look over here of setting your dojo source.
src="//ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"
In addition to #Dmitri comments.
Remove the below line.
<script> dojoConfig ={isDebug:true, ParseOnLoad: true,};</script>
because you are redefining the dojoConfig in the very next line via. data-dojo-config
<script type="text/javascript" src="dojo/dojo.js"
data-dojo-config="async: true,isDebug: true,parseOnLoad: true"></script>
Also you can use the new AMD format for require() call as below.
<script type="text/javascript">
require([
"dojo/parser",
"dijit/form/Button",
"dijit/Dialog",
"dijit/form/TextBox",
"dojox/form/Uploader",
"dojox/form/uploader/FileList"
"dojo/domReady!"
], function (parser, Button, Dialog, TextBox, Uploader, FileList ) {
// now parse the page for widgets
parser.parse();
// Your code will go here
});
</script>
I am using uniformjs to style some html element but when i try to update an element such as a check box using
$.uniform.update('input[type=checkbox]');
I get the error
$.uniform is undefined
any one else have an idea how to solve this?
I have both jQuery and the uniform.js added to the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.uniform.min.js" type="text/javascript" charset="utf-8"></script>
What's weird is this worked when it was a regular HTML page and stopped working when i made it into a ASP.NET page and added custom form validators. Perhaps there is some clash?
Reason for this error is browser cant identify $.uniform which can be because of following two reasons:
You have not included uniform.js file to your page, check if a similar looking lines is present in your markup.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.uniform.js"></script>
You are referencing it before its been loaded (have you included it at the end of the page, after the markup?)
You have to load all your dependencies and the current library itself to make it work.
For your css:
<link rel="stylesheet" href="uniform.default.css" media="screen" />
For your javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.uniform.js"></script>
Please, check this JSFiddle that I've build for you, showing uniformjs working.
i have tried all i could think of to fix this problem. I have a inline datepicker on my site with an alternative input field. Here is my code:
$(function() {
$( "#datepicker" ).datepicker({
altField: "#dt",
});
});
and i get this error in chrome developer tools...oh, and it does not show up at all.
Uncaught TypeError: Object [object Object] has no method 'datepicker'
this is the alternate field:
<center><img class="board" id="header3" src="http://codtelevision.com/wpimages/CODherePART3.png"></img></center>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://www.codtelevision.com/date.css" type="text/css" media="screen">
<div id="datepicker"></div><br>
<input id="dt" style="outline:none;" readonly type="text"></input><br>
This problem might be due to jQuery being included more than once in your file.
I was experiencing this exact issue until I came across this thread. I found that one of my ASP include statements was bringing in a second version the main jQuery library later in my code. Removing the redundant include caused it to work perfectly.
Have you actually linked in the main jquery library as well? Also you are not setting the script type of the script file (this may not have much affect).
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js">
</script>
I have created a jsfiddle for your code, and it appears to work just fine. I think there is something else wrong. From what you have pasted I am still wondering if you have included the jquery library.
Live DEMO
Well, you don't have the jQuery libary included, only the jQuery UI lib.
Besides that, you need a jQuery CSS file to make a Datepicker, because .datepicker() adds the necessary classes to the objects it makes.
You can create your own UI CSS file on the fly here: http://jqueryui.com/themeroller/
You may be having a jQuery conflict. Give it a try in noConflict mode like so:
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$("#datepicker").datepicker();
});
})(jQuery);
</script>
The order in which we include js files matter.
http://www.irisclasson.com/2012/02/21/the-order-of-thingsobject-has-no-method-datepicker/
The above link solved my problem.
I have a JavaScript code in Dreamweaver, but it tells me there's a syntax error on line 2. Where's the problem?
<link rel="stylesheet" type="text/css" href="scripts/rates/rates.css" />
<script src="scripts/rates/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("scripts/rates/ratesresult_alb.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('scripts/rates/ratesresult_alb.php?randval='+ Math.random());
}, 1800000);
});
</script>
<div id="responsecontainer">
</div>
the same script works on a site ak-invest.com and in the new website does not work http://69.73.130.182/~akinvest/index.php/en/kembimi-valutor
I am not seeing any syntax errors in the code presented. Are you sure that jquery is loading? Try adding a simple script to replace your current one:
alert($);
This should alert something if jquery is loaded.
You could also check in the html panel of firebug to make sure the libary is being loaded.
Another solution would be to load jquery from a known source such as the Google CDN so that you know you have it.
Example:
<link rel="stylesheet" type="text/css" href="scripts/rates/rates.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("scripts/rates/ratesresult_alb.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('scripts/rates/ratesresult_alb.php?randval='+ Math.random());
}, 1800000);
});
</script>
<div id="responsecontainer">
</div>
Change
<script src="scripts/rates/jquery-latest.js"></script>
to :
<script src="scripts/rates/jquery-latest.js" type="text/javascript" />
Older versions may not detect the jquery way of accessing variables and elements. You can ignore those errors and see if your script actually works. Did your script works well, despite of those errors?
Alternatively try changing adding type attribute as posted by Mateusz.
<script src="../scripts/rates/jquery-latest.js" type="text/javascript" />
or
<script src="./scripts/rates/jquery-latest.js" type="text/javascript" />
Your syntax error is almost certainly going to be in the included js file. And it looks like you didn't write it (it's a jquery library, right?) so the likelihood of there really being a syntax error in the file is rather low.
Therefore, what is actually happening is the file isn't at the path you're looking for it (it's a relative URI), and a HTML 404 page of some sort is being parsed as JavaScript instead of the JavaScript file itself.
Most probably.