dealing with rich advanced Radio Buttons and ajax problem
Hi Metronic team, I am using metronic Bootstrap and HTML version v8.2.7, and currently I am trying to use a radio button from the advanced forms section, and there is a problem when adding the elements using JS. When adding the items without JS it works without problem
<pre land="html">
<div class="row mb-2" data-kt-buttons="true" id="authorize_user_modal_options">
<div class="col">
<label class="btn btn-outline btn-outline-dashed btn-active-light-primary w-100 p-4 mb-2 active">
<input type="radio" class="btn-check" name="member" value="1" checked="checked" />
<span class="d-block fw-semibold text-center">
<span class="text-gray-900 fw-bold d-block fs-4">1</span>
</span>
</label>
</div>
<div class="col">
<label class="btn btn-outline btn-outline-dashed btn-active-light-primary w-100 p-4 mb-2">
<input type="radio" class="btn-check" name="member" value="2" />
<span class="d-block fw-semibold text-center">
<span class="text-gray-900 fw-bold d-block fs-4">2</span>
</span>
</label>
</div>
<div class="col">
<label class="btn btn-outline btn-outline-dashed btn-active-light-primary w-100 p-4 mb-2">
<input type="radio" class="btn-check" name="member" value="3" />
<span class="d-block fw-semibold text-center">
<span class="text-gray-900 fw-bold d-block fs-4">3</span>
</span>
</label>
</div>
</div>
</pre>
When I click on any item, the item is highlighted and becomes active, but when I use it using javascript to add items most of the time when I click any element all of the elements become selected or active on click so the first element when page load is the only active/selected item but when I select the other elements they active still in the old selected element and also be added to the new element and the checked does not move from one element to another.
<!--begin::Row-->
<div class="row mb-2" data-kt-buttons="true" id="authorize_user_modal_options"></div>
<!--end::Row-->my js code
function get_user_authorize_modal_ready(data) {
$("#authorize_user_modal_options").empty();
// Populate the modal with user options
data.personnel.forEach((member, idx) => {
var name = (LANGUAGE_CODE == "en") ? member.english_name : member.arabic_name;
var activeClass = idx === 0 ? "active" : "";
var checkedAttr = idx === 0 ? "checked="checked"" : "";
$("#authorize_user_modal_options").append(`
<!--begin::Col-->
<div class="col">
<!--begin::Option-->
<label class="btn btn-outline btn-outline-dashed btn-active-light-primary w-100 p-4 mb-2 ${activeClass}">
<input type="radio" class="btn-check" name="member" value="${member.member_id}" ${checkedAttr} />
<span class="d-block fw-semibold text-center">
<img src="${member.image}" alt="${name}" class="rounded-circle mb-3" />
<span class="text-gray-900 fw-bold d-block fs-4">${name}</span>
</span>
</label>
<!--end::Option-->
</div>
<!--end::Col-->
`);
});
authorize_user_modal.show();
}Please, I want your help in this matter as fast as you can. This feature is supposed to be live at the end of the current week
Replies (2)
Without going into either the technicality of it all, the movement functionality, link or the physical weight of the watch on the wrist, the most prominent difference I can identify between the Tonda PF Split-Seconds – as the clear-cut halo product within the new collection – and the rest of the Tonda PF line boils down to dial aesthetics.
Hi
The problem occurs because the data-kt-buttons component is only initialized once when the page loads. When you dynamically add new radio button elements via JavaScript, the component doesn't know about them and doesn't attach the proper event handlers. Here's the solution:
The data-kt-buttons component in Metronic v8 uses a flag data-kt-initialized="1" to prevent re-initialization. When you add new elements dynamically, the component has already been initialized and won't attach event handlers to the new elements.
1. Remove the initialization flag before adding new content
function get_user_authorize_modal_ready(data) {
// Remove the initialization flag to allow re-initialization
$("#authorize_user_modal_options").removeAttr("data-kt-initialized");
$("#authorize_user_modal_options").empty();
// Populate the modal with user options
data.personnel.forEach((member, idx) => {
var name = (LANGUAGE_CODE == "en") ? member.english_name : member.arabic_name;
var activeClass = idx === 0 ? "active" : "";
var checkedAttr = idx === 0 ? "checked=\"checked\"" : "";
$("#authorize_user_modal_options").append(`
<!--begin::Col-->
<div class="col">
<!--begin::Option-->
<label class="btn btn-outline btn-outline-dashed btn-active-light-primary w-100 p-4 mb-2 ${activeClass}">
<input type="radio" class="btn-check" name="member" value="${member.member_id}" ${checkedAttr} />
<span class="d-block fw-semibold text-center">
<img src="${member.image}" alt="${name}" class="rounded-circle mb-3" />
<span class="text-gray-900 fw-bold d-block fs-4">${name}</span>
</span>
</label>
<!--end::Option-->
</div>
<!--end::Col-->
`);
});
// Re-initialize the buttons component
KTApp.createButtons();
authorize_user_modal.show();
}Sources:
Metronic v8.2.7 JavaScript component initialization logic in /src/js/components/app.js (lines 134-153)
