When clicking a table row, the row text copies up to the inputs above for editing purposes. The text copies up just fine, but I cannot get all the selects right. My text isn't the same as the value (for every select, it is for the third column), so I cannot use the .val() of the select.
I need to attribute/prop selected where text matches the beginning of text AND whether or not it is reimbursable (third column). Ideas? jsfiddle.net/7vLdxddr/14
$('.table').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
for (var i = 0; i < $(this).find("td").length; i++) {
// fill input values
$(this).closest("table").find("th").eq(i).find("input:text").val($(this).find("td").eq(i).text());
// fill selects
$(this).closest("table").find("th").eq(i).find("select").val($(this).find("td").eq(i).text());
}
});
If you do like this, you don't need to have values that equals to the text.
$('table').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
// fill inputs
$(this).closest("table").find("th").eq(0).find("input:text").val($(this).find("td").eq(0).text());
// fill selects
var text = $(this).find("td").eq(1).text();
var text3 = $(this).find("td").eq(2).text();
$(this).closest("table").find("th").eq(1).find("select option").filter(function() {
return $(this).text().indexOf(text) >= 0 && $(this).text().indexOf($(this).closest("table").find("th").eq(2).find('select option[value="' + text3 + '"]').text()) > 0;
}).prop('selected', true);
$(this).closest("table").find("th").eq(2).find('select').val(text3);
});
http://jsfiddle.net/7vLdxddr/15/
Just update the values of the select values to reflect the text coming in from the click (i.e. cir to circle, sq to square and it works perfectly.
http://jsfiddle.net/7vLdxddr/10/
What your code was trying to do was select a input with value circle, but the value of the circle field was cir so it was not being selected properly.
Related
I have some rows in a grid that are editable by a user. When the user clicks the edit button in a grid row, i'm displaying a multi-select dropdownlist
("ddlEditRegionList") with options to choose from. When this dropdownlist is shown i want to keep the already saved selections checked.
I'm trying with the code snippet below but that does get my existing selections.
//Get currently selected options into array regionArr
var region = $.trim($tr.find(".tdRegion").html());
$("#hidRegionList").val($.trim($tr.find(".tdRegion").html()));
var regionArr = region.split(',');
$tr.find(".tdRegion").html($("#divRegionList"));
//keep selected options checked in edit mode - this isn't working
$('#ddlEditRegionList option').map(function () {
for (var i = 0; i < regionArr.length; i++) {
if ($.trim($(this).text()) == $.trim(regionArr[i])) {
return this;
}
}
}).attr('selected', 'selected');
Note that i'm using jquery-3.2.1
Try .val() instead of .text(), Like:
if ($.trim($(this).val()) == $.trim(regionArr[i])) {
return this;
}
I have a form that contains several rows of radio buttons. When a button is selected in the first row (only first row), I need the subsequent rows to be auto-selected one position over (to the right) from the previous selection until end of table is reached.
Result should look like this, after clicking on "MD" in the first row:
Desired Output
See JSFiddle Example Here
The solution should be relative-position-based if that makes any sense. The only element with consistent ID is the table ("#skuTable").
What I have so far is this (console logging to debug):
$("#skuTable tr").first().find("input:radio").on("click", function(){
var $this = $(this);
console.log($this);
console.log($this.position());
console.log($this.parents("tbody").children("tr:nth-child(2)").find("input:radio").first().prop('checked', true));
});
What that manages to do is select the first radio button on the following row. I need some help figuring out how to select the next radio button relative to the first one's position.
This is how I did it:
var rows = $("#skuTable tr");
rows.eq(0).find("input:radio").each(function(i) {
$(this).on("click", function() {
for(var m = 0, n = rows.length;m < n;m++) {
rows.eq(m).find("input:radio").eq(i + m).attr("checked", true);
}
});
});
DEMO: https://jsfiddle.net/Lnk9p55x/4/
one more solution:
$("#skuTable").find("input:radio").on("click", function(){
loop = 0;
$("input").prop("checked",false);
index = $(this).parent().index("td");
$.each($("table tbody tr"), function() {
$("table tbody tr:eq("+loop+")").find("td:eq("+index+")").find("input:radio").prop('checked', true);
index++;
loop++;
});
});
https://jsfiddle.net/Lnk9p55x/7/
Notice that my first two table Data (Apple and Orange) are set to read-only. And I do have function for dynamic adding of row.
see this FIDDLE FOR DEMO
If the user click the Save button, all input field that detect duplicate of data from database or last duplicate of data from row which dynamically added, border-color will change to red.
$("#save").off("click").on("click",function(){
var $rows = $('#myTable tbody tr:not(:hidden)');
$rows.each(function(){
var $id = $(this).find('td input[type=\'text\']');
alert($id.val());
//Im stuck here, for checking column data is duplicate.
});
});
Im looking forward on using Jquery filter , like this :
$( "li" ).filter( "DUPLICATE DATA()" ).css( "border-color", "red" );
I am assuming you want to target the "Name" column, although you could easily change this to target all columns.
Basically, you want to go through the input elements, keeping a reference to the values you've already reviewed:
$("#save").off("click").on("click",function(){
var existing = [];
var duplicates = $('#myTable td:nth-child(3) input').filter(function() {
var value = $(this).val();
if (existing.indexOf(value) >= 0) {
return $(this);
}
existing.push(value);
});
duplicates.closest('tr').css('background-color', 'red');
});
JSFiddle
Edit: To avoid marking a read-only line as a duplicate, the process is a little less straightforward
$("#save").off("click").on("click",function(){
// Clear status of all elements
$('#myTable tr').css('background-color', 'none');
// Get all values first (Apple, Orange, etc) as strings
var allValues = $('#myTable td:nth-child(3) input').map(function() {
return $(this).val();
}).toArray();
// Iterate unique values individually, to avoid marking a read-only input as duplicate
var processedValues = [];
for (var i = 0; i < allValues.length; i++) {
var value = allValues[i];
if (value != '' && processedValues.indexOf(value) >= 0) continue;
var inputs = $('#myTable td:nth-child(3) input').filter(function() { return $(this).val() == value; });
// Check if this value is in one of the readonly
var readOnlyInput = inputs.filter(function() { return $(this).is('[readonly]'); });
if (readOnlyInput.length) {
inputs.not(readOnlyInput).closest('tr').css('background-color', 'red');
} else {
inputs.not(':first').closest('tr').css('background-color', 'red');
}
processedValues.push(value);
}
});
Updated JSFiddle
If add "Orange" before "Orange" that is readonly. The input that will have red borderline is the input that is read-only w/c is wrong. I dont want the read-only input(supposedly from database to be mark as duplicate or to have red borderline)
Current output:
Apple [read-only]
Orange // *added by user*
Orange[read-only] //borderline changed to red when button save is clicked
Wanted output:
Apple [read-only]
Orange // *added by user* and borderline changed to red when button save is clicked
Orange[read-only]
See this FIDDLE for demo and try to click add row button before the row with "Orange" value input field with another "Orange" value of input.
$("#save").off("click").on("click",function(){
var existing = [];
var duplicates = $('#myTable td:nth-child(3) input').filter(function() {
var value = $(this).val();
if (existing.indexOf(value) >= 0) {
return $(this);
}
existing.push(value);
});
duplicates.closest('tr').css('background-color', 'red');
});
I tried this :
duplicates.closest('#myTable td:nth-child(3) input:not(readOnlyText)').css('background-color', 'red');
but nothing change.
This is bound to happen as per your code. You need to differentiate between rows added by user from already existing ones. You can use readonly attribute to rows added by user and then apply your filter.
$("#save").off("click").on("click",function(){
var existing = [];
$('#myTable td:nth-child(3) input').filter(function() {
var value = $(this).val();
if ($(this).attr('readonly')) {
existing.push(value);
}
});
var duplicates = $('#myTable td:nth-child(3) input').filter(function() {
var value = $(this).val();
if (existing.indexOf(value) > -1 && !$(this).attr('readonly')) {
return $(this);
}
});
duplicates.closest('tr').css('background-color', 'red');
});
Could someone please help me handle this issue in jQuery
I have a requirement where I have two dropdowns:
The no of floors of the flat (numberOfFloors)
The flat where the user stays (whichFloorYouStay)
I need to remove all the invalid options from the second dropdown. How do I achieve this?
For example:
If a user select the numberOfFloors option as 3, then I should remove options 4 and 5 from whichFloorYouStay dropdown and just load 1,2,3 as whichFloorYouStay options.
Similarly, if a user select the numberOfFloors option as 1, then I should remove options 2,3,4,5 from whichFloorYouStay dropdown and just load 1 as whichFloorYouStay option.
Please find my JSBin link:
http://jsbin.com/sibufive/1/edit?html,js,output
Try this:
$(document).ready(function () {
//NEW CODE:
var floorsvals = new Array();
var lastvalue = Number.MAX_VALUE; //Useful for checking whether we need to append or remove elements - Initialize this with an arbitrarily large number
//Fill possible floor vals with value of <option>'s
$("#numberOfFloors option").each(function () {
floorsvals.push($(this).val());
});
//NOTE: If you already know the values of the numberOfFloors array, you can just add those values straight into the "floorsvals" array
//The above loop is just handy if you are dynamically generating a <select> list and don't already know the values
$("#numberOfFloors").change(function () {
alert($("#numberOfFloors").val());
var value = $("#numberOfFloors").val();
//NEW CODE:
//If we need to append...
if (value > lastvalue) { //This value is larger than the last value we just had
for (i = 0; i < floorsvals.length; i++) {
if (floorsvals[i] <= value && $('#whichFloorYouStay option[value=' + floorsvals[i] + ']').length === 0) { //Floor value is less than the selected maxvalue and an option with this floor value doesn't already exist...
$('<option value="' + floorsvals[i] + '">' + floorsvals[i] + '</option>').appendTo("#whichFloorYouStay"); //...So add that floor value
}
}
} else { //Otherwise, we need to remove
//OLD CODE:
$('#whichFloorYouStay option').each(function () { //Go through each option
if ($(this).val() > value) { //If this option's value is greater than the numberOfFloors value, remove it
$(this).remove();
}
});
}
//NEW CODE:
lastvalue = value; //Update last value chosen with this value
});
});
Here's a demo: http://jsbin.com/sibufive/40/edit
var value = $("#numberOfFloors").val();
should become
var value = $("#numberOfFloors").val();
value-=1
I would also suggest adding a value 0 to the first set of options one so you never have a user begin at 1 and try to move to the second menu