Question

Have the following code which (resides in a dialog box) and serves as an event listener
for check boxes. Am able to populate / de-populate text field with values from check box
by checking or unchecking the individual check boxes:

// Event listener which picks individual contacts
// and populates input field.
$('#emailCheckListId_ul input:checkbox').change(function() {
      // Declare array
      var emails = [];

      // Iterate through each array and put email addresses into array
      $('#emailCheckListId_ul input:checkbox:checked').each(function() {
             emails.push($(this).val());
      });

      // Assign variable as To: text field by obtaining element's id.
      var textField = document.getElementById("root.emailTextField");

      // Add / Remove array from text field
      textField.value = emails;
});

However, when I use try to use the JQuery Tagify plug-in it only creates one “tagified dynamic label” inside the text field but doesn’t create another label when I click on an additional check box. Also, when I uncheck the original checkbox, it
doesn’t remove the original label.

Here’s my code using the JQuery tagify plug-in (all I did was keep everything the same as above but called the tagify function
on the text field):

// Add / Remove array from text field
textField.value = emails;

// Decorate with dynamic label
$(textField).tagify(emails); 

I get this JavaScript error in the browser:

jquery.tagify.js: ‘options’ is undefined, line 71

In the source code this line reads:

_setOption: function( key, value ) {
    options.key = value;
},

Its stating that options.key is undefined…

To view the jquery.tagify.js complete source, please click here.

What am I possibly doing wrong? Is there a way I can create an “else” for example:

// Iterate through each array and put email addresses into array
$('#emailCheckListId_ul input:checkbox:checked').each(function() 
{
    // do something
}); 

// how would I define the else when the input:checkbox:checked is not checked:

// I already tried this but it doesn't work:
$('#emailCheckListId_ul input:checkbox:unchecked').each(function() 
{
    // do something else
});

Would really appreciate it if someone could help me with this…

Answer 1

Got it working with the following code:

if (emails.length <= 0) {
    // Remove dynamic labels
    $(textField).tagify('destroy');

    // Empty text field
    textField.value = "";
}
else {
    // Reset tagify
    $(textField).tagify('destroy');

    // Add / Remove array from text field
    textField.value = emails;

    // Decorate with dynamic label
    $(textField).tagify(emails);
}