From 9683a72e22f3ee24fdd9118914a06bd8d3d29972 Mon Sep 17 00:00:00 2001
From: Tungnx <tungnxt89@gmail.com>
Date: Mon, 25 Dec 2023 14:08:37 +0700
Subject: [PATCH] = 4.2.5.8 = ~ Check all class lp-load-ajax-element loaded to
 handle on 3 case: 1- file js loaded, 2-  readystatechange, 3-
 DomContentLoaded.

---
 assets/src/js/loadAJAX.js | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/assets/src/js/loadAJAX.js b/assets/src/js/loadAJAX.js
index aedc5467b..f1f5582de 100644
--- a/assets/src/js/loadAJAX.js
+++ b/assets/src/js/loadAJAX.js
@@ -41,9 +41,11 @@ const lpAJAX = ( () => {
 		getElements: () => {
 			//console.log( 'getElements' );
 			// Finds all elements with the class '.lp-load-ajax-element'
-			const elements = document.querySelectorAll( '.lp-load-ajax-element' );
+			const elements = document.querySelectorAll( '.lp-load-ajax-element:not(.loaded)' );
 			if ( elements.length ) {
 				elements.forEach( ( element ) => {
+					//console.log( 'Element handing', element );
+					element.classList.add( 'loaded' );
 					const url = API.frontend.apiAJAX;
 					const elTarget = element.querySelector( '.lp-target' );
 					const dataObj = JSON.parse( elTarget.dataset.send );
@@ -78,26 +80,21 @@ const lpAJAX = ( () => {
 	};
 } );
 
+// Case 1: file JS loaded, find all elements with the class '.lp-load-ajax-element' not have class 'loaded'
 if ( 'undefined' === typeof window.lpAJAXG ) {
 	window.lpAJAXG = lpAJAX();
 	window.lpAJAXG.getElements();
 }
 
-/*document.addEventListener( 'readystatechange', ( event ) => {
-	console.log( 'readystatechange' );
-	const elements = document.querySelectorAll( '.lp-load-ajax-element' );
-	elements.forEach( ( element ) => {
-		if ( ! element.classList.contains( 'loading-first' ) ) {
-			console.log( 'okokkk' );
-			element.classList.add( 'loading-first' );
-		} else {
-			console.log( 'nooooo' );
-		}
-	} );
+// Case 2: readystatechange, find all elements with the class '.lp-load-ajax-element' not have class 'loaded'
+document.addEventListener( 'readystatechange', ( event ) => {
+	//console.log( 'readystatechange' );
+	window.lpAJAXG.getElements();
 } );
 
+// Case 3: DOMContentLoaded, find all elements with the class '.lp-load-ajax-element' not have class 'loaded'
 document.addEventListener( 'DOMContentLoaded', () => {
-	console.log( 'DOMContentLoaded' );
-} );*/
+	window.lpAJAXG.getElements();
+} );
 
 export default lpAJAX;