I have a html table where the rows are being added dynamically by a javascript function. I have a select box to select the product name in each row. Its working fine.
Now I want to validate the selectbox. I got no clue how to do it. The values in the textboxes shouldn't be selected more than once in the upcoming rows.
I want to show an alert msg like "The product you selected is already selected" onSelect and change the selected value to --Select--- .
See it in action here
Assuming you don't want to allow multiple select boxes to hold same value.
Well in the insSpec() method, you can iterate for the existing rows i.e select boxes and capture those values.Then you can check that is it already selected or not using selected property of all the select boxes.
UPDATE
var table = document.getElementById("mytab1");
for (var i = 0, cell; cell = table.cells[i]; i++) {
//iterate through cells
for (var j = 0, cell2; cell2 = table.cells[j]; j++) {
//check already selected selectboxes have same value or not
//compare only selected select boxes
if(cell.getElementsByTagName('select')[0].selected && cell2.getElementByTagName('select')[0].selected){
//compare values of both cell's select boxes using value property and alert message
}
}
Please don't directly copy paste this code.This is just a way to do the stuff.
Reference
Related
I am displaying the dynamic JSON data in the html table when user clicks on GetData button.
When user clicked on GetData button I'm getting two rows values from the backend which I'm successfully showing in the table.
Initially when the html table is loaded the first column Year is disabled and Mortgage Type column is editable. When user
click on GetData button, I'm showing two rows information in the table by disabling the Mortgage Type column and enabling the
"Year" column. Issue is I want to enable Year column only for the rows for which I got the information from backend(first two rows in my case).
Below is the sample code I used to enable the Year drop down list for first two rows when user click on GetData button, but it is enabling for all the rows:
$('#loanTable tr ').each(function(){
for (var i = 0; i < mortageType.length; i++) {
$('td:eq(0) select', this).removeAttr("disabled");//last row enabled
}
});
Demo link : https://plnkr.co/edit/Fon9NDQA0q660wSz0RHv?p=preview
In the above Demo link, when user click on GetData button, I want to enable the Year field only for the first two rows for which I got information, the remaining rows should be disabled.
--EDITED--
The below code is failing in one scenario. When i get the null values from backend in any row, i should not enable or disable any fields and highlight the row with red color which is working fine in the demo link shown below.
https://plnkr.co/edit/fDmFtxdxKk8eeswx4lGT?p=preview
But the same code is failing to enable the Year column when there are no null values.
Please see the updated plunker without null values, failing to enable the first row Year dropdown list field:
https://plnkr.co/edit/7pB8q54JavFlCm5Y8gF8?p=preview
When user click on GetData button, Year dropdown list fields for first two rows should be enabled and should be disabled for the last two rows for which data is not available..
Sample code snippet:
for (var i = 0; i < mortageType.length; i++) {
j = j + 1;
document.getElementById("mortageType" + j).value = mortageType[i].code;
document.getElementById("loanNum" + j).innerText = loanNum[i].code;
document.getElementById("status" + j).innerText = status[i].code;
//to enable the Year field for the rows we are fetching the data
// $(document.getElementById("year" + j)).removeAttr('disabled');
if(loanNum[i].code == null || mortageType[i].code == null || status[i].code==null ){
console.log("row has null value");
$('#status' + j).parent().parent().css({'border':'red'});
enablingFlag = false; //If any field value is null make the flag as false
}
if(enablingFlag){ //enters the if condition if there are no null values
$('#loanTable input, #loanTable select').attr("disabled", "disabled");
$(document.getElementById("year" + j)).removeAttr('disabled');
}
}
Maybe you could simplify and get rid of the whole block that iterates and removes the disabled attribute.
You are already iterating.. So make each year select have an id that follows the pattern you are using for the other controls. year1, year2, year3, year4
then on, or around, line 24 of your javascript add this:
$(document.getElementById("year" + j)).removeAttr('disabled');
html element ids should be unique anyway so you'd want to fix those year select boxes either way.
Here is a plunker illustrating it.
https://plnkr.co/edit/dBDlBrc3CVPA46aMT6OA?p=preview
Im using Datatables from https://datatables.net.
One of the columns on the datatable has a dropdown combobox as cell data.
When I push a button, I need to get the selected value of the combobox inside the selected row.
$.each($("#prize_selector tr.selected"), function () {
var row = prizes_table.row(this).data();
row[3].$('select').options[row[3].$('select').selectedIndex].id;
[...]
});
but no success. How can I access the DOM select inside the cell, without traversing all the input selects on the table? (there are a lot).
edit the console throws row[3].$ is not a function
I assume you're using Select extension to select rows.
Below is a correct way to access select element for each selected row:
table.rows({ selected: true }).every(function(){
var $select = table.$('select', this.node());
var $option = table.$('select option:selected', this.node());
console.log($select.val(), $option);
});
See this example for code and demonstration.
Using Oracle Apex 4.2
I have a tabular form where you can create a new row and can update existing data. I am having a problem with trying to disable or make items read only in a select list on the tabular form.
For example, the select list has in it;
orange, green, blue, red
I want to be able to disable or read only the items blue and orange in the select list based on a value from another column.
Any help would be appreciated.
This is a quick test in Apex 5, but i think you can use similar approach in 4.2
1. Create Dynamic Action On Page Load
- set Action to Execute JavaScript Code
- Selection Type to jQuery Selector
- Inspect element to find his id (in my case "f01_0001")
2. Change "if" condition to match your criteria. For example:
var op = document.getElementById("f01_0001").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
// lowercase comparison for case-insensitivity
if (op[i].value.toLowerCase() == "red") {
op[i].disabled = true;
}
}
I am guessing you want to apply disabled style to 2 options of select item based on value from other item.
Assuming that,
first column of tabular form is text field and has value that needs to be referenced
fifth column of tabular form is the one with select item with blue and orange options
there are multiple rows in the table
collection of input items that have common name "f01" but different IDs based on row position. For e.g., "f01_000X" where x is row index.
collection of select items that have common name "f05" but different IDs based on row position. For e.g., "f05_000X" where x is row index.
stylize select options blue and orange when text field value in first column is "abc". stylize such that the option is non selectable.
stylize on page load(not on referenced text field value change or region refresh)
Solution,
Loop through all text items on page load, identify row index of current item, get handle of select item's blue and orange options and also referenced text field with help of identified row and then style it accordingly.
Code on how to go about with this,
Javascript Function and Global Variable Declaration
function updateRowStyle(rowIndex) {
var inp_reference = $("#f01_" + rowIndex);
var opt_blue = $("#f05_" + rowIndex + " option:contains('blue')");
var opt_orange = $("#f05_" + rowIndex + " option:contains('orange')");;
if (inp_reference.val() === "ABC") {
opt_blue.prop("disabled", true);
opt_orange.prop("disabled", true);
} else {
opt_blue.prop("disabled", false);
opt_orange.prop("disabled", false);
}
}
Execute when Page Loads
$("[name=f01]").each(function() {
updateRowStyle(this.id.split("_").pop());
});
Here is the scenario:
User clicks on a button and can add new row in table.
Select a value from any of the row and few fields will be added in only that row. It works fine.
But problem is here: When user again selects any different rows it append the cells in rows, but I want to delete the previous cells and add new selected cells. I am not able to do that.
I tried with deleteCell() but did not find required solution. here is the whole code. If any one could help please.
Another problem with code is when I run it the first time it does not count first row number.
for (i = 0; i < selectedvalue; i++) {
var x = Row.insertCell(-1);
x.innerHTML = "<td><select><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option></select></td> </tr>";
}
Try this:
http://codepen.io/anon/pen/yeZrov?editors=1010
jQuery('#myTable tr').eq(rownum).find("td:gt(3)").remove();
I am working on jqxTreeGrid. I have a row with four fields. Name, Org, Phone and Select Preference (This is a dropdown). Now when ever i click on a particular row / cell, it selects that row and i save the row data to a local array.
My problem here is the 4th column. If i click on that column (dropdown) i don't want the rowSelect event to be fired because of the following reasons:
It deselects a all previously selected rows which I ofcourse don't want to happen.
It selects a row but my intention is to set the value of dropdown for that row.
I want nothing should happen as i am only selecting the value from preference dropdown.
I went though this post : JQGrid Not select row when clicking in a particular cell but it is not helping as jqxTreeGrid doesnot have this method.
I tried the following approach but its not working for me.
$('#ad_sendAlert_jqxGrid').on('rowClick',function(event){
// event args.
var args = event.args;
// row data.
var row = args.row;
// row key.
var key = args.key;
// data field
var dataField = args.dataField;
if(dataField === 'alertpreference'){
event.preventDefault();
//event.stopPropagation();
return false;
}
});
And this is my rowSelect method:
$('#ad_sendAlert_jqxGrid').on('rowSelect',function(event){
// event args.
var args = event.args;
// row data.
var row = args.row;
// row key.
var key = args.key;
if(row.level !== 0){
var selectedUser = self.tempUserList[row.id];
self.addUserToList(selectedUser);
}
self.renderUserCount();
});
Looks like jqxTreeGrid has selectionMode option. Setting its value to "custom" will disable its default behavior of selecting row on click. Only API will then be able to select rows.
$('#treeGrid').jqxTreeGrid({selectionMode: "custom" });