CaptainBeefPanties•8mo ago

Displaying a Modal

I am trying to get a minimal example of using Bootstrap Modals, and managing that modal using state. Here is routes/Index.tsx:

import { Head } from "$fresh/runtime.ts";

import Modal from "../islands/Modal.tsx";

export default function Home() {
  return (
    <>
      <Head>
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
          crossorigin="anonymous"
        />
      </Head>
      <Modal visible={true}/>
      <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous"
      >
      </script>
    </>
  );
}

import { Head } from "$fresh/runtime.ts";

import Modal from "../islands/Modal.tsx";

export default function Home() {
  return (
    <>
      <Head>
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
          crossorigin="anonymous"
        />
      </Head>
      <Modal visible={true}/>
      <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous"
      >
      </script>
    </>
  );
}

And here is islands/Modal.tsx: https://paste.jlcarveth.dev/api/02dcac97-dc65-4802-ad77-81e8ac0a8de9 The modal can open and close fine. The issue is that the state of the Modal can't be controlled programatically. When I have used Bootstrap modals in the past (with React), it was as simple as adding / removing the show class from the modal. That approach no longer seems to work. So I try to hide / show the modal via the bootstrap API, which you can see me try in the onClick of that close button. But the island can't seem to access the bootstrap API. I have tried importing bootstrap via npm:bootstrap, as well as via https://esm.sh/bootstrap In short; I want to be able to toggle the Modal on and off (visible / hidden) without having to rely on the data-bs-toggle and data-bs-target HTML attributes since that prevents me from managing the modal state.

3 Replies

Deno AI Helper•8mo ago

I wasn't able to find the answer to your question in the official Deno documentation. However, based on the code snippet you provided, I can offer some general advice, but please note that this advice is not based on the Deno documentation, and you should double-check the accuracy of the advice given. In your routes/Index.tsx, you are correctly importing the Bootstrap CSS and JS files. However, I noticed that you are using the crossorigin attribute in your link and script tags. The correct attribute name is crossOrigin (with a capital 'O') in JSX. This might not be the cause of your issue with the modal state, but it's worth correcting. Regarding the Bootstrap modal API, if you are trying to access it from a Deno Fresh project, you should ensure that Bootstrap's JavaScript is fully loaded and available in the window context where your island component is trying to access it. If you are importing Bootstrap via npm:bootstrap or https://esm.sh/bootstrap, make sure that the import is done correctly and that the Bootstrap JavaScript bundle is initialized before you try to use it in your component. Since you are trying to manage the state programmatically, you might need to use the Bootstrap Modal methods like show() and hide() or manipulate the classes directly as you mentioned. If the Bootstrap API is not accessible, it could be due to the way the scripts are loaded or executed in the context of your Deno Fresh application. If you continue to face issues, I recommend checking the following: 1. Ensure that the Bootstrap JavaScript is loaded and executed before your island component tries to use it. 2. Verify that the Bootstrap JavaScript is not being blocked or unloaded when your island component is rendered. 3. Check for any JavaScript errors in the

Deno AI Helper•8mo ago

browser's console that might indicate problems with loading or using Bootstrap. Remember to consult the Bootstrap documentation for the correct usage of the modal API and consider reaching out to the community for more specific guidance on integrating Bootstrap with Deno Fresh.

Helpful Links: Fresh 1.0 Fresh 1.2 – welcoming a full-time maintainer, sharing state between islands, limited npm support, and more Interactive islands | Fresh docs Fresh 1.1 - automatic JSX, plugins, DevTools, and more

CaptainBeefPanties•8mo ago

Good bot, I will try window.bootstrap...