This discussion is archived
6 Replies Latest reply: Feb 15, 2013 3:52 AM by John K. RSS

Having two issues with tabular form, related to checkboxes

John K. Newbie
Currently Being Moderated
Hi All -
Jari already helped me with this once last week but I'm running into some new issues.

http://apex.oracle.com/i/index.html
workspace: Leppard
username: Guest
pw: app_1000
Application: MyTestApp

Maybe I need to break these up into two questions, if so just let me know.

Issue 1: On the first tab (Tab Report 1) I have a simple tabular form based on EMP table. The checkbox column on the far right, when checked renders the Ename column readonly. The problem is that it only works one way. Unchecking the box doesn't undo the read-only.

This is the javascript code I have on the page:
function test(pThis) {
 //get the current row index on change
 var currIndex = $('input[name="'+pThis.name+'"]').index(pThis);

 // check current items value (return value of lov)
 if (pThis.value=='Y') {
  $('input[name="f02"]')[currIndex].style.backgroundColor = "LightGrey";
  $('input[name="f02"]')[currIndex].readOnly=true;
}
else if (pThis.value=='N') {
  $('input[name="f02"]')[currIndex].style.backgroundColor = "Red";
  $('input[name="f02"]')[currIndex].readOnly=false;
}
}
The element attribute on the checkbox column is
onClick="javascript:test(this);" 
(It seems to work the same whether I use onClick or onChange so I'm not sure if that makes a difference).

But the main issue is that code is not recognizing the 'N' value in the column. I checked with firebug and the columns that I uncheck are definitely set to 'N', but I can't get the javascript to recognize this value. Even if I take out the 'else if' code and just change the first part to (pThis.value=='N') it still doesn't work. There seems to be something with the 'N' value not getting recognized but I can't figure it out.

Issue 2: On the second tab - Tab Report 2. Same report, but this time I am using a character counter javascript similar to that described in Denes' sample app (page 276 > http://apex.oracle.com/pls/otn/f?p=31517:276:19207673535900::NO). The character counter on the Ename field includes javascript and an HTML expression on the Ename column. The counter works fine but now the javascript to make the column readonly no longer works at all.

Any ideas on these are much appreciated!

thanks in advance,
john
  • 1. Re: Having two issues with tabular form, related to checkboxes
    Denes Kubicek Oracle ACE Director
    Currently Being Moderated
    John,

    both of your examples are working now. You will need to have a look at the code and see what I changed.

    Denes Kubicek
    -------------------------------------------------------------------
    http://deneskubicek.blogspot.com/
    http://www.apress.com/9781430235125
    http://apex.oracle.com/pls/apex/f?p=31517:1
    http://www.amazon.de/Oracle-APEX-XE-Praxis/dp/3826655494
    -------------------------------------------------------------------
  • 2. Re: Having two issues with tabular form, related to checkboxes
    Tom Petrus Expert
    Currently Being Moderated
    <ul>
    <li>Kindly please understand what HTML is generated, and learn to inspect it. Once you can do this, you can easily eliminate many problems with selectors not seeming to work. A textarea is not an input element for example.
    <li>Checkboxes rely on the checked property, not the value. Apex works around this by creating an extra hidden item which will get the value set based on the checked property of the visible checkbox
    <li>Don't use those horrible onclick and onchange attributes :( Use a dynamic action or jQuery to bind events.
    <li>Don't apply styling through javascript. Use CSS to drive this as with jQuery you can easily add, remove or toggle classes too. And if you know jQuery selectors, you can understand css selectors since they're much the same.
    <li>I'm not sure why people insist on using rowIndex or substringing IDs. I find this unnecessary and more complex than the alternative (traverse with jQuery)
    <li>The difficulty also lies in making things work through pagination. Running it on just the visible page is peanuts, but through pagination requires more work as just checking 'fire on page load' is not sufficient. I'm sure that you'd want your ENAME column to be in red or grey and readonly as soon as the page has loaded, and not when you start typing in the box...
    </ul>

    Tab Form 1: Copied to Page 12 and made my changes there:_
    <ul>
    <li>onchange on ENAME. Removed this. No clue why you'd need this as it seems a crutch for not having the field in the state you want when the page has loaded.
    <li>onclick on CHECKBOX. Removed this as I hate these attributes. Replaced by a dynamic action.
    <li>Dynamic action "checkbox: set ENAME readonly"
    <ul>
    <li>Event: After Refresh
    <li>Selection Type: Region
    <li>Region: Tab form 1
    <li>No condition
    <li>Event Scope: Static
    <li>True Action
    <ul>
    <li>Execute Javascript Code
    <li>Fire on Page Load: YES
    <li>Code:
    //at page load and after each region refresh:
    //each: check all checkboxes and set readonly on ename accordingly
    //click: when the checkbox changes, change ename accordingly
    $("td[headers='CHECKBOX'] input[type='checkbox']:visible")
    .each(function(){checkReadonly(this);})
    .click(function(){checkReadonly(this);});
    </ul>
    </ul>
    <li>Page > Function and Global Variable Declaration
    function checkReadonly(pCheck){
       var lCheck = $(pCheck);
       lCheck.closest("tr")
       .find("td[headers='ENAME'] input:visible").each(function(){
          $(this).prop("readonly", lCheck.prop("checked"));
       });
    };
    <li>Page > Inline CSS
    td[headers='ENAME'] input{
    background-color: red;
    }
    td[headers='ENAME'] input[readonly]{
    background-color: lightgrey;
    }
    CSS works so much better for this than applying style through js...
    </ul>

    Tab Form 2: Copied to Page 13 and made my changes there:_
    <ul>
    <li>onchange on ENAME. Removed this. No clue why you'd need this.
    <li>onclick on CHECKBOX. Removed this as I hate these attributes. Replaced by a dynamic action.
    <li>Dynamic action: identical to page 12's, just changed triggering region
    <li>Changed INPUT to TEXTAREA where required:
    <li>Page > Function and Global Variable Declaration
    function checkReadonly(pCheck){
       var lCheck = $(pCheck);
       lCheck.closest("tr")
       .find("td[headers='ENAME'] textarea:visible").each(function(){
          $(this).prop("readonly", lCheck.prop("checked"));
       });
    };
    <li>Page > Inline CSS
    td[headers='ENAME'] textarea{
    background-color: red;
    }
    td[headers='ENAME'] textarea[readonly]{
    background-color: lightgrey;
    }
    <li>I changed the f_set_counter function a bit: there was 2 braces too many, put a semi-colon at each line end.
    - Changed $x(node).value to $s(node, value) and $v(node)
    - changed $x(node).innerHTML to $(node).text()
    I know: it worked. I like this better. OCD? :/
    function f_set_counter(pThis,pLength,pMaxLength,pReset)
    {    
       if (pLength>pMaxLength){
          alert('The maximum length of '+pMaxLength+' exceeded.');
          $s(pReset, $v(pReset).substring(0,pMaxLength));
          $("#"+pThis).text(pMaxLength);
       }else{
          $("#"+pThis).text(pLength);
       };
    };
    </ul>

    Edited by: Tom on Feb 15, 2013 12:48 PM
    Made a mistake in dynamic action event: click -> after refresh!
  • 3. Re: Having two issues with tabular form, related to checkboxes
    Denes Kubicek Oracle ACE Director
    Currently Being Moderated
    I made it working and you changed that an hour later :)

    Denes Kubicek
    -------------------------------------------------------------------
    http://deneskubicek.blogspot.com/
    http://www.apress.com/9781430235125
    http://apex.oracle.com/pls/apex/f?p=31517:1
    http://www.amazon.de/Oracle-APEX-XE-Praxis/dp/3826655494
    -------------------------------------------------------------------
  • 4. Re: Having two issues with tabular form, related to checkboxes
    scott.wesley Guru
    Currently Being Moderated
    too many cooks ;-)
  • 5. Re: Having two issues with tabular form, related to checkboxes
    Tom Petrus Expert
    Currently Being Moderated
    I actually spent quite some time working on it (oops). I saw someone else was making changes, so i copied the pages and made my changes there so I wouldn't interfere. I then created dynamic actions to trigger on click, but then ditched those because of the pagination and I created the "After Refresh" ones. Plus the writeup which i lost at some point thanks to pushing backspace while the textarea was inactive (grr). I saw you posted in the mean time though, i was just too slow :)
  • 6. Re: Having two issues with tabular form, related to checkboxes
    John K. Newbie
    Currently Being Moderated
    Thank you Tom and Denes. You guys are rock stars and I so appreciate all the help and advice. I'm doing my best to learn this stuff but there is a lot to it, obviously.

    If either of you can make recommendations on the best resources (online, classroom etc.) to learn from that would be great. I'm working my way through the W3Schools site but at this point I'd happily pay for a good online comprehensive course. I'm taking a 5-day pl/sql course through work in June, and the local community college here has a class in javascript that I'm thinking of taking. In any event, if you have any other suggestions please let me know. In the meantime I'm sure I am going to be referring to Tom's thoughtful and detailed writeup for quite some time!

    Thanks again!
    john

Legend

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