dealing with rich advanced Radio Buttons and ajax problem

Question

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

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.

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(`
 
 
 
 
 
 
 
 ${name}
 
 
 
 
 
 `);
 });
 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

Faizal · Answer

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. 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(`
            
            
                
                
                    
                    
                        
                        ${name}
                    
                
                
            
            
        `);
    });
    
    // 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)

dealing with rich advanced Radio Buttons and ajax problem

Replies (1)

Metronic

ReUI

Products

Legal

Stay Connected