I am using JQuery autocomplete option to get values from database using PHP. I have 2 text boxes and I am trying to use same PHP file to get the required results.
My HTML code is
<tr>
<td>LOB</td>
<td><input autocomplete="off" type="text" name="ABC" class="autocomplete"/></td>
</tr>
<tr>
<td>Project Name</td>
<td><input autocomplete="off" type="text" name="PQR" class="autocomplete"/></td>
</tr>
and my JQuery is
$(document).ready(function() {
$( ".autocomplete" ).autocomplete({
source: 'LiveSearch.php?name='+ $(".autocomplete").attr('name') + '&',
minLength: 2
});
});
But as these there are 2 elements with same class. I am not getting correct arrr('name'). MySQL will differ based on this name. I tried (this) but still not getting the result.
If I am in the first text box then name should be of that text box etc..
Please let me know if I am missing anything.
You can target the textbox using name.
$('[name=ABC]').val()
Use id to differentiate
<tr>
<td>LOB</td>
<td><input autocomplete="off" type="text" name="ABC" id="id1" class="autocomplete"/></td>
</tr>
<tr>
<td>Project Name</td>
<td><input autocomplete="off" type="text" name="PQR" id="id2" class="autocomplete"/></td>
</tr>
//Script
$(document).ready(function() {
$( ".autocomplete" ).autocomplete({
source: 'LiveSearch.php?name='+ $("#id1").attr('name') + '&',
minLength: 2
});
});
You're mixing the scope of 'all autocompletes' and 'the current automplete'. One way of dealing with this is to use jQuery's each() method:
$('.various-things').each(function () {
console.log($(this).attr('something');
});
This would log the 'something' attribute of each .various-things on the page. It looks like what you'd need is:
$(document).ready(function() {
$( ".autocomplete" ).each(function () {
$(this).autocomplete({
source: 'LiveSearch.php?name='+ $(this).attr('name') + '&',
minLength: 2
});
});
});
Now it'll find all autocompletes and set them up using their own name.
Related
Suppose I have a table like this with <tr> and <td> inside PHP loop :
//Some code...
echo "<table id='rowClick'>";
while($row=mysql_fetch_assoc($result){
echo "<tr><td><input type='text' value='{$row['item']}'></td></tr>";
}
echo "</table>";
//Rest of code
I've used a CSS :
table tr.active{
background:red;
}
And For JQuery :
<script>
$(document).ready(function(){
$("#rowClick").children("tbody").children("tr").children("td").keydown(function(){
$(this.parentNode).toggleClass("active");
});
$("#rowClick").children("tbody").children("tr").children("td").keyup(function(){
$(this.parentNode).toggleClass("active");
});
});
</script>
I'm not so familiar with JQuery. All I want is that when user select <td> input field ( or being focused ) in any row, the color of the <tr> will be changed . According to the above jquery it works but not as expected, because each time I select input field it turns red, then when selecting next one it returns back to default table color and so on.
I think this is what you are looking for:
$(document).ready(function(){
$("#rowClick").find("input").on("focus", function(){
$(this).closest("tr").addClass("active");
}).on("blur", function() {
$(this).closest("tr").removeClass("active");
})
});
I'm targeting the input from the table to look for focus/blur, then from the inputs I'm targeting the closest parent tr to highlight.
JSFiddle
If you want to highlight the td instead, just target that instead:
JSFiddle
You say when it is focused but I don't understand why you use keydown/keyup? they are used for keyboard events. read here
Try:
$("#rowClick tr input").on("focus", function(){
$("#rowClick tr").removeClass("active");
$(this).parents("tr").addClass("active")
})
You assign the click event on the tr which is not on the td but it will bubble up to the tr and since you are changing the color of the entire row this is cleaner.
You can use the focus and focusout events of the textbox to target its parent <tr> and add and remove the active class as necessary:
$(function() {
$('#rowClick input').on('focus', function() {
$(this).closest('tr').addClass('active');
}).on('focusout', function() {
$(this).closest('tr').removeClass('active');
});
});
Since focusin/focusout events bubble (unlike blur), you can simplify things by actually attaching the listener to the tr, rather than the inputs. This has the benefit that if you are changing between inputs in the same row, it won't fire (because it isn't needed...you're still in the same row). Like this:
$(document).ready(function(){
$("#rowClick tr").focusin(function(){
$(this).addClass("active");
}).focusout(function() {
$(this).removeClass("active");
});
});
table tr.active{
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id='rowClick'>
<tr>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
</table>
I am studing jquery to post input tables. All inputs need to be posted with their indexes. I am guessing that i cant use ids or classes of input elements to post values with cell location info. .Because Input tables are generated dynamically according to user answer.
For Example;
User enters '4' value to a question and a 3col 4row input table is generated.
<table>
<tr><td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td>
</tr>
<tr><td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td>
</tr>
<tr><td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td>
</tr>
<tr><td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td>
</tr>
</table>
And by using jquery handler i can store the values...
$(function () {
$("input").change(function() {
// save this.value() in an array.
array.push(this.value());
});
});
I stuck at this moment because i have to store values with their (x,y)indexes in the table. Shortly; values of this 2 dimension table must be converted to a 2dim. data array in server-side.
Something like...
$(function () {
$("input").change(function() {
array[this.col][this.row] = this.value();
});
});
To sum up;
Is it possible to get the location(col,row) of an element, which is inside a table?
You can use index() method as follows
$(function () {
$("input").change(function () {
var row = $(this).closest('tr').index(); //index of row
var col= $(this).closest('td').index(); //index of column
// your code
});
});
JSFiddle Demo
Try something like this:
$(function () {
var $rows=$('tr');/* refine if using column heading row to something like $('tr:gt(0)')*/
$("input").change(function() {
var $row=$(this).closest('tr');
var rowIndex=$rows.index($row);
var colIndex=$(this).parent().index();
/* do something with indexes*/
});
});
if you want store value of column and rows in array you can use a multidimensional array (array of arrays).
first of all you insert in default array other arrays that rapresent yuour rows and then when the field change you'll store data in array first data:rows second data column.
<script type="text/javascript">
$(document).ready(function(){
var array=[]
for(a=0;a<$('table tr').length;a++){
array[a]=[]
}
$("input").change(function() {
var val=$(this).val()
var row=$(this).parents('tr').index()
var column =$(this).parent('td').index()
array[row][column] = val
console.log(array)
});
})
</script>
Hello i have a form like this:
<tr><td>First Name:</td><td><input data-check="f_n" type="text" name="first_name" /></td>
<td data-msg="f_n"></td></tr>
<tr><td>Last Name:</td><td><input data-check="l_n" type="text" name="last_name" /></td>
<td data-msg="l_n"></td></tr>
now i did a jquery $.post to connect to php to desplay a error in case is needed, so far i have this:
<script type="text/javascript">
$(document).ready(function(){
$('[data-check]').click(function(){
var a = $(this).data('check');
$.post('website/register/checks.php',, function(data){
$('[data-msg='+ a +']').html(data);
});
});
});
</script>
I'm really confuse, on how to send the correct data according to the users input.. and show it in the correct <td></td>
You need to set the post data as the second parameter of $.post
$(document).ready(function(){
$('[data-check]').click(function(){
var a = $(this).data('check'), post_data = {};
post_data[a] = $(this).val();
$.post('website/register/checks.php', post_data, function(data){
$('[data-msg='+ a +']').html(data);
});
});
});
I think this should be like this:
$(document).ready(function(){
$('[data-check]').click(function(){
var a = $(this).data('check');
$.post('website/register/checks.php',{data:a}, function(data){ //<--typo here ', ,'
$('[data-msg="'+ a +'"]').html(data);
});
});
});
I have autocomplete nested within a jquery that creates text elements on the fly. The autocomplete works properly on the #url text field on every text field I create, however, I cannot make it work on the price field.
It only works if nextUrlId is not increasing every time I press "Add" (without nextUrlId++). Because of this, I cannot autopopulate the price field upon selection from autocomplete.
This does not work:
$('#AddUrl').click(function(){
$('<p />').attr('id', 'urlParagraph' + nextUrlId)
.text("URL: ")
.appendTo('#inputBoxes');
$( "#url"+nextUrlId ).catcomplete({
delay: 0,
minLength : 2,
source: "searchsku.php",
select: function(event, ui){
$("#price"+nextUrlId).val(ui.item.price)}
});
NextUrlId++
HTML:
<div id="inputBoxes">
<table border="1">
<tr>
<td><p id="nameParagraph">Name: <input type="text" id="name" /></p> </td>
</tr>
<tr>
<td><p id="urlParagraph1">URL: <input type="text" id="url1" /></p> </td>
</tr>
</table>
</div>
If I get it right, you have two related fields for each URL. One with an autocomplete box, and one with a price. Depending on the autocomplete entry, the price box should change value. I haven't tested this, but I belive something like this should work well. Instead of keeping track of ID's, you're just looking at the sibling element of the autocomplete field. Many ways of doing this, two examples below, in preferred order.
<div id="inputBoxes">
<p class="inputbox">
<input type="text" class="autocompleter" name="autocompleter[]">
<input type="text" name="price[]" class="price">
</p>
<input type="button" value="Add" id="addURL">
</div>
Solution 1
$(".inputbox").find(".autocompleter").catcomplete({
delay: 0,
minLength : 2,
source: "searchsku.php",
select: function(event, ui){
$(this).siblings(".price").val(ui.item.price);
}
});
$("#addURL").bind("click",function(){
var last = $(".inputbox").last();
var newItem = last.clone()
newItem.insertAfter(last);
newItem.find(".autocompleter").catcomplete({
delay: 0,
minLength : 2,
source: "searchsku.php",
select: function(event, ui){
$(this).siblings(".price").val(ui.item.price);
}
});
});
Solution 2
If you would prefer a fixed relation between the autocomplete field and the price fields within each paragraph, I'd do something like this.
<div id="inputBoxes">
<p class="inputbox">
<input type="text" rel="1" class="autocompleter" name="autocompleter[]">
<input type="text" rel="1" name="price[]" class="price">
</p>
<input type="button" value="Add" id="addURL">
</div>
$(".inputbox").find(".autocompleter").catcomplete({
delay: 0,
minLength : 2,
source: "searchsku.php",
select: function(event, ui){
$('.price[rel="'+$(this).attr("rel")+'"]').val(ui.item.price);
}
});
$("#addURL").bind("click",function(){
var last = $(".inputbox").last();
var newItem = last.clone()
newItem.insertAfter(last);
var lastRel = last.find(".autocompleter").attr("rel");
newItem.find(".autocompleter").attr("rel",lastRel+1);
newItem.find(".price").attr("rel",lastRel+1);
newItem.find(".autocompleter").catcomplete({
delay: 0,
minLength : 2,
source: "searchsku.php",
select: function(event, ui){
$('.price[rel="'+$(this).attr("rel")+'"]').val(ui.item.price);
}
});
});
I'm creating a PHP site for property. I'm new to jQuery and jQuery UI but can't seem to find the answer anywhere else.
Please see this screen shot (full size):
For for every "received" and "expiry" box I want a jQuery datePicker box to appear and format as shown.
To test this I tried to create an example.
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
$( "#datepicker2" ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
<style>
.ui-datepicker {
font-size: 80%;
}
</style>
<p>Date: <input id="datepicker" type="text" /></p>
<p>Date2: <input id="datepicker2" type="text" /></p>
Which works fine, but how do I get a date picker to come up for ANY textbox without having to repeat the JS so many times.
For say, 50 properties, there may be 200 input boxes on the page with a date needing to be filled in.
Here is some example code from the screen shot.
<tr>
<td>Property ID</td>
<td>House Number</td>
<td>Address Line 1</td>
<td>Gas Expiry</td>
<td>Gas Received</td>
<td>Electric Expiry</td>
<td>Electric Received</td>
<td>Property Active</td>
<td>Update</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td>East Street</td>
<td><input name="gas_expiry[4]" type="text" id="gas_expiry[4]" value="2011-08-03" /></td>
<td><input name="gas_received[4]" type="text" id="gas_received[4]" value="" /></td>
<td><input name="electric_expiry[4]" type="text" id="electric_expiry[4]" value="" /></td>
<td><input name="electric_received[4]" type="text" id="electric_received[4]" value="" /></td>
<td>
<select name="active[4]" id="active[4]">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select>
</td>
<td><input name="edit[]" type="checkbox" id="edit[]" value="4" /></td>
</tr>
Probably something really simple, I appreciate any help.
What I do is create a calendar CSS class and have the behavior attached to each member of that CSS class like so:
$( ".calendar" ).datepicker({ dateFormat: 'yy-mm-dd' });
You should set up class attribute for each text box
<input class="datepicker" type="text" />
and then
$( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
Or if you have only dates textboxes, you can attach datepicker for all textboxes by
$( 'input[type="text"]' ).datepicker({ dateFormat: 'yy-mm-dd' });
Another method, just for your reference, would be
$("#datepicker, #datepicker2").datepicker({ dateFormat: 'yy-mm-dd' });
For ANY textbox on the page:
$('input[type="text"]').datepicker({ dateFormat: 'yy-mm-dd' });
to get functional datepickers on different input boxes on the same page of a custom post with the least hassle and without messing with the jquery-ui.css and jquery-ui.theme.css or any other code of the jQuery ui library:
<input class="datepicker" name="first_intake" id="first_intake" value="" size="30" type="date">
<input class="datepicker" name="second_intake" id="first_intake" value="" size="30" type="date">
In the footer I initiate the datepicker in a function as I use wordpress and this page is in the admin backend, but you can just use the javascript snippet, if you do not use wordpress:
<?php
function my_admin_footer() { ?>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#first_intake.datepicker').datepicker({
dateFormat : 'd M, yy'
});
jQuery('#second_intake.datepicker').datepicker({
dateFormat : 'd M, yy'
});
});
</script>
<?php
}
add_action('admin_footer', 'my_admin_footer');
?>
Here's what worked for me...
PHP + jquery
$(function() {
for(let i = 1; i<= <?php echo count($rows) ?>; i++)
{
$( "#datepicker-popup"+i ).datepicker({ dateFormat: 'yy-mm-dd' });
}
});