Dynamically change choice buttons

  • 23 February 2017
  • 4 replies
  • 17 views
R
Badge +3

I am not understanding how the change the choice values when they are selected to: render as buttons.

Here is what I have for now (based upon blog from Sean Fiene ):

NWF$(document).ready(function(){
    var changeMe = NWF$('#' + dd1);
    NWF$(changeMe).click(function(){ var x = NWF$('#' + dd1 + ' option:selected').val();
        console.log(x );

        if( x == 'Option 1')
        {
            var y = ['tab1', 'tab2', 'tab3', 'tab4']
        }
        else if(x == 'Option 2')
        {
            var y = ['tab1', 'tab2', 'tab3', 'tab4', 'tab5']
        }
        else if(x == 'Option 3')
        {
            var y = ['tab1', 'tab2', 'tab3', 'tab4', 'tab6', 'tab7']
        }
        else
        {
            var y = 'error'
        }
        console.log(y);
       
        var myTabs = NWF$('#' + dd2);
        myTabs.empty();
        NWF$.each(y, function(val, text){
            myTabs.append(
                NWF$('<option></option>').val(val).html(text)
                );
        });
    });
});

Looks like I cannot use the option tags ''<option></option>" because when rendering as buttons there is possibly some kind of behind the scenes JavaScript rendering.

My guess it has to use something around the data-nfchoicevalue class.

Does anyone have insight around achieving this design?

Thanks in advance for your help!

Richard

4 replies

E
Userlevel 5
Badge +14

dropdown and buttons are completelly different HTML objects and so have completelly different DOM model.

buttons do not have <option /> elements at all, as you might have noticed

you should examine DOM model to understand how they are rendered.

with buttons it will not be as easy as with dropdowns to dynamically change possible options since buttons are rendered as multilevel elements and with plenty of attributes that have to be properly set.

A
Badge +5

Marian, thank you for your help.

I can see that the HTML <div> that appears to be the top-level node for the form buttons sets up some of the settings for the button, with attribute-value pairs like '"data-multiselectcontrol="False"'.  Then, a few levels down, there is a <span> with this attribute-value pair: 'data-use-attribute-as-value="data-nfChoiceValue"'.  After that, the <span> for each button has an attribute called "data-nfChoiceValue", which has as its value the name on the button.  Below that <span> there is an <input> element with 'value="Activity Analysis"'.

HTML for form buttons

We want to conditionally remove or hide some options from a fixed sequence of buttons, not completely change the set of options.  (I am working with Richard Hughes on this problem.)  It looks like the DOM model for buttons is complicated enough that we might not want to use the technique that's used in the original example, since that technique basically deletes and re-adds all options.

Would it be possible to use CSS+JS to hide or collapse some of the buttons (specific <div> elements) on certain conditions?

Or, would it be possible to use jQuery's .detach() to remove/add some of the buttons on certain conditions?

E
Userlevel 5
Badge +14

if you only want to hide subset of existing buttons the it should be achievable with CSS+js quite easily.

A
Badge +5

Got it working using the following custom JS.  This just uses jQuery, which is in Nintex forms by default, using CSS selectors but no custom CSS.  I gave the dropdown a "Client ID JavaScript variable name" of dd_level.

NWF javascript

Or in text format:

NWF$("document").ready(function() {
    NWF$("#"+dd_level).on("change", function() {
     //alert("whoa now!");
     var dd_val = NWF$("#"+dd_level).val();
     //alert("dd_val = " + dd_val)
     if(dd_val == "NCF Level 1") {
      NWF$("span[data-nfChoiceValue='Activity Analysis']").show();
      NWF$("span[data-nfChoiceValue='Root Cause']").hide();
      NWF$("span[data-nfChoiceValue='Implement Solutions']").show();
      NWF$("span[data-nfChoiceValue='Corrective Actions']").hide();
      NWF$("span[data-nfChoiceValue='Attachments']").show();
      NWF$("span[data-nfChoiceValue='Tracking Dates']").show();
      NWF$("span[data-nfChoiceValue='Contact']").show();
      NWF$("span[data-nfChoiceValue='Team']").show();
     }   
     else if(dd_val == "NCF Level 2"){
      NWF$("span[data-nfChoiceValue='Activity Analysis']").show();
      NWF$("span[data-nfChoiceValue='Root Cause']").show();
      NWF$("span[data-nfChoiceValue='Implement Solutions']").show();
      NWF$("span[data-nfChoiceValue='Corrective Actions']").show();
      NWF$("span[data-nfChoiceValue='Attachments']").show();
      NWF$("span[data-nfChoiceValue='Tracking Dates']").show();
      NWF$("span[data-nfChoiceValue='Contact']").show();
      NWF$("span[data-nfChoiceValue='Team']").show();
     }
     else if(dd_val == "NCF Level 3"){
      NWF$("span[data-nfChoiceValue='Activity Analysis']").show();
      NWF$("span[data-nfChoiceValue='Root Cause']").show();
      NWF$("span[data-nfChoiceValue='Implement Solutions']").show();
      NWF$("span[data-nfChoiceValue='Corrective Actions']").show();
      NWF$("span[data-nfChoiceValue='Attachments']").show();
      NWF$("span[data-nfChoiceValue='Tracking Dates']").show();
      NWF$("span[data-nfChoiceValue='Contact']").show();
      NWF$("span[data-nfChoiceValue='Team']").show();
     }
     else {
      alert("Please select a value in the NCF Level dropdown.")
     }
 })
});

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings