Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • 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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(