Not sure if my terminology is correct on all of this. I know my code is not efficient either. Looking for functional over efficiency at this point. (just a teacher trying to solve logistical issues).
I have a webapp that we use to check students into and out of the library. Because of COVID, we are trying to touch the keyboard less and have a faster check-in process. To do this, we have a USB scanner that will scan student IDs.
My Webapp loads template html and then adds names etc to the different select elements. When a student checks in, the name appears on the other half of the window and waits for them to click the checkout next to their name. I believe this is done on what is called client side.
To add the barcode scanner, I added a form element with a text input. Is this the only way to have the barcode scanner interact with the client side?
<form><input type="text" id = "barcodeInput" size="1"></form>
I then have some jQuery that tests to see that the input is a barcode (Prefix and return key pressed), if so, the student ID number from the barcode is then put through a loop to find the matching id in the select options of student names (ids are stored in the values and student names are stored in the text). Default action is also prevented here
All of this works and I can get 1 student to add to the "checked in" panel of my app.
I cannot get the scanner to work on a second student. I think this has to do with the fact that I'm using the form input element and that might require a server call but I cannot do that since I need to have a growing list of students who are checked into the library.
I borrowed this and am currently using
$(document).ready(function() {
var barcode=""; //sets my variable
$(document).keydown(function(e) //looking to intercept the barcode scanner output
{
var code = (e.keyCode ? e.keyCode : e.which); //don't really know what this does since I borrowed this
if(code==13&&(barcode.substring(1,5)=="SCAN"))// Enter key hit & from scanner
{
e.preventDefault(); //stops the enter key from actually "running" and stops the barcode from going into the input field (I think)
barcode = barcode.slice(5);// remove the prefix so I am left with student number aka barcode
alert(barcode); //lets me know I'm getting the correct student number
processBarcode(barcode); //sends to process barcode
}
else if(code==9)// Tab key hit //I may not need these next 10ish lines
{
e.preventDefault();
alert(barcode);
}
else
{
e.preventDefault();
barcode=barcode+String.fromCharCode(code);
}
});
});
This find the student in the select element and then changes the select element to read that name and also posts the name on the "Who is checking in" Table cell
function processBarcode(barcode){
var name = "";
$("#studentNameSelect option").each(function(){ //runs through the select element that has all student names...the name is in the parameter "text" and student ID # is in the parameter val
if($(this).val()==barcode){ //looking to see if the student ID # matches the specific option in the select element
name = $(this).text(); //figure out the student name based on ID #
$(this).prop('selected', true); //set the select element to show this specific option
$("#selectedName").html(name); //puts student name in a table cell so they know they are picking the correct name
//$("#barcodeInput").trigger("reset"); //here I'm trying to get the form element input to reset so I can use it again...this didn't work so its commented out
$("#teacherNameSelect").focus(); //puts the focus onto the next select item so I can do other things
return false; //breaks the each loop once student name has been found
}
});
}
And then this is the code that moves the name onto the "checked in" panel so that the next student can check in
function buildAttendanceRow(stringPackage){ //this function takes info from the selection panel and builds a table row in the "I'm at the library" panel. Students click check out when they leave the library
console.log(stringPackage);
var package = JSON.parse(stringPackage); //receives a package of info from the selects, I do send this to a server function to email teachers that student arrived to the library...
console.log(package);
var html = "";
var hiddenId = new Date().getTime().toString(); //this cell is used to keep track of a specific instance of a student checked into the library so I can remove later and then mark in a backend spreadsheet database
var nameCell = '<td class="package" id="'+hiddenId+'">'+package.student+'</td>';
var checkOutButton = '<input type="button" value="Check Out" id="COButton">';
var checkoutButtonCell = '<td class="center">'+checkOutButton+'</td>';
html+="<tr>"+nameCell+checkoutButtonCell+"</tr>";
$("#checkedInTable").append(html); //puts the new table row into the checked in table
$('#'+hiddenId).data("package",package); //stores info so I can remove table row and update database
var lastTableRow = $('#checkedInTable tr:last');
var button = lastTableRow.find('#COButton');
//add the click function for removing row and sending checked out info to server for email and for database purposes
button.click(function(e){
var x = e.pageX;
var y = e.pageY;
var o = {
left: x,
top: y
};
$("#progressMonitor").show().offset(o);
$(this).prop("disabled",true);
var row = $(this).closest('tr');
var carrierCell =$('#'+hiddenId);
var d = new Date();
var payload = new Object(); //this object gets transferred to the server function, the user interface doesn't refresh here, it just has a dynamic html table built and shrunk as kids check in or check out
payload.checkInTime = carrierCell.data("package").checkInTime;
payload.timeIn = carrierCell.data("package").timeIn;
payload.student = carrierCell.data("package").student;
payload.teacherEmail = carrierCell.data("package").teacherEmail;
payload.teacherName = carrierCell.data("package").teacherName;
payload.reason = carrierCell.data("package").reason;
payload.checkOutTime = d;
payload.timeOut = d.getTime();
var stringPayload = JSON.stringify(payload);
row.hide();
alternateRowColors($("#checkedInTable"));
google.script.run.withSuccessHandler(emailAndRecordsSuccess).withFailureHandler(emailAndRecordsFailure).emailAndRecords(stringPayload);//calling the server function
});
var numRows = $("#checkedInTable tr" ).length;
if(numRows>2){
alphaSortTable(); //puts the student names in alpha order so it is easier for them to checkout of the library
}
alternateRowColors($("#checkedInTable"));
$("#progressMonitor").hide();
$("#barcodeInput").focus(); //here is me trying to get the scanner back into the input field so there is somewhere for the scanner data to go; I expected this to be all I needed to do, but at this point, even though the input is focused, the the scanner won't fire onto the document or into the field or anything like that
alert($("#barcodeInput").val()); //this is telling me that there is no value in the input field at this point, I thought there might be info stored here screwing up the scanner
}
The solution was to rebind a function to the document after my client side work was done.
Changed this into a named function:
$(document).ready(function() {
var barcode="";
$(document).keydown(function(e)
{
var code = (e.keyCode ? e.keyCode : e.which);
if(code==13&&(barcode.substring(1,5)=="SCAN"))
{
e.preventDefault();
barcode = barcode.slice(5);
processBarcode(barcode);
}else if(code==9)// Tab key hit
{e.preventDefault();
}else{
e.preventDefault();
barcode=barcode+String.fromCharCode(code);
}
});
});
Now I have:
function getBarcode(){
var barcode="";
$(document).keydown(function(e)
{
var code = (e.keyCode ? e.keyCode : e.which);
if(code==13&&(barcode.substring(1,5)=="SCAN"))
{
e.preventDefault();
barcode = barcode.slice(5);
processBarcode(barcode);
}else if(code==9)// Tab key hit
{e.preventDefault();
}else{
e.preventDefault();
barcode=barcode+String.fromCharCode(code);
}
});
and
$(document).ready(function() {
getBarcode();
}
and I can call
getBarcode();
anywhere to re-connect the document to be looking for the barcode scanner.
Related
I have a modal that displays stock information for a specific item that has multiple locations within a warehouse. The user selects the locations and quantities from each menu and clicks confirm, the information from this modal needs to then be imported on a pick list which is printed out.
To do this I was planning to use arrays to transport the data to the pick list.
I have a hidden field for each row, containing the values of the Location and the Qty Picked from there.
Location 1 + Qty 1 = Hidden Field 1
Location 2 + Qty 2 = Hidden Field 2
I now want to be able to put those hidden fields into an array once a button is clicked.
Hidden Field 1 + Hidden Field 2 = Array.
I can create the hidden fields just fine, its when I go to make the final array that contains all the data, it only seems to want to add the newest hidden field to be created into it.
Dialog - Pick Quantity Button (Used to confirm the selections):
//PICK QUANTITY Button
'Pick Quantity': function() {
jQuery('.ui-dialog button:nth-child(1)').button('disable');
//Disables the current selection, so that it cannot be editted
$('#AddLocQtyPick'+Picker).prop ('disabled', true);
//Disables the current selection, so that it cannot be editted
$('#LocationPickerSelect'+ Picker).prop ('disabled', true);
//Adds Unique Number to the ID of the input fields
Picker++;
//For Loop that helps to total up the quanities being selected in each picker
total=0;
for (i = 0; i<Picker; i++) {
total= total + $('#AddLocQtyPick'+i).val() * 1.0;
}
//Variable decides max value of pick on appends using previous selection
QtyReqTot= QtyReq - total;
//"Pick Another location" button is enabled whilst Qty Req has not been met
if (total !== QtyReq){
jQuery('.ui-dialog button:nth-child(2)').button('enable');
}
//"Pick Quantity", "Pick Another Location" are disabled, whilst "Confirm" button is enabled when total reaches Qty Req
if (total == QtyReq){
jQuery('.ui-dialog button:nth-child(2)').button('disable');
jQuery('.ui-dialog button:nth-child(1)').button('disable');
jQuery('.ui-dialog button:nth-child(3)').button('enable');
}
//Pick Another Location button is disabled if no more locations to pick from
if (length == 1){
jQuery('.ui-dialog button:nth-child(2)').button('disable');
}
if (total !== QtyReq && length == 1){
jQuery('.ui-dialog button:nth-child(1)').button('disable');
$(":button:contains('Cancel')").focus();
}
//Create Hidden Field - Location
//for loop that creates the fields
for (i = 0; i<Picker; i++){
HiddenSelection = [$('#LocationPickerSelect'+i).val(),$('#AddLocQtyPick'+i).val()];
var appendHiddenSelection = '<input type="hidden" class="HiddenSelection'+ i +'" value='+HiddenSelection+'>';
$('#AddLocationPicker').append(appendHiddenSelection);
alert(appendHiddenSelection +'This is SelectionField'+i);
}
},
Confirm Button - Used to Generate the Final Array containing previous arrays:
'Confirm': function() {
//Reset the length loop
length = undefined;
//Remove "Multiple Location" icon from the row.
$('#icon'+id).hide();
//Checks "Multiple Location" icon for existence and adds Pick List button when all hidden.
$('img[id^=icon]:visible').length || $('#ProcessPickList').show();
//Change text colour back to blue to have visual confirmation that item is ready for picking
$('#Desc'+id).css('color', '#0000FF');
$('#QtyReq'+id).css('color', '#0000FF');
$('#QtyinStock'+id).css('color', '#0000FF');
//Create Total Array
TotalHiddenArray = [HiddenSelection]
alert (TotalHiddenArray);
$(this).dialog('close');
},
I think I need to be able to create unique IDS for the input fields and show how get them to all be added to the array.
You can try replacing
HiddenArray = [appendHiddenQty, appendHiddenLocation]
By
HiddenArray[HiddenArray.length] = [appendHiddenQty, appendHiddenLocation]
This way, instead of overwriting HiddenArray within the loop, you just add [appendHiddenQty, appendHiddenLocation] at the end of HiddenArray.
EDIT1:
Replace
HiddenSelection = [$('#LocationPickerSelect'+i).val(),$('#AddLocQtyPick'+i).val()];
by
HiddenSelection[HiddenSelection.length] = [$('#LocationPickerSelect'+i).val(),$('#AddLocQtyPick'+i).val()];
Or, you also can use push :
HiddenSelection.push([$('#LocationPickerSelect'+i).val(),$('#AddLocQtyPick'+i).val()]);
Please see this quickly made Fiddle
EDIT2:
Ok, so let's try to replace the whole loop by:
var HiddenSelection = new Array;
for (i = 0; i<Picker; i++){
HiddenSelection = [$('#LocationPickerSelect'+i).val(),$('#AddLocQtyPick'+i).val()];
var appendHiddenSelection = '<input type="hidden" class="HiddenSelection'+ i +'" value='+HiddenSelection+'>';
$('#AddLocationPicker').append(appendHiddenSelection);
alert(appendHiddenSelection +'This is SelectionField'+i);
TotalHiddenArray.push([HiddenSelection]);
}
You just have to remove this from your confirm function :
//Create Total Array
TotalHiddenArray = [HiddenSelection]
You also have to delcare TotalHiddenArray as new array outside any function (at the very top of your JS code for exemple, because I guess you are trying to access TotalHiddenArray from another function than the loop) like this :
var TotalHiddenArray= new Array;
Another Fiddle
Could someone please advise where I can get assistance with the following script.
I am using the trigger of mouse exit within the 'action' tab.
I would ideally like the script to run, as soon as the user types the first character into the Desc field (ie IF statement), and then again upon exit from this field to check if user has subsequently deleted the characters and left the field blank (ie ELSE statement).
If the field is clicked and nothing type, the script should run the 'else' portion, thus leaving the associated fields at their default values and properties.
Starting with the fields set by default as 'read only' the following script changes the fields to accessible and sets the rfields as required after exiting the Desc field.
However, if the desc field is blanked again, the else statement does not run
// validate the Description field
// create a variable for the xxR fields - field name hierarchy
// create a variable for the xxO fields - field name hierarchy
var desc = this.getField("A1Desc");
var rfields = this.getField("A1R");
var ofields = this.getField("A1O");
if (this.getField(desc)!="")
{
rfields.readonly = false;
rfields.required = true;
ofields.readonly = false;
}
else
{
rfields.required = false;
rfields.value = rfields.defaultValue;
ofields.value = ofields.defaultValue;
rfields.readonly = true;
ofields.readonly = true;
}
I have several telerik radComboboxes and each has a corresponding hidden field.
The combos have an id prefix of cmb and their hidden field have a prefix of hd. I used these to detect if any combo box has had its value changed or if I need to reset the combo back to its initial value. I have the following JavaScript which is fired onClienSelectedIndexChanged...
function cmbSelectedIndexChanged(sender, eventArgs) {
var selectedItem = eventArgs.get_item();
var selectedItemText = selectedItem != null ? selectedItem.get_text() : sender.get_text();
var hd = sender.attr('id').replace("cmb", "hd");
if (selectedItemText !== $('#' + hd).val()) {
registerChange();
}
}
I get an error - object doesn't this property or method - on the line beginning var hd
What am I doing wrong...?
You need to be searching for the ClientId of the control therefore the code will not work. Instead of
var hd = sender.attr('id').replace("cmb", "hd");
You should try something along the lines of:
var hd = sender.get_id().replace("cmb", "hd").replace(/_/,"$");
The above code will convert the client id of the telerik combo box into the "name" attribute of the element of the asp hidden control. I believe the code below should resolve the problem described (I apologize for the extra comments I was using this as a teaching aid earlier and thought it might be beneficial to other users)
function cmbSelectedIndexChanged(sender, eventArgs) {
// Get Selected Item
var selectedItem = eventArgs.get_item();
// Get Selected Text
var selectedItemText = selectedItem != null ? selectedItem.get_text() : sender.get_text();
// Convert Telerik element id to Asp Control name
var hd = sender.get_id().replace("cmb", "hd").replace(/_/g,"$");
// Compare the asp:HiddenField value to the selected text
if (selectedItemText !== document.getElementsByName( hd)[0].value) {
registerChange();
}
}
When debugging this locally I didn't have JQuery registered on the page so my updated function uses the .getElementsByName function instead of the JQuery equivalent e.g. $('[name="' + hd + '"]').
I have a page and I display data in a table.
In each table I have a column with a checkbox which if is checked the user can modify the specific row via Javascript.
This is done as its td encapsulates either an input or a select and I make these editable for the user.
The user modifies the row and presses save and the changes are saved. So far ok.
My problem is how do I implement a cancel?
The user could choose many row i.e. check boxes and modify them but the user could also press cancel. On cancel the original values should be displayed (and the rows become non-editable again).
But how is a cancel operation implemented in Javascript? Do we store data in some global datastructures? Which would be this in Javascript?
Ok, after the addition of informations you provided I suggest you setup the following mecanism:
function getDatas() {
var oXhr;
//get datas from database:
oXhr = new XMLHttpRequest();
oXhr.onreadystatechange = function() {
if (oXhr.readyState == 4 && (oXhr.status == 200)) {
g_oData = (new DOMParser()).parseFromString(oXhr.responseText, "text/xml");
}
}
oXhr.open("POST", "yourphpscriptthatreturnsthexmldatas.php", true);
oXhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
oXhr.send();
}
function populateGrid() {
//use g_oData to populate your grid, but at first totally clean the body
var mygrid = document.getElementById("mygridid");
//mygrid.innerHtml = "<table><tr><td>...</td></tr></table>";
//use the xml library to parse g_oData and fill up the table:
var xmlRows = g_oData.getElementsByTagName("TAG");
var xmlRow;
iLen = xmlRows.length;
for (var i=0;i<iLen;i++) {
xmlRow = xmlRows[i];
//use xmlRow->textContent to build each cell of your table
}
}
function revertChange() {
//on cancel, revert the changes by populating the grid.
//it will use the global xml/json object loaded directly from database, to refill everything.
populateGrid();
}
I did it myself many times to refresh some datas in a page. That's basically what you're doing except that you're not requesting anything to the database, you just refill the fields.
You can just access the original value attribute of the input to get the defaultValue. Sample implementation:
$("table").on("dblclick", "td", function(e) {
var val = $(this).html();
$(this).empty().append($("<form/>").append(
$("<input/>", {type:"text"}).attr("value", val),
// ^^^^
// set the *attribute*, as if it was present in the parsed HTML
$("<button/>", {type:"reset"}).text("Reset"),
$("<button/>", {type:"button", class:"cancel"}).text("Cancel"),
$("<button/>", {type:"submit"}).text("Submit")
));
}).on("submit", "form", function(e) {
var val = $(this).find("input:text").val();
// ^^^^^
// which is equivalent to .prop("value")
/* then do something with val, e.g. send it to server via ajax */
$(this).parent().html(val);
e.preventDefault();
}).on("click", "button.cancel", function(e) {
var $form = $(this).parent(),
$input = $form.find("input:text"),
oldval = $input.attr("value");
// ^^^^^^^^^^^^^
// or .prop("defaultValue"), but not .val()!
if (oldval == $input.val() || confirm("Do you really want to discard your changes?"))
$(this).parent().html(oldval);
e.preventDefault();
});
(Demo at jsfiddle.net)
A maybe more simple solution might be to use the dblclick-handler that creates the form as a closure and just store the original html in a local variable there.
Here is a pretty simple way:
Don't replace the cell content with the form element. Keep the value (the text) in a span element and hide it when you show the form element. Then you don't have to do anything on cancel. Just show the span again and hide or remove the form element. Only update the span when the user wants to save the value.
Here is an example. The showing and hiding is all done with CSS.
<tr>
<td>
<span>value</span>
<input type='text' value='' />
</td>
<td>
<button class="save">Save</button>
<button class="revert">Revert</button>
</td>
</tr>
JS:
var rows = document.querySelectorAll('table tr');
for(var i = 0, l = rows.length; i < l; i++) {
rows[i].addEventListener('click', function(event) {
// all value display elements in the row
var spans = this.querySelectorAll('span');
// all form elements in the row
var inputs = this.querySelectorAll('input');
// handle click on save button
if (event.target.className === 'save') {
[].forEach.call(inputs, function(input, i) {
spans[i].innerHTML = input.value;
});
this.className = '';
}
// handle click on revert button
else if (event.target.className === 'revert') {
// not much to do
this.className = '';
}
else {
// update form element values
[].forEach.call(inputs, function(input, i) {
input.value = spans[i].innerHTML;
});
this.className = 'edit';
}
});
}
DEMO
You can use the HTML5 data- attributes to implement a revert function. This way, each <input> would hold it's original value in case a revert button would be used.
Here's how it'd look:
<table>
<tr>
<td><input type='text' value='change me' data-original='change me' /></td>
<td><input type='text' value='change me2' data-original='change me2' /></td>
<td><input type='button' value='revert' onclick='revert(this)'/></td>
</tr>
<table>
And the code that reverts:
function revert(btn) {
var parentTr = btn.parentNode.parentNode;
var inputs = parentTr.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'text') {
inputs[i].value = inputs[i].getAttribute('data-original');
}
}
}
The data-original attribute could be generated:
By the server-side app who serves the page (see (1) demo fiddle here); or
by a JavaScript function that is executed as soon as the DOM is ready (see (2) demo fiddle for this here).
As a side solution, you could store the original values in a map object. Here's the (3) demo for this (notice I added the id for each input, so it can be used as key to the map).
Keep in mind, though, neither solutions (2) or (3) require changing in server side code (the 3 assuming your inputs have ids). And (2) feels clearer.
About the defaultValue attribute: The defaultValue attribute can be a solution only if the value to be reverted never changes and if the fields involved are text inputs.
Firstly, changing the "default value" is rather awkward and may break something else aling the page (one would expect the browsers make the defaultValue attribute read-only, but that does not seem to be the case). Secondly, you would be limited to inputs of the text type.
Still, if none of that is a problem, the code above can be quickly adapted to use them instead of data- attributes.
I have an address finder system whereby a user enters a postcode, if postcode is validated then an address list is returned and displayed, they then select an address line, the list dissappears and then the address line is split further into some form inputs.
The issue i am facing is when they have been through the above process then cleared the postcode form field, hit the find address button and the address list re-appears.
Event though the list and parent tr have been removed from the DOM it is still reporting it is present as length 1?
My code is as follows:
jQuery
// when postcode validated display box
var $addressList = $("div#selectAddress > ul").length;
// if address list present show the address list
if ($addressList != 0) {
$("div#selectAddress").closest("tr").removeClass("hide");
}
// address list hidden by default
// if coming back to modify details then display address inputs
var $customerAddress = $("form#detailsForm input[name*='customerAddress']");
var $addressInputs = $.cookies.get('cpqbAddressInputs');
if ($addressInputs) {
if ($addressInputs == 'visible') {
$($customerAddress).closest("tr").removeClass("hide");
}
} else {
$($customerAddress).closest("tr").addClass("hide");
}
// Need to change form action URL to call post code web service
$("input.findAddress").live('click', function(){
var $postCode = encodeURI($("input#customerPostcode").val());
if ($postCode != "") {
var $formAction = "customerAction.do?searchAddress=searchAddress&custpc=" + $postCode;
$("form#detailsForm").attr("action", $formAction);
} else {
alert($addressList);}
});
// darker highlight when li is clicked
// split address string into corresponding inputs
$("div#selectAddress ul li").live('click', function(){
$(this).removeClass("addressHover");
//$("li.addressClick").removeClass("addressClick");
$(this).addClass("addressClick");
var $splitAddress = $(this).text().split(",");
$($customerAddress).each(function(){
var $inputCount = $(this).index("form#detailsForm input[name*='customerAddress']");
$(this).val($splitAddress[$inputCount]);
});
$($customerAddress).closest("tr").removeClass("hide");
$.cookies.set('cpqbAddressInputs', 'visible');
$(this).closest("tr").fadeOut(250, function() { $(this).remove(); });
});
I think you're running into the same issue I recently ran into. If you have a variable pointing to 5 DIV's (example: var divs = $('.mydivs');) and then you call jQuery's remove() on one of the DIV's, like so: divs.eq(0).remove() you'll see that divs.size() still returns 5 items. This is because remove() operates on the DOM. However... if after calling remove() you then re-set your variable: divs = $('.mydivs'); and get the size you'll now get the correct size of the array. I've added sample code displaying this below:
// get all 5 divs
var d = $('.dv');
// remove the first div
d.eq(0).remove();
// you would expect 4 but no, it's 5
alert(d.size());
// re-set the variable
d = $('.dv');
// now we get 4
alert(d.size());