Nintex Forms 2010 - JQuery - set the Title on a multi select List Lookup control options

  • 22 January 2018
  • 5 replies
  • 28 views
K
Badge +2

I am attempting to set the "Title" attribute of a List Lookup control set to display as a "multi select" list of options.

It appears that when I assign a javascript variable to the control, that javascript variable isn't representing the control directly, but rather some hidden text box somewhere.  This leaves me with no options to use JQuery to select the options within the list to work with them (setting the title for each option in the control, for example).

Can someone provide me with a method to select these options?  I can't be sure, but this specific control is really the only one I have had difficulty with.

Thanks,

~~Kolten

5 replies

E
Userlevel 5
Badge +14

could clarify, resp. post an example what you exactly with setting a Title for a option of multiselect list lookup control?

is it an additional text you want to see next option text itself?

or is it HTML node attribute?

or...?

K
Badge +2

Thanks for the reply!

I have a "List Lookup" control, with it's "Display Format" set to "Multi Select".  This control has a Client ID Javascript variable named "varPeripheralList":
212880_pastedImage_1.png

When attemption to query the <options> of this control, I am not getting back the actual control itself.  Rather, I get some hidden text box on the form.  I determined this by looking at the "id" attribute and logging it.  I get:

Here is the SELECT control I expected to be referencing (taken from Google's dev tools):

<select id="ctl00_m_g_bcb77a39_377b_424c_91cb_f4a022fbad10_ctl00_ListForm2_formFiller_FormView_ctl42_ctl20_481826e8_f072_426d_ba56_1dde5537e679_1" name="3d19fb8e-06d7-418d-b481-2154298312ae$1" formcontrolid="3d19fb8e-06d7-418d-b481-2154298312ae" multiple="multiple" class="allOptions" data-type="select"></select>

And here is the item that ACTUALLY is selected (note the ID):

<input name="ctl00$m$g_bcb77a39_377b_424c_91cb_f4a022fbad10$ctl00$ListForm2$formFiller$FormView$ctl42$ctl20$481826e8_f072_426d_ba56_1dde5537e679_hid" type="text" id="ctl00_m_g_bcb77a39_377b_424c_91cb_f4a022fbad10_ctl00_ListForm2_formFiller_FormView_ctl42_ctl20_481826e8_f072_426d_ba56_1dde5537e679_hid" class=" nf-multiselect nf-associated-control" style="display:none;" formcontrolid="3d19fb8e-06d7-418d-b481-2154298312ae">

Note the ID's are different.  The control that is actually selected from JQuery using the "varPeripheralList" variable is actually some hidden text field - not the SELECT control!  A simply JQuery statement will show you the ID that 'varPeripheralList' is referencing:

  var objPeripheralList = NWF$('#'+varPeripheralList);  

  console.log(objPeripheralList.attr('id'));

How can I select the OPTIONS from the SELECT control and change their TITLE attribute?

I am using Nintex Forms 2010 in a SharePoint 2010 environment with latest updates applied.

Thanks,

~~Kolten

E
Userlevel 5
Badge +14

yes, you're right. js variable points to a html node that holds current value. usually it's an input node. sometimes it might be hidden, especially for more complex controls

to change title attribute of an option in left panel you might use selectors like

NWF$('#'+varPeripheralList).siblings('table.nf-lookup').find('select.allOptions option')[0].setAttribute('title','title left')‍

and in right panel then selectors like

NWF$('#'+varPeripheralList).siblings('table.nf-lookup').find('select.nf-client-control option')[0].setAttribute('title','title right')‍

if you see it simpler, you might define a custom CSS class for lookup control, and build the selector using the class like

NWF$('.PeripheralListClass table.nf-lookup select.allOptions option')[0].setAttribute('title','title left')‍

(Note: I've tested it on NF2013, but I guess for 2010 it should be the same)

K
Badge +2

After many attempts, I figured out my issue.

I needed to place my JQuery selector inside of the NWF.FormFiller.Events.RegisterAfterReady() function as the table and select control I was attempting to grab wasn't ready after document.ready() - it was only available after NWF.FormFiller.Events.RegisterAfterReady(). 
After realizing this, the rest of the selector (and the code I wished to manipulate) was easy enough.

Thanks!

I needIO

E
Userlevel 5
Badge +14

great!

if you have a solution please mark the question answered.

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings