I have two php pages, search.php and result.php. Both of these pages use jQuery and both have jQueryUI datepickers and work perfectly independently of each other.
I've included search.php in my result.php file because I want to use it as a sidebar, now I seem to have some kind of conflict because the datepicker in search.php has stopped working, in that the calendar doesn't appear and so is unusable. jQuery is working in both files, I've confirmed this by printing to the screen. Also if I remove the datepicker initialisation code from result.php (leaving other jQuery code I also have in the page) then the other datepickers from search.php begin to work again. The IDs are unique, I'm using noConflict to make sure jQuery can work on both pages and as I say, it does - the only issue is when I initialise the datepicker on result.php it causes those in search.php to stop working.
Using IE's JS debugger I can see that the datepicker in result.php is initialised first, then the others get initialised. There is no script error or warning so I don't know where else to go! Any help appreciated.
UPDATE
I've stripped out all non-related code so I can upload it here. There's two files, testSearch.php and testResult.php. The testResult.php includes test.search.php as it will be displayed as a sidebar. Both pieces of script work in isolation but once both are enabled, the datepicker in testSearch.php stops working.
testResult.php
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
</head>
<body>
<div id="sidebar"><?php include 'testSearch.php';?></div>
<div id="content">
<div id="availCal"></div>
</div>
<script>
var jResult = jQuery.noConflict(true);
jResult(document).ready(function() {
jResult( "#availCal" ).datepicker({
changeMonth: false,
changeYear: false,
firstDay: 1,
numberOfMonths: 3,
dateFormat: "dd-mm-yy",
showCurrentAtPos:1
});
});
</script>
</body>
testSearch.php
<!-- include jquery and jquery ui -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<label for="arrPicker">Arrival date:</label><br />
<input class="dateSelect" type="text" id="arrPicker" name="arr" value="<?php echo $arr; ?>" readonly />
<script>
var jSearch = jQuery.noConflict(true);
jSearch(document).ready(function() {
jSearch('.dateSelect').each(function(){
jSearch(this).datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
constrainInput: true,
dateFormat: "dd-mm-yy",
minDate: 1,
showAnim: "slideDown"
});
});
});
</script>
As an asside, am I correct in leaving out the doctype/head/body tags from the file which will be included (testSearch.php)? I assume they aren't necessary since testResult.php already has those tags and testSearch.php will just be injected into that.
Try use
jQuery(function($){
$('body').on('focus',"#yourTagId", function(){ $(document).ready(function() {
$('#yourTagId').datepicker({ dateFormat: 'dd-mm-yy' });});
});
});
Related
I'm trying to do something that seems like it should be simple, but somehow won't tie up properly.
The user selects a date from a jquery datepicker, where I have showWeek enabled.
$(".datepicker").datepicker({
showWeek: true,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd'
});
But, when the resulting date string is fed into a php datetime, the week does not correspond, and is 1 week further into the future.
$start_date = isset($_POST['startdate']) ? $_POST['startdate'] : "";
$start = new DateTime($start_date);
echo $start->format("W");
IE, 2018-10-02 shows as week 39 in my datepicker, but the echo above from reading that date back into a datetime and formatting for week returns week 40.
So, as far as I can tell, the jquery datepicker and php datetime class do not agree on which weeks are which by default.
Is there a way to reconcile this?
The PHP date says it conforms to ISO-8601, Checking online confirms for me that php has it right, so how do I fix the datepicker to display correctly?
Ok here is the solution: according to jquery ui you need to specify the first day and in your code you are missing it:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Show week of the year</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
showWeek: true,
firstDay: 1,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd'
});
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
Just add firstDay: 1, and everything works as you expect.
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 am writing a small script that will query a database for a title and whilst you enter your title it brings back suggestions.
I have found an example and managed to create one as below:
<head>
<title>Match Form/title>
<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript">
$(document).ready(function()
{
$("#course").autocomplete("get_title_list.php", {
width: 260,
matchContains: true,
mustMatch: true,
selectFirst: false
});
$("#course").result(function(event, data, formatted) {
$("#course_val").val(data[1]);
});
});
</script>
</head>
That then works and allows to print out my result on the page, my next task is to have multiple text boxs along multiple titles and allow someone to search the database and then return the results to the allocated box.
I know id need to assign each box an ID and then select that id in the jquery which is where i am struggling.
Any help would be greatly appreciated!
Instead of an ID, change the text boxes to classes. Something like this should work with the boxes having the class "course":
$(".course").autocomplete("get_title_list.php", {
width: 260,
matchContains: true,
mustMatch: true,
selectFirst: false
});
$(".course").result(function(event, data, formatted) {
$(this).next(".course_val").val(data[1]);
});
I'd suggest using a class instead of an ID. IDs need to be unique, but you can have multiple elements with the same class, so you can select them all at once easily.
Example:
<input id="A" class="auto" />
<input id="B" class="auto" />
<script>
$('.auto').autocomplete({}); // the '.' is used to select by class
</script>
hi im trying to integrate a jquery datepicker to my codeigniter project.. the problem is that i cant get it to work .. my source code came from http://view.jquery.com/tags/ui/latest/demos/functional/#ui.datepicker
ok heres my code:
view:
<srcipt>
$("#formatted").datepicker({
dateFormat: $.datepicker.ISO_8601,
showOn: "both",
buttonImage: "templates/images/calendar.gif",
buttonImageOnly: true
});
</script>
<form action="add" method="post" class="form label-inline uniform" />
<input type="text" size="30" value="" id="formatted"/>
<input type="submit" class="btn btn-grey" value="Add User"/>
</form>
<script src="/assets/js/jquery/jquery-1.5.2.min.js"></script>
EDIT
i already added all the js sources but its still not working
<script src="/assets/js/jquery/jquery-1.5.2.min.js"></script>
<script src="/assets/js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="/assets/js/misc/excanvas.min.js"></script>
<script src="/assets/js/jquery/facebox.js"></script>
<script src="/assets/js/jquery/jquery.visualize.js"></script>
<script src="/assets/js/jquery/jquery.dataTables.min.js"></script>
<script src="/assets/js/jquery/jquery.tablesorter.min.js"></script>
<script src="/assets/js/jquery/jquery.uniform.min.js"></script>
<script src="/assets/js/jquery/jquery.placeholder.min.js"></script>
<script src="/assets/js/widgets.js"></script>
<script src="/assets/js/dashboard.js"></script>
EDIT
created a sample view page for datepicker.. still not working even the link for the image is not working.
<html>
<head>
<script src="/assets/js/jquery/jquery-1.5.2.min.js"></script>
<script src="/assets/js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="/assets/js/misc/excanvas.min.js"></script>
<script src="/assets/js/jquery/facebox.js"></script>
<script src="/assets/js/jquery/jquery.visualize.js"></script>
<script src="/assets/js/jquery/jquery.dataTables.min.js"></script>
<script src="/assets/js/jquery/jquery.tablesorter.min.js"></script>
<script src="/assets/js/jquery/jquery.uniform.min.js"></script>
<script src="/assets/js/jquery/jquery.placeholder.min.js"></script>
<script src="/assets/js/widgets.js"></script>
<script src="/assets/js/dashboard.js"></script>
</head>
<body>
<script>
$("#formatted").datepicker({
dateFormat: $.datepicker.ISO_8601,
showOn: "both",
buttonImage: "http://pgoadmin.com/assets/images/calendar.gif",
buttonImageOnly: true
});
</script>
<form>
<input type="text" size="30" value="" id="formatted"/>
</form>
</body>
</html>
You need to load in jQuery UI to use the date picker
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.js
Dont forget the images and CSS as well:
http://jqueryui.com/download
You need to include jquery before you start using it. Try moving the JS code below the jquery tag.
And as Wes says, you need to include jquery UI datepicker component as well.
Also, and this maybe a typo, your tag says "sricpt" instead of "script".
and don't forget to add base_url(); to your js paths
e.g.
<script src="<?php echo base_url(); ?>assets/js/dashboard.js"></script>
I'm trying to use jquery ui autocomplete but its not working. I just pasted an old code I have, that works in other application that uses with jquery 1.4.4 and jquery ui 1.8.6. Now I'm trying to use with jquery 1.6 and jquery ui 1.8.12. The date picker is working but the autocomplete just blinks the field and shows nothing. Here are the codes:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>autocomplete</title>
<link rel="stylesheet" href="css/jquery.ui.all.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#m').autocomplete({
source: "search.php",
minLength: 2
});
$('#dt').datepicker({
dateFormat: 'dd/mm/yy',
showWeek: true,
firstDay: 1,
changeMonth: true,
changeYear: true
});
});//jQuery End
</script>
</head>
<body>
<div class="ui-widget">
<label for="m">uf: </label>
<form>
<input type="text" id="m" name="m" />
<input type="text" id="dt" class="dt" />
</form>
</div>
</body
</html>
<?php
include_once 'inc/mysqli.php';
//$term = strtolower($_REQUEST['term']); //this was not needed
$term = $_REQUEST['m'];
$query = "SELECT * FROM cidades WHERE nome LIKE '%$term%'";
$result = $mysqli->query($query);
$arr = array();
while($obj = $result->fetch_assoc()) {
$arr[] = $obj['nome'];
}
//echo '('.json_encode($arr).')'; //for jsonp
echo json_encode($arr);
?>
I have no patience with this code and probably is because of it that I can't see the mistake.
[Edited]
If I make a simple SELECT statement the autocomplete works but not in the way I want. It shows all the results and I want it to show the filtered results by the $term variable which doesn't work. It will become very slow when it starts to search the real table with more than 9000 entries.
Is search.php in the same folder as this page?
Have you checked the network tab of firebug to see if search.php is being called correctly and returns the correct results?