I'm looking to use the skill_input field for accomplishing field to read from barcode scanner or to be used also keyboard incase the item doesn't have barcode to be scanned,
I have an issue, the barcode scanner usually scan code and do enter key(automatically configured)
So when i read code fast and click enter , already the list of items isn't been loaded yet,
It needs like 1 second to load the list , so im thinking in a way of delaying the enter key press
$(function() {
$("#skill_input").autocomplete({
source: "fetchData.php",
minLength: 3,
autoFocus: true,
select: function( event, ui ) {
//copy id and desc of the array (item)to another field
$("#code").val(ui.item.id);
$("#item_description").val(ui.item.value);
$("#skill_input").val("");
},
response: function( event, ui ) {
$("#skill_input").keydown(function(e) {
if(e.which == 13) {
setTimeout( function() {
if($("#skill_input").val().length>0) { // if not empty
insert_row();
}
}, 2000);
e.preventDefault();
}
}); // alert(event);
}
});
});
Related
This issue is reminiscent of a question I asked a few years ago:
jQuery dropdown option:first selected
Here is the jQuery function that successfully populates the dropdown id #namelist:
$('#edituserModal').on('show.bs.modal', function (e) {
initializeSelect($('#namelist'), 'assets/process/getNames.php', function (item) {
return {
value: item.name,
text: item.name
}
});
});
The code directly above successfully populates the HTML dropdown select here:
<select id="namelist">
</select>
Here is the code that creates the datatable:
$('#datatable').DataTable({
"searching": true,
"paging": true,
"serverSide": false,
"type": "POST",
"ajax": {
"url": "assets/process/getusers.php",
"dataSrc": ""
},
"columns":
[
{ "data": "null",
"render": function ( data, type, row, meta )
{
return "<i class='far fa-edit editUser'
title='Edit User' data-editdeptrepname='"+row.name+"'></i>";
}
},
{"data": "username"},
// few more columns
]
});
The user clicks on the icon with the class .editUser. That onClick event is here:
$('#datatable').on('click', 'tr > td > .editUser', function(e){
e.preventDefault();
var $dataTable = $('#datatable').DataTable();
var tr = $(this).closest('tr');
var rowData = $dataTable.row(tr).data();
var name = $(this).attr('data-name');
$('#namelist').val(name);
// $('#namelist').val(rowData.name); // <-- I tried this
// $('#namelist').val(rowData.name).text(rowData.name); // <-- also tried this
// $('#namelist option:first').val(rowData.name).text(rowData.name); // <-- this too
// $('#namelist option:first').val(name); // <-- this as well
$('#edituserModal').modal('show');
});
As stated above, the dropdown list is populated with a list of names. When a user opens the modal, the first name that should appear in the dropdown should be whatever the name is saved in the db.
Problem is, in the modal, the dropdown list doesn't initially display the name saved in the database. The dropdown does still display all of the selectable name options, but it's the name saved in the database that should initially be displayed.
As you will see in the last piece of code, I've tried several methods to make it work, all to no avail.
Here is a pic of the dropdown after the modal opens. It should initially read the name currently saved in the database. I can click on the dropdown and it shows a whole list of names. But I need it to initially display the saved name:
What on Earth am I missing? I've done this a hundred times, and it has never failed me until now.
Here it is:
$('#datatable').on('click', 'tr > td > .editUser', function(e){
e.preventDefault();
// Here is where sould go your initializeSelect call
initializeSelect($('#namelist'), 'assets/process/getNames.php', function (item) {
return {
value: item.name,
text: item.name
}
});
var row = $(this).parent().parent();
name = row[0].cells[0].innerText;
$('#namelist option:first').val(name).text(name);
$('#edituserModal').modal('show');
});
By doing this, you dont need your modal show event listener anymore.
Hope this helped.
I'm using jquery to capture a users input in a text field and then display a dropdown of possible options.
The script calls a php page which searches and returns the results to the ajax request.
Where there are multiple values returned by PHP they appear like
["Site 4,"Site 2","Site 1","Site 6","Site 7","Site 0"]
A single value would appear like
["Site 4"]
What I get in my drop down is as follows (based on the single entry)
[
LINE
"
S
i
t
e
LINE
4
"
]
Where LINE is a separator between Site & 4 and the quotes and brackets are shown.
My Jquery is:
$('#site').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'siteCheck.php?name=' + request.term,
success: function( data ) {
console.log (data)
response( $.map( data, function( item ) {
return {
label: item,
value: item,
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 1,
select: function( event, ui ) {
$('#site').val(ui);
}
});
How do I get this to return the dropdown list as
Site 4
Site 2
Site 1
Site 6
Site 7
Site 0
and not individual letters !
Thanks
First of all: Is it a typo, that your json array has no closing " for the first element?
Second: according to the doc for autocomplete, source, would be sufficient to just pass the array as simple array, as you have it already. No need to transform it to something with label/value.
In the example of remote datasource, they just adding source: 'remoteScript.php'
So you could just use
$( '#site' ).autocomplete({
source: 'siteCheck.php?name=' + request.term,
autoFocus: true,
minLength: 1,
select: function( event, ui ) {
$('#site').val(ui);
}
});
EDIT:
Try to modify you server side script to accept term as GET parameter, then your URL can drop the part, with term added, as the autocomplete does it for you:
source: 'siteCheck.php', //should accept term as parameter
I have listed my table(leaveform) records(50) using datatable API. In my table I have a column to approve leave. This column consist of two radio buttons(Approve and Reject). Each record have its own unique id. Now I want to update the values into database using those unique id.
This is my Table
You can create one function and that function is called by clicking on 'Approve' or 'Reject'. Let me give you example.
For e.g. : you have two radio button as below.
Approve and Reject
Now, You have to create one function that will be called by clicking on radio button. as explained below.
<input type="radio" name="rndLeave" value="approve" onclick="changeLeaveStatus(leaveid, 'approve')" /> Approve
<input type="radio" name="rndLeave" value="reject" onclick="changeLeaveStatus(leaveid, 'reject')" /> Reject
// first argument is leave id
// second argument is leave status.
function changeLeaveStatus(leaveid, leaveStatus)
{
$.ajax({
url: 'leave_status.php',
data: 'id='+leaveid+'&status='+leaveStatus,
type: 'POST',
success: function() {
},
error: function(){
}
});
}
This way you can update leave status from jquery datatable.
I see your tag has jquery so I guess you may want jquery code for solve this problem. here it is.
$( "#button_update" ).click( function() { //on click button update
var approve = new Array();
for (i=1;i<=count;i++) {
if ($('#id' + i).attr('checked') == 'checked'){
approve[i-1] = $('#id' + i).attr('id');
}
}
$.post(url,
{ approve: approve },
function(data) {
});
});
you should use jquery onclick on table with handler "tr" -> send ajax data to update.
$( "#dataTable tbody" ).on( "change", "input[type=radio]", function() {
console.log( $( this ).text() );
$.get( "path_to_php_page/update.php?id="+$( this ).attr("id")+"&state="+$(this).children("input[type=radio]:checked").val(), function( data ) {
console.log( data );
});
});
in update.php
you should get the id of the row with $_GET['id'] and the state with $_GET['state']
Background
So I have a table that is populated by a form. Each row can be edited by hitting a edit button. The Edit button opens the form that is populated. I need to auto fill the autocomplete so that the user can see one of His selected course.
How I Cheated
I'm using PHP and Codeigniter server side and am dynamically creating my form based on database. The labels and values are all produced from the Database and populate my JQuery Auto complete (a.k.a datasource variable below). From my controller I'm passing my value to the model and getting the Label from the DB. From there I'm passing it to my view and to my AutoComplete and setting the input value equal to the found label.
I feel dirty having done it this way. The inefficiency of this burns my eyes.
My Goal
I want to use the value that I've gotten and have the autocomplete select it and display it's label client side.
OR
I need to just display the label in the box so the user knows it's not a blank field.
Both options need to allow the user to modify the autocomplete box.
Existing Code
My code for the input looks like this:
<div class="row-start span-2">
<label for="course_code">Course Code </label>
</div>
<div class="row-end span-2">
<input id="course_code">
</div>
My script for the autocomplete looks like this:
<script>
function search_course_code(){
var datasource = [{"value":"1","label":"AAF100 - DL"},{"value":"2","label":"AAF101 - DL+web"},.....];
var searchboxid = "#course_code";
var searchresultid = "#CRSEINVID";
$(searchboxid).autocomplete({
source:datasource,
focus: function( event, ui ) {
$( searchboxid ).val( ui.item.label );
return false;
},
select: function(event,ui){
var UIvalue = ui.item.value;
var UIlabel = ui.item.label;
console.log(UIvalue);
console.log(UIlabel);
$( searchboxid ).val( ui.item.label );
use_search("#search1","#CRSEINVID",UIvalue,UIlabel ); return false;
}
});
};
function use_search(show_select,result_id,uivalue,uilabel){
//loads value to field that takes it's value
$(result_id).val(uivalue);
//Display course below search box
course = "<span>"+uilabel+"</span>";
$(show_select).html(course );
//stops the value from being shown in the search box
return false;
};
$( document ).ready(function() {
search_course_code();
});
</script>
I draw the value from a hidden input with a unique ID simply using JQUERY val() function.
What I've tried
Try 1
Setting value using:
$(searchboxid).val(hiddenInputValue);
Result: Value displayed not the label
Try 2
Using the autocomplete on create method I tried to overwrite the UI object and send it to the select.
ui.item={"value":"","label":""};
ui.item.value=$(hiddenInputValue).val;
this.select(ui);
Result: No observable change, no errors.
Try 3
$(searchboxid).autocomplete("select", hiddenInputValue);
Result:
Uncaught Error: cannot call methods on autocomplete prior to
initialization; attempted to call method 'select'
Try 4
Tried changing value using
$(searchboxid).val(hiddenInputValue);
and having change function detect it and set label with
$( searchboxid ).val( ui.item.label );
Result: Value loaded into input not label
Try 5
Tried Triggering the change function with this:
$("#<?php echo $id;?>").autocomplete("option","change").call(searchBox);
and then setting label. Based on the answer to:
jQuery AutoComplete Trigger Change Event
Result: empty UI object for change function,
Try 6
Tried Triggering the select function with this:
$("#<?php echo $id;?>").autocomplete("option","select",{value:hiddenInputValue}).call(searchBox);
and then using my current select function.
Result: Uncaught Error: undefined is not a function,
Ideas
Ideas 1:
I thought of using the value then searching through the datasource object to find associating label and then using:
$(searchboxid).val(label);
would this work? How would I do it?
Idea 2:
If the value of the input field is set to a value using:
$(searchboxid).val(label);
Would the change function detect it? Not detected used console.log function in change function to give feedback,
So after much research and trying to get this to work I discovered two problems:
that I was using Select2 version 3.5.3 and needed to use text instead of label and :
$myselect.select2("val","somevalue");
The MAJOR source of my problem though was because I was using Web Experience Toolkit tabs and I needed to load the Select 2 after tabs where initialized.
assign the value to the auto complete input element by using
$('#YourAutoCompletBox').val(yourValuefromHiddenControl);
html:
Topic: <input type="text" id="topics" /><input type="hidden" id="topicID" />
<br/><br/><br/><br/>
<p>You selected <span id="results"></span></p>
jQuery:
var topics= [
{
value: "cooking",
label: "Cooking",
id: "1"
},
{
value: "C++",
label: "C++",
id: "2"
},
{
value: "craftsmanship",
label: "Software Craftsmanship",
id: "3"
}
];
$(document).ready(function() {
$( "#topics" ).autocomplete({
minLength: 0,
source: topics,
focus: function( event, ui ) {
$( "#topics" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#topics" ).val( ui.item.label );
$("#topicID").val(ui.item.id);
$( "#results").text($("#topicID").val());
return false;
}
})
});
Playground : jsfiddle
I want to drill down through column chart in highcharts. I have a 3 level drill down with each having at least 20 x-axis labels.Right now drill down is working for column click. I want to do the same thing on x axis click.
Based on my research i found this probable solution. What I want to achieve can be seen here on clicking x-axis labels.
The function i used to achieve this functionality
function(chart) {
//console.log(chart.xAxis[0].ticks[0]);
$.each(chart.xAxis[0].ticks, function(i, tick) {
tick.label.on('click', function() {
var drilldown = chart.series[0].data[i].drilldown;
if (drilldown) { // drill down
chart.setTitle({
text: drilldown.name
});
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.level , drilldown.ytitle);
} else { // restore
setChart(name, categories, data, null, level , 'Total Agent score');
chart.setTitle({text: "Agent Performance Drill Down Report"});
chart.setTitle(undefined, { text: 'Click the Columns to view Drill Down Reports.' });
}
});
});
}
The problem: It works with most of the x-labels but not all. This can be seen # this fiddle the label drill down does not work at all 3 levels on all labels.
Also, here is the post I made on highchart forum for reference
You are adding the handlers at chart load, some of the axis labels won't be present at that time, hence those labels won't respond to the click event
As a quick (read dirty) fix you can add the same handler that you have for the load to the redraw, so the new labels that are created will bind to it.
You can bind the same function to the redraw (this happens when the x-axis labels are changed too, you can replace with a less frequent event that suits the need too) event, so every time the chart is redrawn you unbind (since I am unsure of the lifetime of the labels in highchart, if an exisiting label is reused for the new drilled down chart, it would be safer to remove) any existing click handler as follows for each tick
$(tick.label.element).unbind('click');
and then add the click handler
var bindAxisClick = function() {
$.each(this.xAxis[0].ticks, function(i, tick) {
$(tick.label.element).unbind('click');
$(tick.label.element).click(function() {
var drilldown = chart.series[0].data[i].drilldown;
if (drilldown) { // drill down
chart.setTitle({
text: drilldown.name
});
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.level, drilldown.ytitle);
} else { // restore
setChart(name, categories, data, null, level, 'Total score');
chart.setTitle({
text: "Drill Down Report"
});
chart.setTitle(undefined, {
text: 'Click the Columns to view Drill Down Reports.'
});
}
});
});
};
Modify the chart options to add the redraw and load handlers
chart :{
...
events: {
redraw: bindAxisClick ,
load:bindAxisClick
},
...
}
Dril down from x-axis labels # jsFiddle