This discussion is archived
1 2 Previous Next 24 Replies Latest reply: Jul 12, 2013 6:47 AM by KarenH Branched to a new discussion. RSS

is there a way to enable/disable a tabular form item based on the value of a second item?

KarenH Newbie
Currently Being Moderated

Hi Everyone,

 

I have a tabular form based on a collection.   The column c050(maps to f30) will be either Y/N.  If it is Y, then I would like to enable column c024( maps to f24) (which happens to be a radio button based on lov).  If the value of c050 = N, then disable c024.   There are potentially many rows, and the item c024 would only be enable/disabled for the specific row.   So if row 1 has c050=Y and row 2 has C050=N then row 1 c024 is enabled, and row 2 c024 is disabled.  Hope that makes sense.

 

I have created a dynamic action called enable/disable HMS fields.

 

event=CHANGE

selection type = jquery selector

jquery selector = input[name='f30']

condition EQUAL TO

value Y

 

true action1 - enable, jquery selector, input[name='f24']

true action 2 - alert, You have added an HMS Species.   There may be additional data to enter.  thanks

 

false action1 - disable jquery selector, input[name='f24']

false action2 - alert, no hms worries.

 

 

The alerts in both cases show properly...but nothing seems to happen to f24.....what am I doing wrong?

 

thanks

  • 1. Re: is there a way to enable/disable a tabular form item based on the value of a second item?
    jrimblas Expert
    Currently Being Moderated

    Hi Karen,

    You're close.  You have the right idea.  The one problem is that when you select input[name='f30'] you are actually getting all the rows, not just one.

    This is perfect for setting up the event on Change, but not for your true and false actions.

     

    So, do this change your DA to be just:

    event=CHANGE

    selection type = jquery selector

    jquery selector = input[name='f30']

     

    The only thing different is that there is no condition. This is important because that way it can run for all elements whether they are Y or N

     

    Then you'll set a single Javascript True action that will need to determine the row we're in f30_0001, f30_0002, etc...  We'll use this number to then target the f24 element (f24_0001, f24_0002 etc...)

    The way we can do that is by looking at the triggering element and splitting the row number out of it.

     

    Your code will look like this:

    var el = this.triggeringElement.id;
    var row = el.split("_")[1];
    if ($v(el) == "N") {
     // disable the field
      $x_disableItem("f24_" + row, true);
    }
    else {
    // enable the field
      $x_disableItem("f24_" + row, false);
    }
    

     

    Hopefully I didn't get the logic wrong, but you'll know right away.  Also, I think you'll want to let it run on load to setup all your fields the correct way.

     

    Thanks,

    -Jorge

    http://rimblas.com/blog/

  • 2. Re: is there a way to enable/disable a tabular form item based on the value of a second item?
    KarenH Newbie
    Currently Being Moderated

    Hi Jorge, thank you SOOO much.

     

    I am new to javascript so really appreciate your help!

     

    my dynamic action is now:

     

    event: CHANGE

    selection type: JQUERY SELECTOR

    jquery selector: input[name='f30']

     

     

    true action; JAVASCRIPT EXPRESSION

    var el = this.triggeringElement.id; 

    var row = el.split("_")[1]; 

    if ($v(el) == "N") { 

    // disable the field 

      $x_disableItem("f24_" + row, true); 

    }

    else { 

    // enable the field 

      $x_disableItem("f24_" + row, false); 

    }

     

    true action: ALERT

     

    event scope: DYNAMIC

     

     

    But nothing seems to happen...not even the alert.  I will play around, but perhaps you see my obvious mistake?

     

    thanks again!

  • 3. Re: is there a way to enable/disable a tabular form item based on the value of a second item?
    jrimblas Expert
    Currently Being Moderated

    What type of item is your f30 field?

    If it's a drop down the initial selector for the DA should actually be

     

    select[name='f30']

     

    Drop downs are select items not input items.

    Other that that use Firebug or the Chrome Console to see if there are any errors.

     

    Also, if you're using the Console you can then use console.log("message") to debug instead of alerts. 

     

    Oh and for the True action I hope you mean Execute Javascript Code instead of Javscript Expression, which I don't think is an option.

     

    Thanks

    -Jorge

  • 4. Re: is there a way to enable/disable a tabular form item based on the value of a second item?
    KarenH Newbie
    Currently Being Moderated

    eek.  yes, changed it to select{name='f30'] - thanks, that would have taken me forever to notice.

     

    and yes, you are correct in that it is javascript CODE. 

     

    still can't seem to get it to enable/disable...but still trying!

     

    thanks again.

  • 5. Re: is there a way to enable/disable a tabular form item based on the value of a second item?
    jrimblas Expert
    Currently Being Moderated

    Well the next thing I would say is are you 100% sure your columns are still f30 and f24? If you add or remove columns or even shuffle, this values will change.

    Which brings to to the disclaimer, the problem with this code is that is hardcoded to how the tabular form looks at a one point.

    A better approach is to "label" the elements with a class and use that because the class wont change.

     

    For example, I added a class of dropDownStatus to my select and now my initial selector can change from:

    select[name='f30']

    to

    .dropDownStatus

     

    Anyways, inspect your elements to make sure you have the right names and try the console and see what's going on.

     

    Thanks

    -Jorge

  • 6. Re: is there a way to enable/disable a tabular form item based on the value of a second item?
    KarenH Newbie
    Currently Being Moderated

    thanks again!

     

    yes, I am using firefox inspector and just verified that the columns are as they should be...f24, and f30. 

     

    I am not familiar with using CLASS...but will do some digging, as this tabular form is based on a collection with 30 columns...and I have already been snagged when reordering fields.  ugh.  thanks again.

  • 7. Re: is there a way to enable/disable a tabular form item based on the value of a second item?
    jrimblas Expert
    Currently Being Moderated

    yeah, it's a huge pain. 

    This would be added under Column Attributes for the column.

    In 4.2 we have this great Element CSS Classes.

    In 4.1 and before you need to use the Element Attributes field.  Depending on the template, you may be able to use class="yourclassname" in that field.

    But if there's already a class then you can't have two class keywords and need something different like rel="newfieldname" then your jquery can do input[rel='newfieldname']

     

    Ok... good luck...

    -Jorge

  • 8. Re: is there a way to enable/disable a tabular form item based on the value of a second item?
    KarenH Newbie
    Currently Being Moderated

    hmm...I will dig deeper as I am using 4.2.1.   Can I just added a class to the CSS attribute of the f30 field (which maps to c050...and may be part of the prob)?

     

    thanks for the tip

  • 9. Re: is there a way to enable/disable a tabular form item based on the value of a second item?
    KarenH Newbie
    Currently Being Moderated

    just to try it, I add the CSS Element SHARK.  And noticed in the inspector that it now indicates f30_0001.shark

     

    but that was all I did...just enter in the word SHARK...there is nothing behind that, should there be?  could be fabulous. 

     

    and so, now in my DYNAMIC ACTION, my jquery selector is .shark

     

    and that works!  well, at least the alert now appears....but the f24 is not disabled.  I will try and create a separate class for that and get back to you.  thanks again.

  • 10. Re: is there a way to enable/disable a tabular form item based on the value of a second item?
    jrimblas Expert
    Currently Being Moderated

    Not sure what you mean by "nothing behind that"

    The class at this point doesn't have any CSS defined. It's purely informational, but you could add any styling you like to it.

    The usefulness is that even if the column changes from f30 to fxx the shark class will remain.

     

    To defined some CSS, try something like:

    .shark {
    font-weight: bold;
    outline: 1px solid #FF2222;
    }

    Should make the font bold and add a reddish outline around it.

     

    Thanks

    -Jorge

  • 11. Re: is there a way to enable/disable a tabular form item based on the value of a second item?
    KarenH Newbie
    Currently Being Moderated

    wow!  you are opening a whole new (huge!) world!

     

    but my question is, where does this CSS code go?  sorry to be so clumsy on this, but just learning...so need even the baby steps.  you are a good sport to keep answering!  thanks

     

     

    I am in the SHARED COMPONENTS, and basically just created a file called SHARK.CSS to upload....think I am on the right track.

  • 12. Re: is there a way to enable/disable a tabular form item based on the value of a second item?
    KarenH Newbie
    Currently Being Moderated

    however...the f30 field does not bold/outline (but the DA that reference .shark does now show the ALERT).  so getting closer.

     

    also, because c024 is a radio, is it precluded from using CSS elements....I have given it an css element of hms, but when I hover over the field w/firefox inspector, it only shows as f24_0001_0001, as opposed to f24_0001_0001.hms which I had expected.

  • 13. Re: is there a way to enable/disable a tabular form item based on the value of a second item?
    jrimblas Expert
    Currently Being Moderated

    Ok, if you have a file, then you need to add it to your template or your page.  Because you're in 4.2.1 for the page add it to File URLS in the Page Definition under CSS just like this:

    #WORKSPACE_IMAGES#SHARK.css

     

    (Or #APP_IMAGES# if you uploaded the file as specific to the app).

     

    You could also just place your CSS directly inline as I provided it in the Inline field.

  • 14. Re: is there a way to enable/disable a tabular form item based on the value of a second item?
    jrimblas Expert
    Currently Being Moderated

    Agh! This is the first time you mention this is a radio button!  That changes things a lot! As you can see, the format is different (f24_0001_0001) than what we have discussed (f24_0001).

    Radio buttons have their own quirks.  My bad, I should have asked what you had.  But since you said your original selectors on input were working I just thought these were text fields or something like that.

     

    How about you change it to a drop down list just so that you can see all work?  And fully understand it.

    Then you can work out the radio button option.

     

    If that doesn't get you there... I'm going to ask you setup an example in apex.oracle.com and give me credentials to log in and take a look.

    I could re-try the js on my side with a radio but it will take some time.

     

    So just to be clear... f30 is a drop down and f24 is a radio?

     

    See, this line:

    $x_disableItem("f24_" + row, true);

     

    Is NEVER going to find the radio buttons because it's missing the 3rd 0001 and 0002 (how many options do you have?)

    So perhaps you try it like this:

    $x_disableItem("f24_" + row + '_0001', true);

    $x_disableItem("f24_" + row + '_0002', true);

    ... keep going for the options...

    Do the same for the false of course.


    But I think this needs a better approach if you'll have radio buttons.  I just need to work it out.


    Ok, go try things...

    Thanks

    -Jorge

1 2 Previous Next

Legend

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