This discussion is archived
10 Replies Latest reply: Feb 12, 2013 7:51 AM by Tom Petrus RSS

Disable or readonly for all text items on a specific row in a tabular form

CJ Bell Newbie
Currently Being Moderated
Having spent the entire morning on the interweb googling I'm still at a loss as to how to acheive this

I am on apex version 4.01

I suspect if I was on 4.2 I could do this by dynamic actions , oh well

possibly I could use javascript to loop through each row check the value of the field and then make each item disabled/readonly

cannot seem to find an example that I can understand enough to tweak

basically I have developed a tabular form that the client loves with nice formatting , calculated values in the column headings that I'm quite proud of :-)
row highlighting depending on values etc but one final request eludes me

we have three rows that we need to lock so that the user cannot amend the values in the text fields
in the column PM_REF we have a value , if the value is 200,300 or 400 then all the items in the row should be disabled or readonly

hopefully someone can put me out of my misery so I can complete this form ,

many thanks

Chris
  • 1. Re: Disable or readonly for all text items on a specific row in a tabular form
    Tom Petrus Expert
    Currently Being Moderated
    Create a dynamic action, event "After refresh", selection type "Region", and select your tabular form region.
    Create a true action of type "Execute Javascript Code" and make sure "Fire on Page Load" is checked.
    Use this javascript code:
    //check the visible input elements in each cell with the PM_REF headers, and only in the triggeringElement context (the region)
    $("td[headers='PM_REF'] input:visible", this.triggeringElement).each(function(){
       //check if value matches one in the given array
       if($.inArray($(this).val(),[200,300,400])>-1){
          //set the readonly property and change the background colour to red
          $(this).closest("tr").find("input[type='text']:visible").prop("readonly", true).css("background-color","red");
          //example on how you could deal with a select list
          $(this).closest("tr").find("select").each(function(){
             //find the selected value and use the text to construct a new span element
             //insert this new span element before the select list
             $(this).before('<span>'+$(this).find("option:selected").text()+'</span>'); 
             //hide the select list
             $(this).hide();
          });
       };
    });
    If there are checkboxes and/or datepickers, then you'd need code to deal with those too. But this should cover most of it.
  • 2. Re: Disable or readonly for all text items on a specific row in a tabular form
    CJ Bell Newbie
    Currently Being Moderated
    I think we are getting there but it doesn't appear to be firing the action as the rows are editable but maybe I didn't explain it correctly

    I have posted my code and a screenshot of my form and code

    http://postimage.org/image/qok62x40v/

    Assignment_ID is showing in the first column (I Said PM_ID but I have Changed the code accordingly)

    if the ASSIGNMENT_ID is in 300,400,500 then I would like the entire row to be disabled/readonly

    is this code checking just the column ?? rather than along the row

    Many thanks for the initial reply

    Chris

    Edited by: CJ Bell on Feb 11, 2013 3:26 PM
  • 3. Re: Disable or readonly for all text items on a specific row in a tabular form
    Tom Petrus Expert
    Currently Being Moderated
    You've set up everything alright, but the javascript code will not work. I worked with what you gave you me and i assumed that the values to be checked would be in an input element.
    Looking at your screenshot i'd say that assignment_id is not an input item, but rather just a display of the value.

    Assuming that your assignment_id is displayed in text only, and there is no hidden input item containing this id, you will need to alter the js code
    $("td[headers='ASSIGNMENT_ID']", this.triggeringElement).each(function(){
       if($.inArray($(this).text(),["200","300","400"])>-1){
    It's important to understand what the selectors do. The code in my previous code could not work because it was targetting a visible input item in the column's cells. Since there is none, i changed it to just targetting each cell. The first "if" then has to check the text of the node instead of the value.
  • 4. Re: Disable or readonly for all text items on a specific row in a tabular form
    CJ Bell Newbie
    Currently Being Moderated
    Hi , I've created an example on Hosted APEX

    http://apex.oracle.com/pls/apex/f?p=55307:2

    I can't see what I'm doing wrong , can't believe so close

    really appreciate your help !!!!
  • 5. Re: Disable or readonly for all text items on a specific row in a tabular form
    Tom Petrus Expert
    Currently Being Moderated
    You still have
    $("td[headers='ASSIGNMENT_ID'] input:visible", this.triggeringElement).each(function(){
    where it should be
    $("td[headers='ASSIGNMENT_ID']", this.triggeringElement).each(function(){
    "td[headers='ASSIGNMENT_ID'] input:visible" looks for input items, which aren't there, there is just plain text. Change that and it should run fine.
  • 6. Re: Disable or readonly for all text items on a specific row in a tabular form
    CJ Bell Newbie
    Currently Being Moderated
    Many many thanks Tom , it works on the hosted one but not on my application , but its ok I should be able to sort it from here

    I will strip the form back to basics and re-build it up
  • 7. Re: Disable or readonly for all text items on a specific row in a tabular form
    CJ Bell Newbie
    Currently Being Moderated
    Tom

    I created a bare Tabular form from scratch based on the same table , implemented the same code as on the hosted version and its not working

    any reason it would work in 4.2 and not 4.02 ??

    Cheers

    Chris
  • 8. Re: Disable or readonly for all text items on a specific row in a tabular form
    Tom Petrus Expert
    Currently Being Moderated
    I'm not totally sure (no 4.02 workspace anymore), but it could be the use of ".prop()"

    Try changing these lines
          //set the readonly property and change the background colour to red
          $(this).closest("tr").find("input[type='text']:visible").prop("readonly", true).css("background-color","red");
    to
          //set the readonly property and change the background colour to red
          $(this).closest("tr").find("input[type='text']:visible").attr("readonly", true).css("background-color","red");
    If that doesn't help right away i can only ask you to put some alert() lines in the code at some of the steps and see what is executed. If you see nothing happening i'd guess that the ".each" function is not executed or no matches can be made for some reason.
    Not sure if this.triggeringElement was in version 4.02 for example.

    //check the visible input elements in each cell with the PM_REF headers, and only in the triggeringElement context (the region)
    $("td[headers='ASSIGNMENT_ID']", this.triggeringElement).each(function(index){
       alert("Processing item "+index);
       //check if value matches one in the given array
       if($.inArray($(this).text(),["200","300","400"])>-1){
          alert("item text matches one in the array");
          //set the readonly property and change the background colour to red
          $(this).closest("tr").find("input[type='text']:visible").attr("readonly", true).css("background-color","red");
          //example on how you could deal with a select list
          $(this).closest("tr").find("select").each(function(){
             //find the selected value and use the text to construct a new span element
             //insert this new span element before the select list
             $(this).before('<span>'+$(this).find("option:selected").text()+'</span>'); 
             //hide the select list
             $(this).hide();
          });
       };
    });
  • 9. Re: Disable or readonly for all text items on a specific row in a tabular form
    CJ Bell Newbie
    Currently Being Moderated
    Tom , Yes !!!!!!!!!!

    That works but......................

    The column has to be visible , if I set it to a display as text but not shown it doesn't work

    if I set it as hidden it doesn't work

    is there anyway to get round this ??
  • 10. Re: Disable or readonly for all text items on a specific row in a tabular form
    Tom Petrus Expert
    Currently Being Moderated
    Yes of course: change the selector. My first post has code that can handle a visible input field. Hidden fields are different however and need a different selector, usually using the name attribute. Hidden fields are normally appended to the last visible input column and thus can not be referenced by targetting a column. Both visible and hidden inputs also have to have their value (".val()") checked and not the ".text()".
    This implies of course that you will have to change this javascript code to reflect the actual situation in your form when you change it.
    I can only suggest that you take a look at jQuery selectors, and understand the html structure that is generated, as that is vital to make sure you target the correct elements!

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points