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());
});
Related
I'm using ag-grid in an AngularJS 1.6 project. In this specific case I have a table via ag-grid and select a single row via click ( no multirow-selection possible). I want to to some stuff with this rowdata (which does not matter here) and via button I want to preselect the next row after this one. I did this via
component:
// ag-grid event-hook
function onSelectionChanged() {
ctrl.selectedItem = ctrl.gridOptions.api.getSelectedRows()[0];
ctrl.selectedRowIndex = ctrl.gridOptions.api.getSelectedNodes()[0].rowIndex;
$scope.$apply();
doOtherStuff();
}
[...]
// function on button via ng-click
function selectNextItemInTable() {
agGridService.selectGridRow(ctrl.gridOptions, ctrl.selectedRowIndex + 1);
}
[...]
agGridService:
function selectGridRow(gridOptions, index) {
if(!gridOptions || !gridOptions.api) {
return;
}
var rowNode = gridOptions.api.getDisplayedRowAtIndex(index);
if(rowNode) {
rowNode.setSelected(true);
}
}
It works if the selected item is not the last one on a table page, but if it is the last, it unfortunately does not preselect the first item on the next page but instead no row at all. How can I do that?
/Edit: I just noticed that it DOES select the next row in the list, it just does not change the page! If I change it manually I can see that the next row is selected... So The only thing I need is a check if I have to change the page via api...
you can use gridOptions.api.getLastDisplayedRow().
This will give you the last rowID visible on the current page. lets say if pagination is of size 10 and we are on 1st page then this option will return 9(array index logic). check this number with your current selected row, if this number is equal to your current selected row then you can call gridOptions.api.paginationGoToNextPage();
you can use below condition to check if you are on the last page or not.
gridOptions.api.paginationGetCurrentPage() < gridOptions.api.paginationGetTotalPages()
hope this helps, let me know if you need more help.
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
Single Row Selections requirement:
My current gridview selects the row just on click on the row. Thus, if the user click 2nd row and then 3rd row, its just not the recent (3rd) row but also the 2nd row is shown as selected. Now the requirement is, when the user selects the 2nd row, and then click on 3rd row, only the 3rd row should be selected and not the 2nd row.
Multi Row Selection requirement:
Also, the user should be allowed to select multiple rows by clicking on "CTRL" key together with the left mouse click on the rows.
How to achieve this using JAVASCRIPT? I am new to Javascript and or Gridview stuffs. Could someone please help me with this code please?
Please remember, our application is based on 2.0
create global JS variable says , var rows_clicked = [].
Use following link to check how to detect CTRL + CLICK. We will use that in later step. - How to detect control+click in Javascript from an onclick div attribute?
Use this code to bind gridview row click event.
$('#<%=gvw.ClientID%> tr[id]').click(function() {
// row click handler , gridview id = gvw -- assumption
// check if it is clicked earlier using IsClicked()
// if clicked 1st time, then call OnRowClick, else OnRowDeselect
$(this).css("color","red");// set some css to look like selected.
});
function OnRowClick()
{
// detect if ctrl+clicked, then save that row's datakey to global
// if it is that, then
rows_clicked.push(datakey);
// and set clicked = true.
$(this).attr("clicked",true);
}
4.
function OnRowDeselect()
{
// remove that datakey from `rows_clicked`
}
5.
function IsClicked(element)
{
if($(element).attr("clicked")) // clicked is an attr to check if row clicked 1st time or deselected
return true;
else
return false;
}
Use this rows_clicked and set in hiddenfiled, and postback that to get selected rows in server side code.
I wrote two jquery plugins: the first converts a text or hidden input containing a date in a set of three drop down menus with day/month/year choice.
The second plugin allows me to generate a set of rows starting from a set of input fields, and automatically adds a "Add row" button and a "delete row" button.
Moreover, I've added a addRow() function to the "multiple row plugin", which allows me to add a row programmatically.
In this way I can do a call to
$(...).addRow(["event name", "30/06/2013"]);
to add a new row to my list.
Here is a simplified fiddle: http://jsfiddle.net/gB2Dq/
The problem is that the value of the input field containing the event name is updated correctly, whereas the selected value in the drop down menu is not updated.
I think there is some stuff in dddtpicker plugin which breaks the DOM, but I can't figure out why.
Any help would be appreciated.
var fields = templclone.find('input, select')
There are 3 inputs and one select for each row which makes it 4 elements.
fields.each(function (index, element) {
if (index < fields.length - 1) {
$(element).val(args[index]).trigger('change');
...
myevt.addRow(["my event name", "30/06/2013"]);
You provide 2 arguments. So the select element gets the value undefined.
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