sticky not working when an ajax call in jQuery
trongtri35 opened this issue · comments
i have tried all sticky js lib, and all get the same problem that's when i update something like quantity product in cart page (woo in wordpress) by using jQuery ajax, and then the sticky not working!
how can i fix this?
You need to apply update every time you rebuild the DOM.
Example:
const sidebar = new VanillaSticky({
HTMLElement: document.querySelector('.sidebar'),
});
sidebar.init();
After the DOM has changed:
sidebar.update();
i did it but it is didn't work. when visit site first time, sticky work, but when change quantity product and ajax update , sticky not work.
My code is:
jQuery( function( $ ) {
let timeout;
const sidebar = new VanillaSticky({
HTMLElement: document.querySelector('.sticky'),
});
sidebar.init();
$('.woocommerce').on('change', 'input.qty', function(){
if ( timeout !== undefined ) {
clearTimeout( timeout );
}
timeout = setTimeout(function() {
$("[name='update_cart']").trigger("click");
// trigger cart update
}, 1000 );
sidebar.update();
});
} );
may be sticky update before ajax call complete and DOM update complete. But i try find out how to listen DOM change too, but not work.
setTimeout is an asynchronous method, so you run sidebar.update();
first and then setTimeout. Try putting update in setTimeout or make the update asynchronous in some other way.
jQuery( function( $ ) {
let timeout;
const sidebar = new VanillaSticky({
HTMLElement: document.querySelector('.sticky'),
});
sidebar.init();
$('.woocommerce').on('change', 'input.qty', function(){
if ( timeout !== undefined ) {
clearTimeout( timeout );
}
timeout = setTimeout(function() {
$("[name='update_cart']").trigger("click");
// trigger cart update
sidebar.update();
}, 1000 );
});
} );
It's not work too. May be have to listen when DOM update complete, and then update sticky js. But i'm just finding, no result yet.