I have weird issue, I tried to google but couldn't find the reason for this behavior.
before you click on a link, turn on the firebug or chrome network tab
Issue: My initial ajax request prevents the first load of my website.. it starts working only after the refresh.
http://vetosports.com/designer/index.html
you can see that no document.ready
and window.load
events are ever fired on the first load... As soon as you refresh page, everything works correctly
you can see in the network tabs that it gets stuck on designhandler.php
... The code for sending request to designhandler.php
is:
var urlFetch = "designhandler.php"
$.ajax({
type: "POST",
url: urlFetch,
dataType: 'json',
cache: false,
data: {
sport: chosenSport
},
success: function(resp){
mainData=resp;
console.log(mainData); // in the console I can see the correct response
var jArr = resp.garments.jersey.designs;
var socArr = resp.garments.socks.designs;
var shoArr = resp.garments.shorts.designs;
for (jID in jArr) {
if (jArr[jID]['default'] == "y") {
globalJID = jID;
}
if (jArr[jID]['featured'] == "y") {
featArr.push(jID);
}
}
for (socID in socArr) {
if (socArr[socID]['default'] == "y") {
globalSocID = socID;
}
}
for (shoID in shoArr) {
if (shoArr[shoID]['default'] == "y") {
globalShoID = shoID;
}
}
fLayers = mainData.garments.jersey.designs[globalJID]['frontLayerCount'];
bLayers = mainData.garments.jersey.designs[globalJID]['backLayerCount'];
}
});
Any idea what am I doing wrong? this is a big issue and I can't leave it like this.
Thanks, Tom