Choices-js / Choices

A vanilla JS customisable select box/text input plugin ⚡️

Home Page:https://choices-js.github.io/Choices/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cannot read properties of undefined (reading 'removeLoadingState')

cyberneticspk opened this issue · comments

I am trying to submit a form from a modal and the form is submitted through ajax. once the form is submitted some response is returned that regenerate the choices with the new values.

Laravel Blade Template Initial Render (Works Fine):

{{ Form::select('member_id',$members, null, ['class' => 'form-control choices','searchEnabled'=>'true', 'placeholder' => __('Select a Member')]) }}

Js Code to Target The Choices Instance:

    $("#createFemberForm").submit(function(event) {
        event.preventDefault();
        var formData = new FormData(this);;
        console.log(formData)
        $.ajax({
           method: "POST",
           url: '{{ route('members.ajax.store') }}',
           data: formData,
           dataType: "json",
           contentType: false,
           processData: false,
           success: function(response) {
              const choicesInstance = new Choices(document.getElementById('member_id'));
              var newChoices = [];
              for (var memberId in response.members) {
                 if (response.members.hasOwnProperty(memberId)) {
                    newChoices.push({
                       value: memberId,
                       label: response.members[memberId]
                    });
                 }
              }
              choicesInstance.setChoices(newChoices, 'value', 'label', true);
              var selectedValue = response.member_id;
              choicesInstance.setValueByChoice(selectedValue);
              memberModal.style.display = 'none';
           }
        });
     });

Error: Cannot read properties of undefined (reading 'removeLoadingState')

Any help??