This discussion is archived
1 2 Previous Next 15 Replies Latest reply: May 8, 2011 9:47 PM by EEG RSS

How To Conditionally Make A Specific Row In A Tabular Form Read Only.

EEG Newbie
Currently Being Moderated
Hello Everyone.

I am using Apex 4.0.1. I have a tabular form whose rows consist of 5 fields. One of these fields is a drop down list that is sourced from a SELECT statement I created. When the user selects a certain value, say. "XYZ", I need to have the entire current row become readonly so that the user can no longer enter any more data in any of the fields on this particular row. Even the drop down field should also become readonly. But only for this specific row. All other rows in the tabular form should remain editable until the drop down on a particular row is assigned the "XYZ" value.

But how does one do this with a tabular form. If the drop down is, say, the 3rd field on a given row, how do I target that 3rd field and make this specific row readonly?

Thanks for any help/advice/code.

Elie
  • 1. Re: How To Conditionally Make A Specific Row In A Tabular Form Read Only.
    Senthil Explorer
    Currently Being Moderated
    Hi Elie,

    Demo: http://apex.oracle.com/pls/apex/f?p=25471:4

    Here are the steps I used to create readonly fields dynamically in tabular form:

    1) Download the readonly jQuery plugin and include it in page 0 or page template.
    http://plugins.jquery.com/files/jquery.readonly-0.7.0.zip

    2) Add below JS to page -> Function and global variable declaration
    function disableRow(pId) {
        var vRow = pId.substring(4, 8);
        if ($v('f05_' + vRow) == 1) {
            $('#f03_' + vRow).readonly(true);
            $('#f04_' + vRow).readonly(true);
            $('#f06_' + vRow).readonly(true);
        } else {
            $('#f03_' + vRow).readonly(false);
            $('#f04_' + vRow).readonly(false);
            $('#f06_' + vRow).readonly(false);
        }
    }
    
    function columnVer() {
    
        var tab = document.getElementsByName('f02');
        for (var i = 0; i < tab.length; i++) {
            disableRow(tab.id);
    }
    }


    3) Page -> Execute when page loads
    columnVer();
    4) Edit Report Attributes -> Column Definition -> (Select list column) Element Attributes
    onchange="disableRow(this.id);"
    Regards,
    -Senthil
  • 2. Re: How To Conditionally Make A Specific Row In A Tabular Form Read Only.
    NicoMartens Journeyer
    Currently Being Moderated
    I would suggest more in the line of working with apex_items... You can use them in your query like this:

    select case pk_id when 1 then 'read_only' else apex_item.text(1, pk_id) end as column from test_table

    Br,

    Nico
  • 3. Re: How To Conditionally Make A Specific Row In A Tabular Form Read Only.
    EEG Newbie
    Currently Being Moderated
    Hi, Senthil.

    Thank you very much for sending this code.

    I will soon try out all this and report back how it works.

    Question: You said that I should download/install the readonly plugin. But from the JS code you've included it seems like the plugin is not being used at all. Am I wrong?

    Also, would you please share how you went about creating that really nice "menu" region on the left side of your demo page 4.

    Thank you, again. Your help/advice is much appreciated.

    Elie
  • 4. Re: How To Conditionally Make A Specific Row In A Tabular Form Read Only.
    EEG Newbie
    Currently Being Moderated
    Hi, Nico.

    Thank you for your help.

    Yes. I, too, thought of using the APEX_ITEM package. The trouble with it in my particular situation is that the package code would be run before a user actually selects the value "1" (per your code example) from a drop down field in the tabular form. When the user selects "1", your code will not be run. Instead, it is run before the drop down field ever appears in the tabular form. Your code does work when displaying a SQL report. But a tabular form is a different animal. Rows are being instantiated "at run time" (via clicking the "Add Row" button) as opposed to all in one go as with a SQL report.

    Thank you.

    Elie
  • 5. Re: How To Conditionally Make A Specific Row In A Tabular Form Read Only.
    Senthil Explorer
    Currently Being Moderated
    Hi Elie,

    I'm calling jQuery method
     readonly() 
    from the plugin that makes the fields readonly. This method is not available in the jQuery library hence I make use of the plugin.

    Regarding the menu I still have not customized it how I intend it to work, you can probably check my sample app in time. For now here is how i created it:

    Theme currently used is from apex repository: Simple Red 1

    1) Create list from shared components.

    2) Set the list template to "Vertical sidebar list" and create list.

    3) Create list region in page 0

    4) Under user interface set template to "Navigation Region"

    5) Under source "List Template Override" should be -use list template-

    Regards,
    -Senthil
  • 6. Re: How To Conditionally Make A Specific Row In A Tabular Form Read Only.
    EEG Newbie
    Currently Being Moderated
    Hi, Senthil.

    Thank you for explaining about calling the readonly() function from the plugin. This makes sense. You needed to upload the plugin in order to have the readonly() function available to call.

    Also, thanks very much for explaining how you went about creating your really nice menu region. I'm going to try to replicate this and see how it looks. You said that you're still making changes to it, and so, I look forward to seeing how it turns out.

    Thank you so much.

    Elie
  • 7. Re: How To Conditionally Make A Specific Row In A Tabular Form Read Only.
    EEG Newbie
    Currently Being Moderated
    Hi, Senthil.

    Ok, I'm trying to apply your code and am a bit puzzled.

    You said to download the readonly plugin. I've done that.

    Then you said to place the plugin files jquery.readonly.css and jquery.readonly.js in page 0 or page template.

    Question: If I place these two files on page 0, then WHERE on page 0? And if in a page template, then WHICH page template (I'm assumming in the template definition section)?

    In your code example, you wrote:
    function columnVer() {
     
        var tab = document.getElementsByName('f02');
        for (var i = 0; i < tab.length; i++) {
            disableRow(tab.id);
    }
    }
    Question: My understanding is that *f02* refers to the 2nd field in your tabular form demo page.  But what is the reason for using the length of this 2nd field?  Why is this necessarry?
    
    Thank you very much for your help.  It is much appreciated.
    
    Elie                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
  • 8. Re: How To Conditionally Make A Specific Row In A Tabular Form Read Only.
    Senthil Explorer
    Currently Being Moderated
    Hi Elie,
    EEG wrote:
    Question: If I place these two files on page 0, then WHERE on page 0? And if in a page template, then WHICH page template (I'm assumming in the template definition section)?
    - Create a HTML region on page 0 call it "Custom JS/CSS" and add below to region source:

    a) If you use web server directory
    <script type="text/javascript" src="/i/jquery.readonly.js"></script>
    <link type="text/css" rel="stylesheet" href="/i/jquery.readonly.css">
    or

    b) If you upload to workspace images directory
    <script type="text/javascript" src="#APP_IMAGES#jquery.readonly.js"></script>
    <link type="text/css" rel="stylesheet" href="#APP_IMAGES#jquery.readonly.css">
    EEG wrote:Question: My understanding is that f02 refers to the 2nd field in your tabular form demo page. But what is the reason for using the length of this 2nd field? Why is this necessarry?
    -This function is required to check readonly values set on page load.

    - f02 in my tabular form is referring to ID_DISPLAY column, you need to use column id where there is a value (not null), so loop now checks the length (from object HTML collection and gives number of rows) and iterates through each row in the tabular form and executes *disableRow(tab.id);* function for that row.

    Regards,
    -Senthil
  • 9. Re: How To Conditionally Make A Specific Row In A Tabular Form Read Only.
    EEG Newbie
    Currently Being Moderated
    Hi, Senthil.

    Ok. I give up! I followed your directions and cannot get this working.

    I uploaded the .css file to the Cascading Images repository and the .js file into the Static Files repository. I created an HTML region on page 0 and placed the following code into the "Region Source" section:
    <script type="text/javascript" src="#APP_IMAGES#jquery.readonly.js"></script>
    <link type="text/css" rel="stylesheet" href="#APP_IMAGES#jquery.readonly.css">
    I then placed your functions disableRow(pId) and columnVer() into the "Function and Global Variable Declaration" section on my tabular form page 14. I placed columnVer(); into the "Execute when Page Loads" section of my page 14. Finally, in the tabular form itself (on page 14), I placed onchange="disableRow(this.empno);" into the "Element Attributes" field of my drop down (based on the EMP.ENAME column) in my tabular form.

    I suspect my problem is that I'm not referencing the correct "fxx" arrays. I even invoked an "alert" so that I could see exactly what is being referenced, as in:
        var vRow = pId.substring(4, 8);
        alert('vRow='+vRow);
    I'm out of ideas.

    I was wondering if, perhaps, you would do me a collosal favor and look at what I've done. I've posted my app on apex.oracle.com, in my workspace:

    http://apex.oracle.com/pls/apex/f?p=53002:14

    workspace = eeg
    username = EGRUNHAUS@GMAIL.COM
    password = galaxy (all lowercase)

    My app is called "Elie_Goodies_Ver2" (app_id 53002) and the tabular form is page 14 ("Update EMP"). The associated tab is called "Tabular Form2".

    There is no authentication assigned to the app.

    I would greatly appreciate it if you would look at what I've done and point out what I'm doing wrong?

    Thank you so much.

    Elie
  • 10. Re: How To Conditionally Make A Specific Row In A Tabular Form Read Only.
    fac586 Guru
    Currently Being Moderated
    The code raised a JS exception:
    function disableRow(pId) {
        var vRow = pId.substring(4, 8);
    
    TypeError: Result of expression 'pId' [undefined] is not an object.
    <tt>onchange="disableRow(this.empno);"</tt> is not correct. <tt>this</tt> references the DOM object triggering the <tt>onchange</tt> event&mdash;in this case a <tt>select</tt> form control. <tt>empno</tt> is not a property or method of </tt>select</tt> controls. It should be <tt>this.id</tt>: the element's HTML ID attribute. Likewise in the <tt>columnVer</tt> page load function.

    Fixing this raised another exception:
    TypeError: Result of expression '$('#f04_' + vRow).readonly' [undefined] is not a function.
    There was a problem referencing the JS and CSS files: they didn't have the correct MIME types (what browser are you using? IE does this wrong) and I'm not sure if they were associated with the application or the workspace. I re-uploaded them as workspace files and changed the page 0 references to use <tt>#WORKSPACE_IMAGES#</tt>. (As discussed in a previous thread, the proper place to reference these files is in the page <tt>head</tt>, via the page template or page HTML Header/JavaScript attributes.)

    It's now working, where "working" involves messing up the display of the Hiredate date picker. I'll take another look at that later and see what's going on there.

    Finally, Should Plugins Be Used In A Production Environment? also apply to jQuery plug-ins. This one:

    <li>hasn't made it to version 1.0
    <li>hasn't been updated for 15 months
    <li>has a non-obvious implementation (at least on a first examination of its output&mdash;I haven't looked at the source yet)

    I know what conclusions I'd draw.
  • 11. Re: How To Conditionally Make A Specific Row In A Tabular Form Read Only.
    Senthil Explorer
    Currently Being Moderated
    Hi Elie,

    It's working now. Let me know if you still have any problems. I'm held up later today- will try to respond when possible.

    EDIT:

    Date picker could be a bit tricky, will have to find a solution to disable only for the rows where readonly is applied, but since they all use same class we will need to find a way around it, I use below to remove the icon:
    var pDate = $('.ui-datepicker-trigger');
    $(pDate).remove();
    Try adding it below
    $('#f09_' + vRow).readonly(true);
    in if statement, but like i said since datepickers in all rows use same class it removes icon for all rows.

    EDIT:
    Well figured out a way to remove the icon for readonly fields, now need to find a way to add them back.

    Regards,
    -Senthil
  • 12. Re: How To Conditionally Make A Specific Row In A Tabular Form Read Only.
    EEG Newbie
    Currently Being Moderated
    Hi.

    Thank you so much for your help.

    Your comments about "being wary of jquery plugins" is not lost on me. Also, what you said about "non-intuitive js code" is a concern as well.

    Though I'm learning how to write js and jquery better and better, at this point in my learning I don't know enough to distinguish between "intuitive" and "non-intuitive" js code.

    In any case, what you (or, perhaps it was Senthil) did is making my tabular form working, with the exception of the HIREDATE date picker field. Although Senthil said in his last post that he had gotten this to "almost" work completely.

    Thank you, again. Your help is most appreciated.

    Elie
  • 13. Re: How To Conditionally Make A Specific Row In A Tabular Form Read Only.
    EEG Newbie
    Currently Being Moderated
    Hi, Senthil.

    Thank you very much for helping me.

    As you can see in this thread, both yourself and fac586 have tried to fix my code. Fac586 says that the jquery plugin is not intuitive js code. Do you agree with his/her comments?

    In any case, you've gotten my example to work and I thank you very much for this.

    I realize that the HIREDATE date picker field is not quite working yet. And so, I'm looking forward to whatever help you (or Fac586 or someone else) might offer with this field. I realize that date picker fields are not the easiest to manipulate using js, and so, it's wonderful for a novice like me to learn from you and Fac586 and others on how to go about doing this.

    I will need to run some errands right now. But later today I will plow into what you and Fac586 have done to correct my code.

    Thank you, again.

    Elie
  • 14. Re: How To Conditionally Make A Specific Row In A Tabular Form Read Only.
    EEG Newbie
    Currently Being Moderated
    Hello.

    Comparing the code in the "Function and Global Variable Declaration" section on page 14 with page 15, it looks like the code on page 15 is more generic. Unlike on page 14, there are no references to specific column arrays (like f02, f03, f04, etc.).

    I also see that on page 15, you've corrected the issue with the HIREDATE (date picker) field. Except for the HIREDATE field on the very first (top) row (empno = 7839). For some reason, on only this row, the HIREDATE field is very blurry, hard to make out. However, it does change from editable to readonly when changing the ENAME field to "KING". Not sure why this is happening as the all of the other rows (even one I added) works fine.

    All I can say is THANK YOU very much for your help (both Senthill and Fac586).

    Elie
1 2 Previous Next

Legend

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