uvarov-frontend / vanilla-sticky

Vanilla JS sticky block without using extra packages.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.