As a newcomer to JavaScript, I am exploring ways to traverse a DOM that utilizes Checkboxes for filtering results and displays them through Ajax. The checkboxes are organized in 4 levels:
- Grand Parent
- Parent
- Child
- Grand Child
My goal is to have the JavaScript click on each checkbox at every level and pause until the content is fully loaded.
Currently, the script successfully traverses the DOM but does not wait for content loading.
I aim for the next function `decideRead()` to be called only after the Ajax results have been refreshed upon clicking an element.
I have experimented with using setTimeOut and similar delay methods, but they are ineffective due to JavaScript's single-threaded nature. Any suggestions?
Here is part of my existing code:
for (i = 0; i < mgtNode.length; i++) {
mgtNode[i].click();
for (j = 1; j < stateNode.length; j++){
stateNode[j].click();
var read = decideRead();
if (read){
alert('Data has been read, skipping further reading below.');
stateNode[j].click(); // Skipping further reading
continue;
}
// More nested loops follow for different nodes...
}
}