addField + select2 (multi select) custom template

[andrewvmail]

Hi all I was able to get a select2 input box injected into the form. by adding natestrauser:select2 + doing this:

AccountsTemplates.addField({
  _id: 'languageSpoken',
  displayName: 'Language Spoken',
  type: 'select',
 template: "languages"
});

<template name="languages">
    <div class="at-input">
        <label for="at-field-{{_id}}">{{displayName}}</label>
        <select id="at-field-{{_id}}" class="languages" multiple="multiple" style="width: 100%">
            <option value="Afrikaans">Afrikaans</option>
            <option value="Akan">Akan</option>
        </select>
    </div>
</template>

Template.languages.rendered = function () {
  $(".languages").select2();
};

Now the problem is there is some validation going even though i didnt set any validation. So the error message that keeps appearing when ever i go to that field or press submit is.

Uncaught Error: Match error: Failed Match.OneOf or Match.Optional validation

Any ideas?

Thanks in advance!

[splendido]

Hi @andrewvmail, this is how UA will pick up the value from the field: could you please check it works also for your select2 input?

As for the validation it usually occurs on the focusout of the element, unless continuousValidation is set to true (should be false by default)

[andrewvmail]

Hi Thanks,

Hmm it looks like select2 redraws the selection each time into some other divs. It looks like below. Does prototype.getValue fires whenever a user click on the input box and click out of the input box?

I guess I have to modify that prototype method to get this working.

<div class="select2-container select2-container-multi languages" id="s2id_at-field-languageSpoken" style="width: 100%;">
    <ul class="select2-choices">
        <li class="select2-search-choice"><div>American Sign Language</div><a href="#" class="select2-search-choice-close" tabindex="-1"></a></li>
        <li class="select2-search-choice"><div>Azerbaijani</div><a href="#" class="select2-search-choice-close" tabindex="-1"></a></li>
        <li class="select2-search-field"><label for="s2id_autogen1" class="select2-offscreen">Language Spoken</label><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen1" placeholder="" style="width: 34px;" aria-activedescendant="select2-result-label-1445"></li>
    </ul>
</div>

[andrewvmail]

Actually after trying I just realized i shouldn't modify the core files. To answer your previous question this is not compatible with select2 input because select2 draws out some div and put the selected answer there.

if i take out the id field from the select box the error message stop popping up. Uncaught Error: Match error: Failed Match.OneOf or Match.Optional validation

[andrewvmail]

Looks like its happening with multi selects because their values is null and at_input.js:86 this.validate(value) is expecting anything other than null....

[splendido]

well, if modifying the getValue method could make it work, go for it! you could add a case for select type inputs...

[andrewvmail]

Managed to get it working with this if anyone needs it.

I created an empty hidden field. make sure the select2 fields id does not contain the at-field-{{_id}} we dont want it this to be processed. I just use {{_id}}. Then with the code below. Whenever on change triggers it sends the values of the select2 to the hidden field i setup.

AccountsTemplates.addField({
  _id: 's2languagesSpoken',
  displayName: 'Language Spoken',
  type: 'text',
  template: "languages"
});

AccountsTemplates.addField({
  _id: 'languagesSpoken',
  type: 'hidden'
});

Template.languages.rendered = function () {
  $(".languages").select2().on("change", function(e) {
    // mostly used event, fired to the original element when the value changes
    $('#at-field-'+e.target.id.substr(2)).val(e.val);
  });
};

[splendido]

Great idea! ...but at this point you don't need to add a hidden field with AccountsTemplates.addField: simply put a hidden input element within your languages template should be enough, right?

Could you please try if something like the following (not tested) would do the trick?

<template name="languages">
    <div class="at-input">
        <label for="at-field-{{_id}}">{{displayName}}</label>
        <input id="at-field-{{_id}}" type="hidden">
        <select id="{{_id}}" class="languages" multiple="multiple" style="width: 100%">
            <option value="Afrikaans">Afrikaans</option>
            <option value="Akan">Akan</option>
        </select>
    </div>
</template>

Template.languages.rendered = function () {
  $(".languages").select2().on("change", function(e) {
    // mostly used event, fired to the original element when the value changes
    $('#at-field-'+e.target.id.substr(2)).val(e.val);
  });
};

AccountsTemplates.addField({
  _id: 'languagesSpoken',
  displayName: 'Language Spoken',
  type: 'text',
  template: "languages"
});

[andrewvmail]

Oh yeah!!! that works too Thanks. its cleaner actually to do that. Good call!!

[splendido]

Could you please contribute with an example for the wiki among custom field?

[andrewvmail]

Sure Ill take care of this tomorrow

— Sent from Mailbox/iPhone

On Sat, Mar 14, 2015 at 12:57 AM, Luca Mussi notifications@github.com wrote:

Could you please contribute with an example for the wiki among custom field?

Reply to this email directly or view it on GitHub: https://github.com/meteor-useraccounts/core/issues/311#issuecomment-78982515

[splendido]

:+1:

[andrewvmail]

Added files to custom-field section.

On Fri, Mar 13, 2015 at 9:35 AM, Luca Mussi notifications@github.com wrote:

[image: :+1:]

Reply to this email directly or view it on GitHub https://github.com/meteor-useraccounts/core/issues/311#issuecomment-79109536 .