Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Laravel with Tab Selector Pricing Card #949

Open
Digitwellsolutions opened this issue Aug 21, 2024 · 1 comment
Open

Laravel with Tab Selector Pricing Card #949

Digitwellsolutions opened this issue Aug 21, 2024 · 1 comment

Comments

@Digitwellsolutions
Copy link

Describe the bug
The code from the Tab Selector Pricing Card on page
https://flowbite.com/blocks/marketing/pricing/
causes the following error in the browser console

Uncaught TypeError: this._items.filter is not a function
    at t.getTab (index.ts:95:28)
    at new t (index.ts:38:42)
    at formtest:307:21

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
The same behaviour as the pricing example
image

Screenshots
If applicable, add screenshots to help explain your problem.
image

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Opera
  • Version 112.0.5197.53

Additional context

Followed the instructions on setting up for Laravel to the letter.

@Digitwellsolutions
Copy link
Author

I seem to have resolved the problem.
when using

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js"></script>
The code does not work.

Changing this to the script hidden in the example page
<script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>
and it works.

I found an alternative which is to update the call to
const pricingTabs = new Tabs(pricingTabEls,options);

at the end of the script block requires another parameter which is the target element.

If I add the extra parameter to the call and use any element from the page. The tab selector works.


const pricingHTML = {
        id: document.querySelector('#premium-plan'),
    };

const pricingTabs = new Tabs(pricingHTML,pricingTabEls,options);

Can you please update your example docs to either require 1.5.1 or modify the Tabs call,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant