i have been trying to ask this question for some time and i have no idea how to ask it.
so i have a single page e-commerce site i'm working on. it functions by changing the html in divs, and using css to hide and show divs through jquery.
my issue that i'm having is that sometimes (not all the time) if i go to show or hide a div through jquery the div will show, and then it's as if the entire dom resets (screen blacks out for a second and comes back), but the dom is not reseting because i have tested the document.ready function with console.log and it only triggers once.
this seems to happen most often when closing the cart, or loading product categories.
so just curious if anyone has any insight on to why this could be doing this. the page will also sometimes display the loading icon when loading product.
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>
<body>
<div id="container" data-role="page" data-theme="b">
<div id="header" data-role="header">
<div id="headerGraphic"><img class="menu" src="lib/img/DATique.png" alt="" align=center></div>
<!-- todo add tagline back in -->
<div data-role="footer" id="headerTagLine">an adult novelty company</div>
</div>
<div id="mainNavBar">
<div id="mainNav" data-role="navbar">
<ul>
<li class="home ui-icon-home">Home</li>
<li class="about ui-icon-question-circle">About</li>
<li class="contact ui-icon-envelope">Contact</li>
<li class="request ui-icon-lightbulb-o">Requests</li>
<li class="find ui-icon-location-arrow">Find</li>
</ul>
</div>
</div>
<div id="content" data-role="main" class=''>
<!-- todo add facebook plugin -->
<div id="sideBar">
<div id="sideNav"></div>
</div>
<div id="productWindow" class=''></div>
<div id='cartDiv' class='hidden'></div>
<div id='shippingDiv' style='max-width:400px' class='hidden ui-content'>
</div>
</div>
<div data-role="footer" id="footer">
<ul>
<li id="addingItem"></li>
<li class="cartHolder">
<div class="view">View Cart</div>
<div class="cartImg"><img src="lib/cartIcon/shopping-cart.png"></div>
<div class="badge ui-corner-all"></div>
</li>
</ul>
</div>
</div>
<!---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="lib/myScript.js"></script>
</body>
</html>
javascript:
$(document).ready(function () {
showCart();
var initialLoad = $.post('lib/php/aboutUs.php');
initialLoad.done(function (data) {
$('#productWindow').html(data);
});
var sideBar = $.post('lib/php/sideNav.php');
sideBar.done(function (data) {
$('#sideNav').html(data);
getBadge();
});
/*view cart function*/
function showCart() {
var url = 'lib/php/cart.php';
var getCart = $.post(url);
getCart.done(function (data) {
console.log("cart received");
$('#cartDiv').html(data);
});
getCart.fail(function (a, b, c) {
console.log(b);
});
loadCustomerInfo();
}
/* get badge count*/
function getBadge() {
var url = 'lib/php/getBadge.php';
var data2 = '';
var badgeCount = $.post(url, data2, null, 'json');
badgeCount.done(function (data) {
$('.badge').html(data.itemCount);
});
}
function loadCustomerInfo() {
var custInfo = $.post('lib/php/customerInfo.php');
custInfo.done(function(data) {
$('#shippingDiv').html(data);
});
}
/*load product from category menu*/
$('#content').on('click', '.menu', function (event) {
event.stopImmediatePropagation();
$('#productWindow').html('retrieving your items.......');
if (!$('#cartDiv').hasClass('hidden')) {
$('#cartDiv').addClass('hidden');
$('#productWindow').removeClass('hidden');
}
if(!$('#shippingDiv').hasClass('hidden')) {
$('#shippingDiv').addClass('hidden');
$('#productWindow').removeClass('hidden');
}
$.ajax('lib/php/clearDiscounts.php');
var cat = $(this).attr('id');
var category = {'cat': cat};
var url = 'lib/php/productListing.php';
var sent = $.post(url, category);
sent.done(function (data) {
$('#productWindow').html(data);
});
sent.fail(function (data) {
alert('failure' + JSON.stringify(data) + 'data.responseText: ' + data.responseText);
});
showCart();
});
/*view cart button*/
$('#footer').on('click', '.cartHolder', function (event) {
// event.stopImmediatePropagation();
$('#productWindow').addClass('hidden');
$('#cartDiv').removeClass('hidden');
});
/*close cart button*/
$('body').on('click', '#closeCart', function (event) {
event.stopImmediatePropagation();
$('#productWindow').removeClass('hidden');
$('#cartDiv').addClass('hidden');
var clearDiscount = $.ajax('lib/php/clearDiscounts.php');
clearDiscount.done(function (data) {
console.log("cleared discounts: " + data);
$('#cartDiv').html($('#cartDiv').html());
showCart();
});
clearDiscount.fail(function (a) {
console.log(a.responseText);
});
});
/*add items to shopping cart*/
//noinspection JSJQueryEfficiency
$('#content').on('click', '.addToCart', function (event) {
event.stopImmediatePropagation();
var delay = 1000;
var item = $(this).attr('name');
/* TODO Make To Where Output Spaces */
var data = {'itemNum': $(this).val()};
var url = 'lib/php/addToCart.php';
var sent = $.post(url, data, null, 'json');
// $('#addingItem').html('<------Putting ' + item + ' in your cart.');
sent.done(function (data) {
$('.badge').html(Object.keys(data).length);
showCart();
console.log('data from adding to cart');
// $('#addingItem').html(item + ' is in your cart.');
// setTimeout(function () {
// $('#addingItem').html('');
// }, delay);
});
sent.fail(function (data) {
console.log('failure' + data);
});
});
/*remove item from cart and refresh cart*/
//noinspection JSJQueryEfficiency
$('body').on('click', '.removeItem', function (event) {
event.stopImmediatePropagation();
if (confirm("Are You Sure Want To Take Item Out Of Your Cart?")) {
var itemNum = {'itemNum': $(this).attr('name')};
console.log($(this).attr('name') + ' has been clicked to remove');
var sent = $.post('lib/php/removeFromCart.php', itemNum);
sent.done(function (data) {
console.log('data from item removed from cart' + data);
var reset = $.ajax('lib/php/clearDiscounts.php');
reset.done(function () {
console.log('cleared discounts')
});
showCart();
getBadge();
});
}
});
/*figure discount amount*/
$('body').on("submit", '#discount', function (event) {
event.preventDefault();
event.stopImmediatePropagation();
var data2 = {
'discountCode': $('#discountCode').val(),
'originalAmount': $('#cartPrice').text().trim().substr(1)
};
$('#discountDetails').html("<p>Figuring Discount...</p>");
console.log("data before going to discount: " + data2.discountCode);
var url = 'lib/php/discounts.php';
var figureDiscount = $.post(url, data2, null, 'json');
figureDiscount.done(function (data) {
$('#discountDetails').html(data.html);
$('#totalAmount').html($('#totalAmount').html());
alert(data.discountStatus);
console.log("objects in data" + data.count);
console.log("data after submitting discount code: " + data.message);
});
figureDiscount.fail(function (data) {
console.log("fail: " + data.error)
});
});
// go to customer info screen
$('body').on('click', '#pay', function (event) {
event.preventDefault();
event.stopImmediatePropagation();
if (confirm("Are You Sure You Are Ready To Pay???")) {
// loadCustomerInfo();
$('#cartDiv').addClass('hidden');
$('#shippingDiv').removeClass('hidden');
}
});
// process order, customer info & send to paypal'
$('body').on('submit', '#customerInfo', function(event) {
event.preventDefault();
event.stopImmediatePropagation();
var formData = $('#customerInfo').serialize();
var sent = $.post('lib/php/processCart.php', formData);
sent.done(function(data) {
console.log("form sent: " + data);
var clearCart = $.ajax('lib/php/clearSession.php');
clearCart.done (function() {
console.log("cart emptied");
getBadge();
$('#shippingDiv').addClass('hidden');
$('#productWindow').removeClass('hidden');
});
clearCart.fail (function(data) {
console.log(data.responseText);
});
});
sent.fail(function(data) {
console.log("failed: " + data.responseText);
});
});
});
