10 Replies Latest reply: Feb 12, 2013 9:51 AM by Tom Petrus RSS

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

    CJ Bell
      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
          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
            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
              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
                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
                  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
                    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
                      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
                        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
                          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
                            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!