Nintex forms SharePoint 2016: cannot select dropdown option via NWF$

  • 13 October 2016
  • 2 replies
  • 13 views

Badge +1

Hello, we are upgrading SharePoint 2013 to SharePoint 2016 and have a form with some custom javascript in it. On Nintex Forms 2013 version all works well, but when using the same js on 2016 this does not work?

I have a dropdown on the form with the client id stored in a js variable. The var name is myCompanyDropdown.

this line of code sets the dropdown to a specific value, eg TEST:

NWF$("#" + myCompanyDropdown + " option:contains(TEST)").attr("selected", true);

But, when i try the same on the SP2016 version, this does not work?

It returns the object:

{
[functions]: ,
context: { },
jquery: "1.10.1",
length: 0,
prevObject: { },
selector: "#ctl00_ctl40_g_8a1e4ee4_92ec_4600_9262_776710cee826_ctl00_ListForm2_formFiller_FormView_ctl30_ecb50df3_9df4_48e9_8e38_2091e83d368a_hid option:contains(TEST)"
}

i found out that when i run this code: console.log(myCompanyDropdown); 

it returns this

ctl00_ctl40_g_8a1e4ee4_92ec_4600_9262_776710cee826_ctl00_ListForm2_formFiller_FormView_ctl30_ecb50df3_9df4_48e9_8e38_2091e83d368a_hid

what at the end the _hid, so is this a hidden field? And indeed, when i inspect element the Dropdown, the id is different, eg: 

ctl00_ctl40_g_8a1e4ee4_92ec_4600_9262_776710cee826_ctl00_ListForm2_formFiller_FormView_ctl30_ecb50df3_9df4_48e9_8e38_2091e83d368a

and if i change the option:contains to this id, it works??

NWF$("#ctl00_ctl40_g_8a1e4ee4_92ec_4600_9262_776710cee826_ctl00_ListForm2_formFiller_FormView_ctl30_98acc963_979e_425d_bebb_fa102b6b6993 option:contains(TEST)").attr("selected", true);

so, why doesn't NWF$("#" + myCompanyDropdown) work on SP2016 and gives me a hidden field instead of the actual dropdown?


2 replies

Badge +2

I see the same issue since the last update in October. I've not been able to set a default option since the update.

Badge +1

I posted this answer to a similar question but I think it might help you as your problem sounds similar to what I was facing:

Since we  upgraded to Forms version 2.10 (from an older version like 2.5) we have had a lot of trouble with this. The following code works for me but it isn't as clean as I would like it to be so if anyone has a suggestion for improvement, JS is not my specialty! There are two issues in my opinion:

  1. I'm not able to catch the change event of the child control as I should be. I have to trigger the change from the parent manually
  2. When the change happens it is too fast so I have to put in a delay loop to wait for the DDL to load completely. Seems like there should be a better way.

 

As I said, it works, it is just a little ugly. Note  that if you are not dealing with the parent/child relationship you can hardcode  default value really easily:

NWF$(document).ready(function() {
 NWF$("#" + myddl).val('3');
});

 

Here is the parent/child one:

 

NWF$(document).ready(function() {
 NWF$("#" + ddlParent).change(function () {       
  NWF$("#" + ddlChild).change();        
 }); 
   
  
 NWF$("#" + ddlChild).change(function () { 
  var ddlChildId = ddlChild.substring(0, ddlChild.length -4); 
  var len= NWF$("#" + ddlChildId ).find("option").length;      
  if(len>=2) {

 return delay(1000).then(function() {
   NWF$("#"      + ddlChildId).prop('selectedIndex',1);
   NWF$("input#" + ddlChildId).val(NWF$("#" + ddlChildId).find("option")[1]); 

});
  }
  else {
       while(i<10 && len==1) {
       i++;        
          return delay(1000).then(function() {
           len= NWF$("#" + ddlChildId ).find("option").length;
           if(len>=2) {
            NWF$("#"      + ddlChildId).prop('selectedIndex',1);
            NWF$("input#" + ddlChildId).val(NWF$("#" + ddlChildId).find("option")[1]);      
           }
          });        
   }
  }            
 });

 function delay(t) {
  return new Promise(function(resolve) {
   setTimeout(resolve, t)
  });
 }
});

Reply