issue with autoloading modal on page load Rails 5 Tailwindcss

Question

Hey all I am trying to build a modal that loads 10 seconds after a user lands on my homepage. I have a basic modal example Ive added into my app and have tied to add custom js (my weakness, I'm trying to learn it...). when I inspect the element in chrome I see this error:

application.self-33e0fcb4f9616be09c26add85386e3d65847a6a251a90987c7cc14257e70ecf6.js?body=1:25 Uncaught TypeError: $(...).modal is not a function
    at application.self-33e0fcb4f9616be09c26add85386e3d65847a6a251a90987c7cc14257e70ecf6.js?body=1:25

The modal is stored in a partial on my homepage. I'm new to modals, but any assistance would be appreciated here!

My modal code:

<div id="interestModal" class="animated fadeIn fixed z-50 pin overflow-auto bg-smoke-dark flex">
  <div class="animated fadeInUp fixed shadow-inner max-w-md md:relative pin-b pin-x align-top m-auto justify-end md:justify-center p-8 bg-white md:rounded w-full md:h-auto md:shadow flex flex-col">
    <h2 class="text-4xl text-center font-hairline md:leading-loose text-grey md:mt-8 mb-4">Question!</h2>
    <p class="text-xl leading-normal mb-8 text-center">
      Is this Working???
    </p>
    <div class="inline-flex justify-center">
      <button @click="toggleModal" class="bg-grey-lighter flex-1 border-b-2 md:flex-none border-green ml-2 hover:bg-green-lightest text-grey-darkest font-bold py-4 px-6 rounded">
        Absolutely
      </button>
      <button @click="toggleModal" class="bg-grey-lighter flex-1 md:flex-none border-b-2 border-red ml-2 hover:bg-red-lightest text-grey-darkest font-bold py-4 px-6 rounded">
        Not so much
    </button>
  </div>
    <span id="closeModal" class="absolute pin-t pin-r pt-4 px-4">
        <svg class="h-12 w-12 text-grey hover:text-grey-darkest" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
    </span>
  </div>
</div>

My javascript:

$(window).load(function(){
   setTimeout(function(){
       $('#interestModal').modal('show');
   }, 10000);
});

EDIT: Realizes my javascript was for bootstrap modal.

So it turns out this code is strictly for a bootstrap component, so I am back to square one on how to open this modal with either javascript or jQuery. any pointers or resources on how to open this 10sec after a page loads? i know i may be reaching, but im striking out as many tutorials on line reference strictly bootstrap.

Have you seen this? It also has a modal inside a template. https://stackoverflow.com/questions/47491685/bootstrap-modal-in-ruby-on-rails-not-workingnot-show-up — Horacio Coronel, Apr 23 '18 at 21:25

score 1 · Accepted Answer · edited May 12 '18 at 07:03

Your question made me doubt, so, before writing this, I went to w3schools at javascript reference, to verify what I am going to write, I do not think there is a modal() function native to JS.

You have 2 options, or you use a library like Semantic.UI Modal or follow the instructions at w3schools

Personally, I find semantic.ui to be fascinating, I highly recommend it.

By the way, I assume that you are not using any JS or CSS library since you do not mention it.

issue with autoloading modal on page load Rails 5 Tailwindcss

1 Answers1