CODEWITHSUNDEEP
javascripttwitter-bootstrapbootstrap-modal
bahuelga
bahuelga

Reputation: 21

Bootstrap 4 - .modal is not a function

I'm using plain Javascript along with Bootstrap, and am getting this error. I've looked at many different questions and none seem to work for me. I downloaded Jquery, Popper, and Bootstrap with npm, and have added the min scripts at the bottom of my body:

<div id="success-delete" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Success!</h4>
          </div>
          <div class="modal-body">
            <p>Template successfully deleted.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>

    <script src="/js/jquery.min.js" defer></script>
    <script src="/js/popper.min.js" defer></script>
    <script src="/js/bootstrap.min.js" defer></script>
    <script src="/js/template-section.js" defer></script>

As you can see, I'm loading the jquery before bootstrap. When a function is called in my Javascript, I want the modal to appear:

/* template-section.js */
class TemplateSection {
    constructor(...) {
        ...
        this.successModal = document.querySelector('#success-delete');
    }

    _removeTemplate(e) {
        const success = this.deleteCallback(e.currentTarget.previousSibling.getAttribute('src'));
        if (success) {
            this.container.removeChild(e.currentTarget.parentNode);
            this.successModal.modal('show');
        } else {
            // do something
        }
     }

 }

I've also tried changing the modal options to {show : true}, but that's not working. Printing out this.successModal gives me the correct element, but it doesn't appear to have the function modal.

Edit: I also know for a fact that the bootstrap.min.js file I have has modals included - I tried activating the modal by a button click and it works fine. It's getting the javascript to recognize the modal that's the problem.

Edit 2: Fixed! See answer below.

Upvotes: 1

Views: 2352

Answers (1)

bahuelga
bahuelga

Reputation: 21

Fixed by using $('#success-delete') instead of the object declared from documentSelector. Not really sure why, but it's working!

Upvotes: 1

Related Questions