Dropdowns stop working after Ajax call
Hi there, I'm using Metronic 8 and all my menu dropdowns stop listening after an ajax call.
I know I have to re-bind all the dropdowns and accordions and I have tried using the KTmenu.createInstances(), KTApp.init() and $(selector).dropdown() methods however this does not seem to work.
Here is the code snippet involving the ajax call. Please assist if possible? Thanks.
$("#invPreview").on("click", function(){
var year = $("#selectYear").val();
var date = $("#selectMonth").val();
$.post("invoice/invoice-create.load.php", {
year : year,
month : date
},
function(data, status){
$("#content1").html(data);
});
});
Replies (6)
Hi,
Please try to call those init methods right after the HTML code is populated and available in DOM. You can use the jquery post method's success event.
Regards.
Hi, I still can't seem to get it to work. As a test, I have also tried using the methods directly via the console after the html is populated. I have tried including the id "#kt_menu_aside" and the class "menu-item" as in the KTApp.init() and the KTMenu.createInstances() methods (eg KTApp.init("#kt_menu_aside")), but nothing seems to work. Not sure what is the problem.
Please find the code below.
$("#invPreview").on("click", function(){
var year = $("#selectYear").val();
var date = $("#selectMonth").val();
$.post("invoice/invoice-create.load.php", {
year : year,
month : date
},
function(data, status){
$("#content1").html(data);
KTMenu.createInstances(); //added line
});
});I realised that the dropdowns only get bound every alternate time I click the button ("#invPreview").
I realised that it's because I was including the assets/js/scripts.bundle.js in each ajax call. (added to maintain the functionality of other components such as Select2 etc...)
I have since removed it and used KTApp.init() in each ajax method to bind the added elements to the required scripts.
Thank you for your time.
Great! All the best with your project.
Your Support Matters!
Hello,
Calling KTMenu.createInstances(); work great for me when creating menus with ajax call.
But I'm having the same issue with generating a stepper in a modal using an ajax call.
is there a different init method I would have to call to initialize the stepper element?
Thanks for your help.
