Choices-js / Choices

A vanilla JS customisable select box/text input plugin ⚡️
https://choices-js.github.io/Choices/
MIT License
6.05k stars 597 forks source link

Cannot read properties of undefined (reading 'removeLoadingState') #1129

Open cyberneticspk opened 10 months ago

cyberneticspk commented 10 months ago

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??