Question

0

317

Views

Tailwind-element datepicker component not working when use JQuery.load()

I have a layout page which load other html file using jquery in main content div when user click

layout.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" href="/assets/favicon.png">
    <link rel="stylesheet" href="/dist/css/Shared/layoutTailWind.css">
    <title>Todo List App</title>
</head>

<body>
    <div id="layoutApp" class="h-screen w-full bg-white relative flex overflow-hidden">
        <div id="mainContentApp">

       </div>
   </div>
</body>
</html>

layout.js:

import 'tw-elements';
 $('#mainContentApp').load(`/Views/Content/Content.html`);
var script = document.createElement('script');
script.src = `/dist/js/Content/Content.entry.js`;
script.defer = "defer"
document.body.appendChild(script)

In Content page there is a tailwind-element datepicker component

Content.html:

<div class="flex items-center justify-center">
    <div class="datepicker relative form-floating mb-3 
          xl:w-96" data-mdb-toggle-button="false">
        <input type="text"
                class="form-control block w-full px-3 
                 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
                    placeholder="Select a date" data-mdb-toggle="datepicker" />
        <label for="floatingInput" class="text-gray-700">Select a date</label>
    </div>
</div>

This is my tailwind.config.js:

const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    "./Views/**/*.{html}",
    "./ClientApp/src/js/**/*.{js}",
    "tw-elements/dist/js/**/*.js"
  ],
  theme: {
    extend: {
      colors: {
        amber: colors.amber,
        emerald: colors.emerald,
      }
    },
  },
  plugins: [
    require('tw-elements/dist/plugin')Window
  ],
}

The problem is when I use the datepicker in layout.html, it worked fine. But when I use it in Content.html, the input is there but when I click it the date popup not showing up.

I have try putting import 'tw-elements' in both js files but still not working. I cant figure out why. Any help would be appreciated.

about 4 years ago · Juan Pablo Isaza

Answer question

0

317

Tailwind-element datepicker component not working when use JQuery.load()

Find remote jobs

Andres GPT