Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Select 2 bootstrap when dynamically load data


Hi Team,

We’re using Select2 for our dropdowns, and we’ve enabled users to add rows dynamically in the form. We were using select2 on those rows. However, when new rows are added, the Select2 dropdowns do not initialize correctly for the dynamic data.

Could you please look in to it?

Thanks!


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


Experience top-notch security with
Professional Unarmed Security Services in Fort Worth, TX. These experts focus on providing effective safety measures for residential, commercial, and event settings through their proactive and vigilant approach.



Get expert project management services in Georgia for seamless project execution and timely delivery.



For reliable and professional Loading services in East Lake CA, trust our team to ensure your belongings are packed and loaded securely.


Deleted comment

When dynamically loading data in a Bootstrap-powered webpage, you can select two important Bootstrap components to enhance functionality: the Modal and Table components. The Modal is great for displaying detailed information or forms without navigating away from the current page, while the Table allows for easy organization and presentation of large datasets. For example, in a parking management system like R2Park, a Table can display available parking spaces dynamically, and a Modal can be used to show detailed information or allow users to register for parking directly within the page. These components work together seamlessly to offer a user-friendly and interactive experience.



Hi,

You will need to reinitialize Select on the new rows that have been added. Select2 instances must be initialized once they are added to DOM. You can call KTComponents.init() after new rows are populated so you can initialize newly added Select2 instances.

For more info please check Metronic Docs.

Regards


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(