I've been struggling to phrase this question for a while now. I'm working on a single-page e-commerce site that operates by modifying the HTML in divs and using CSS along with JQuery to show and hide those divs. My problem arises when, occasionally (not always), attempting to show or hide a div through JQuery results in the div displaying momentarily, followed by what seems like the entire DOM resetting (screen blackout and then refresh). However, upon testing, the document.ready function only triggers once. This issue tends to occur most frequently when closing the cart or loading product categories.
Has anyone encountered a similar situation or have any insights into why this behavior might be happening? Sometimes the page will also display a loading icon when fetching products.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>DATique</title>
<link rel="stylesheet" href="lib/css/styles.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="lib/css/jqm-icon-pack-fa.css"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
</head>
...
<p>Javascript:</p>
<pre><code>$(document).ready(function () {
// JavaScript functions
});