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>
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' });});
});
});
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.
Hi guys i am trying to write a title matcher, i got it working but when an ajax call is made it no longer works below is my code :
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
$(document).ready(function()
{
$(".course").autocomplete("look_me_up.php",
{
width: 260,
matchContains: true,
mustMatch: true,
selectFirst: false
});
$(".course").result(function(event, data, formatted)
{
$(this).next(".course_val").val(data[1]);
});
});
The text box i want to update is called from a ajax request which is made first :
<input type="text" name="course" id="text1" value="Find Title In DB" class="course">
<input type="hidden" id="val1" class="course_val">
And the ajax request is :
function checks()
{
$.ajax({
type : "POST",
url : "get_data.php",
data : "function="+"get_text",
success : function(msg)
{
$(update_me).html(msg);
}
});
}
I assume the jquery is acting up because the its trying to update a value pulled from the ajax request? I am struggling to get it to work so any help would be appreciated.
It looks to be a problem with the dynamic element creation.
You have loaded some course elements and autocomplete was initialized on them, later you seems to be replacing those elements with new elements. Here you are not initializing autocomplete for the new elements.
The solution is to initialize the autocomplete for the dynamically added elements
function createCourse(els){
els.autocomplete("look_me_up.php", {
width: 260,
matchContains: true,
mustMatch: true,
selectFirst: false
});
els.result(function(event, data, formatted){
$(this).next(".course_val").val(data[1]);
});
}
$(document).ready(function() {
createCourse($(".course"))
});
function checks() {
$.ajax({
type : "POST",
url : "get_data.php",
data : "function="+"get_text",
success : function(msg) {
$(update_me).html(msg);
createCourse($(".course", update_me))
}
});
}
Change
$(document).ready(function()
to
$(document).ajaxComplete(function()
and bingo :)
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'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?