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.
Related
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' });});
});
});
$('#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>
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>
I am new to using jquery and i have written the following code and it does not work and i am not able to figure out what the mistake is ..syntax might also be wrong.
It has 2 submit buttons while using button1 it should get info from the DB and display on the same page.i.e., get the title from the DB and display on the same page.
While second submit button is used to submit title into the DB and update it(written in script_2.php).
<form id="myForm" method="post">
id: <input type="text" name="search"/>
<input type="button" id="button1" value="Submit to script 1" />
<input type="button" id="button2" value="Submit to script 2" />
title:<input type="text" name="title"/>
</form>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$.post('script_1.php', { name: form.name.value },
function(output) {
$('#age').html(output).show();
}) ;
}) ;
$("#button2").click(function(){
$('form#myForm').attr({action: "script_2.php"});
$('form#myForm').submit();
});
});
</script>
</head>
Help appreciated.
You are missing the }); to close the $("#button1").click function:
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$.post('script_1.php', { name: form.name.value },function(output) {$('#age').html(output).show();});
});
$("#button2").click(function(){
$('form#myForm').attr({action: "script_2.php"});
$('form#myForm').submit();
});
});
</script>
You have too many closing
<script type="text/javascript" src="jquery.js"></script></script>
to
<script type="text/javascript" src="jquery.js"></script>
jQuerys attr() expects strings, not an object, like:
$('form#myForm').attr("action", "script_2.php");
You form is before your <head> tag. It should be after your </head> and in a <body> tag.
You are putting the results of your ajax call in an element with id age, but I don't see any element with that id on your page.
That's all for errors (that I see as of now), but you can also speed up your selecter here $('form#myForm') by changing it to $('#myForm') since id's are unique, and I doubt you have any element with the id myForm which isn't a form.
I am looking for a way to get a response in a form of a javascript alert after a form has been submitted using a php script. I guess ajax should do this but Im not an Ajax guy yet. A simple sample code would help a lot. Thanks for reading
In your PHP code after successfully saving/processing data, write/echo the following inside <body> tag. This will show an alert when rendered on client's browser.
<script language="javascript" type="text/javascript" >
alert('This is what an alert message looks like.');
</script>
If you want to venture into ajax and jquery - grab a copy of the jquery core and then do something like the following:
(Now with a full example. You will also need jquery.form.js plug in)
<html>
<body>
<script type="text/Javascript" src="jquery-1.2.4.min.js"></script>
<script type="text/Javascript" src="jquery.form.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$("#SUBMIT_BUTTON").click(function()
{
var options = {
url: 'processForm.php',
success: function(){
alert('success');
},
error: function() {
alert('failure');
}};
$('#MYFORM').ajaxSubmit(options);
return false;
}
)});
</script>
<form id="MYFORM" method="post">
<input type="text" name="testing">
<input type="button" value="click me" id="SUBMIT_BUTTON">
</form>
</body>
</html>