Cannot read properties of undefined (reading 'removeLoadingState') - Choices.js

Question

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

I want to Render the choices through ajax with the new data

Answer 1

According to the provided code, the error occurs on the following line:

const choicesInstance = new Choices(document.getElementById('member_id'));

This error typically happens when you try to access an undefined attribute or method of a third-party library or plugin. In this case, it's likely that the Choices instance is not properly loaded or initialized.

To resolve this issue, you can check the following points:

Ensure that you have correctly imported the Choices library. Check your HTML file to make sure you have the correct tag to load the JavaScript file of the Choices library. Verify that the file path and file name are correct, and that the library file is successfully loaded.

Make sure that the version of the Choices library you are using is compatible with your code. Sometimes, different versions of a library may have different APIs or features. Ensure that you are using a Choices version that is compatible with your code.

If you are using a custom or modified version of Choices, ensure that your modifications do not cause the removeLoadingState attribute to be missing or renamed. Check any custom modifications you made to the Choices library to ensure that you haven't deleted or renamed the removeLoadingState attribute.

If you have checked the above points and the problem still persists, it may require further debugging and consulting the documentation or source code of the Choices library to understand how to properly initialize and use it.