Get 2025 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Dropdown issue when appending html through javascript


Im using metronic 8, and its awesome. However there are some problems with dropdown.

First,
where is the dropdown examples? Like a simple dropdown but not the regular dropdown, but the bootstrap 5 version of dropdown?

The ones in metronic:

<a href="#%22%20class=%22btn%20btn-sm%20btn-light%20btn-flex%20btn-center%20btn-active-light-primary%20show%20menu-dropdown%22%20data-kt-menu-trigger=%22click%22%20data-kt-menu-placement=%22bottom-end" target="_blank" rel="noopener noreferrer">Actions 
<i class="ki-duotone ki-down fs-5 ms-1"></i></a>
<!--begin::Menu-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4 show" data-kt-menu="true" data-popper-placement="bottom-end" >
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="apps/ecommerce/sales/details.html%22%20class=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">View</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="apps/ecommerce/sales/edit-order.html%22%20class=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">Edit</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3%22%20data-kt-ecommerce-order-filter=%22delete_row" target="_blank" rel="noopener noreferrer">Delete</a>
</div>
<!--end::Menu item-->
</div>


And this poses an issue where i need to append rows which has these button in a table using javascript. But once appended, the dropdown wont work unless initializing KTComponents.init()

So i had to use the regular dropdown of bootstrap, then it works....
Does metronic has any regular bootstrap dropdown as below?


<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Actions
</button>
<ul class="dropdown-menu">
</p><li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>

Text formatting options
Submit

Replies (5)


Hi,

Yes, our KTDro
At the moment we do not have such examples for Bootstrap Dropdowns however
you can try to use menu makeup with Bootstrap Dropdowns. You can reset the dropdown padding using p-0 utility class and put the menu component from Metronic.

Regards.



Understood..but when the dropdown was appended through javascript, the dropdown doesnt work..

This is for appending table rows after javascript fetch..

But if not within fetch, its working..is there a reason for it?

Had to implement ktcomponents.init after appending, then the dropdowns work..

Because im making a simple script so its easy for me to use in any project, but if the project is using a different template, then it would be a problem..



Hi,

When a new dropdown HTML code appears in the document it must be initialized by the KTDropdown component to activate it so you will need to call KTComponents.init() whenever a new element is added to the DOM.

All KT components work this way. On page load they are auto-initized but when dynamically added via AJAX or another method they must be initialized explicitly once they are added to the DOM.

Regards.



Understood,

thank you so much for the information, however its a great template, well made, just need more exploring..



Hi happy,

I am glad to like it. If you need any further clarifications please do let us know.

Regards.


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Text formatting options
Submit