$('#datetimepicker1').datetimepicker();
I am using this code, and have defined all the css and js. Even though this error comes..
What am i doing wrong ?
First of all you should have the following links to the jquery-ui , jquery-css and the jquery-api :
<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>
Your HTML could be :
<p>Date: <input type="text" id="datepicker"></p>
Your script should be if you are calling the datepicker() function via id :
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
OR if you want to invoke it via the class name , it should be :
<script>
$(function() {
$(".yourClassName").datepicker();
});
</script>
Related
I want to fetch the json data from function and not file.
How can i change the autocomplete.php to a PHPfunction?
My code:
<html>
<head>
<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>
$(function() {
$( "#skills" ).autocomplete({
source: 'autocomplete.php'
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="skills">Skills: </label>
<input id="skills">
</div>
</body>
</html>
Add get or post parameter to your ajax, for example action=func1 and in your php file make a switch and in the case of action is "func1" just call func1().
I have the following html code that works as is: (I've tried the two answers given below but neither of them work any other suggestions would be appreciated)
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js"></script>
<script src="http://bililite.nfshost.com/inc/jquery.timepickr.js"></script>
</head>
<body>
<script type="text/javascript">
$(function()
{
$('#timepickr-start:eq(0)').timepickr
({
convention: 12,
hoverIntent: false
})
});
</script>
<script type="text/javascript">
$(function()
{
$('#timepickr-end:eq(0)').timepickr
({
convention: 12,
hoverIntent: false
})
});
</script>
<div>
<input id="timepickr-start" name='start' />
</div>
<br>
<div>
<input id="timepickr-end" name='end' />
</div>
</body>
</html>
Is there a way to have just one function? I'm using php and getting back $_POST['start'] and $_POST['end']. It's not much of a problem when I have only two time input fields but on some pages I have 6 or 8.
If you would like to initialize multiple timepicker instances with a single javascript function, you could add a class, let's say timepickr, to each instance to initialize, and use the folowing function:
<script type="text/javascript">
$(function()
{
$(".timepickr").each(function() {
$(this).timepickr({
convention: 12,
hoverIntent: false
});
});
});
</script>
There are several ways in which this can be achieved.
1.Create a common class for all the required fields and add the function to that class like this:
$('.classname').timepickr({
convention: 12,
hoverIntent: false
});
OR
2.Use the attribute starting with selector
$("input[id^='timepickr']").timepickr({
convention: 12,
hoverIntent: false
});
The second method could prove more feasible in case you have several such input fields and you don't wanna bother adding a class to each field.
I'm working in twitter Bootstrap with PHP. I make a search form and apply autocomplete to search field but its not working, though its working fine when I test it outside the my working directory.
Here are my jquery files:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#term").autocomplete({
source:'action.php',
minLength:1
});
});
</script>
<script src="assets/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$("#datepicker").datepicker();
</script>
<script type="text/javascript">
$("#datepicker1").datepicker();
</script>
<script type="text/javascript">
$("#datepicker2").datepicker();
</script>
<script type="text/javascript">
$("#datepicker3").datepicker();
</script>
<script type="text/javascript">
$("#datepicker4").datepicker();
</script>
and here is my search field in the form:
<input type="text" class="span3 search-query" id="term" name="term" placeholder="search by customer-name, company-name and location" autocomplete="off">
Here is the css for autocomplete:
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
Here is my action.php file:
<?php
include("config.php");
$term=$_GET["term"];
$query=mysql_query("SELECT * FROM customers where name like '%".$term."%'");
$json=array();
while($customer=mysql_fetch_array($query)){
$json[]=array(
'value'=> $customer["name"],
'label'=>$customer["name"],
);
}
echo json_encode($json);
?>
On Google chrome press F12 before loading the page and see in the 'Network' tab if the jquery.autocomplete.js is loading. If its not, Please use the correct relative path for it.
I have two forms I named it main.php and sample.php.... For main.php I have a calendar/datepicker and its working. But then when I proceed to the next page or to the sample.php the calendar/datepicker its not displaying anymore... I just copy the codes from main.php to sample.php
Here's my code for main.php:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepickerfrom" ).datepicker();
});
$(function() {
$( "#datepickerto" ).datepicker();
});
</script>
From: <input type="text" id="datepickerfrom"name="from"> To: <input type="text" id="datepickerto"name="to">
And For sample.php:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function () {
$('.checkall').on('click', function () {
$(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
});
});
$(function() {
$( "#datepickerfrom" ).datepicker();
});
$(function() {
$( "#datepickerto" ).datepicker();
});
</script>
From: <input type="text" id="datepickerfrom"name="from"> To: <input type="text" id="datepickerto"name="to">
<?php
echo "<div><input type='checkbox' class='checkall'> Check all</div>";
?>
But in the sample.php I added a code for checkbox all where I also use a script...
Thanks/.
Thats because you are calling jquery two times in sample.php. Either remove
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
or
<script src="http://code.jquery.com/jquery-latest.js"></script>
P.S jquery-ui.js should come after jquery
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
You need those lines on sample.php, tried it, it worked.
My jQuery codes doesn't work, and I can't find why. The code seems to be ok.
My html code
<html>
<head>
<title>Learning Jquery</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<input type="file">
<br />
<input type="submit" disabled="disabled">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="myjquery.js"></script>
</body>
</html>
The javascript code
$(document).ready(function (){
$('input[type=file]').change(function(){
$(this).next().removeAttr('disabled');
});
});
If you want to enable your submit button, then try this javascript code:
$(document).ready(function (){
$('input[type=file]').change(function(){
$(this).closest('form').find('[type=submit]').prop('disabled', false);
});
});
.next() selects the immediately following sibling of the element you chose, which in your case would be a break (<br />). Try instead:
$(this).siblings('input[type=submit]').removeAttr('disabled');
jsFiddle example