Hi! Having a problem with the CSS not loading fully on first page load. Particularly affects Chrome, and Firefox, but not Opera and Dolphin.
For the CSS to be fully loaded, a manual page refresh is required. I assume that this is not the normal case? Would appreciate some support. Thanks in advance, Martin
Are you talking about after you've made changes, that your changes are not always there till you refresh? Or are you talking about subsequent views of the web page are still doing that?
If it's the prior case, that is a typical thing that browsers tend to do, it's like they have some kind of personal timer that it waits out until it will show the new changes on a page for the first time, unless manually refreshed.
If it's the latter... then I don't know, I haven't had that issue at all. Try using Ccleaner and clean up your machine a bit (which will clean out your browsers for you too) and see if that helps.
Hi Jo,
Thanks for getting back to me, the website is, frantictraveler.com
Load the page and see for yourself, and this has nothing to do with cache issue, and as mentioned previously, only occurs on the first time load. In other words, for visitors who have not visited the web-site previously, they will need to refresh the page before the full CSS templates are applied - specifically happens on Chrome and Firefox. We use Macs for testing, so maybe not happens on Windows, but still, it's the first time visitors that are affected.
This tells me that the full bootstrap process for initiating the app is not completed on first time visits.
Thanks,
Martin
Hmm not sure what to tell you then, I'm also on a Mac and unless you have other background color than white with gray text links on it, it's loading fine for me the first try.
I will tell you that your initial page load with the image on it of the city with the water is a very slow load, other than that it all seemed to load fine.
You may want to post a screenshot here so we can see what it "should" look like, versus what people are seeing at first time of opening the site, and find out what browsers there are using as well. Might be a browser issue.
Martin (the dev that comes to the forums here) and other users may have some other insights on this that I don't know about as well. Just a user here :)
Thanks Jo,
Really appreciated that you could take a look :) Maybe some optimisation is required then, and good point, I took some screen grabs last night, shall get them posted (didn't realise that this was possible).
Totally appreciated that you picked up on my query, all the best :)
@marts, I also didn't see any css problems either. Windows 10 Chrome.
I see the following error in Chrome's DEV Tools (F12) in the console section
assist_geo.js:12 Uncaught SyntaxError: Unexpected identifier
//Write the Ajax connection to geo_ip.php here
// ../../geo.php location should be correct
$.ajax({
url: "geo.php",
method: "GET",
cache:false,
timeout: 15000,
success: function (data) {
var geo_info = JSON.parse(data);
alert JSON.stringify(geo_info); //(this is line 12)
}
});
This should be more correct, but you still get an error because your resulting (data) is not in JSON form.
$.ajax({
url: "geo.php",
method: "GET",
cache:false,
timeout: 15000,
success: function (data) {
var geo_info = JSON.parse(data);
alert (JSON.stringify(geo_info)); //(this is line 12)
}
});
This is not JSON
173.11.9.17Array
(
[IP] => 173.11.9.17
[COUNTRY_CODE] => US
[COUNTRY_NAME] => United States
[CITY] => Corvallis
[LATITUDE] => 44.6391
[LONGITUDE] => -123.271
)
This is considered an acceptable JSON form using http://pro.jsonlint.com/
{
"Array": [
{
"IP": "173.11.9.17"
},
{
"COUNTRY_CODE": "US"
},
{
"COUNTRY_NAME": "UnitedStates"
},
{
"CITY": "Corvallis"
},
{
"LATITUDE": 44.6391
},
{
"LONGITUDE": -123.271
}
]
}
I'm not sure that the alert will work until you correct those 2 things.
However, the background image does take a few seconds to load according to Chrome's DEV Tools (F12) in the network section
Saj
Hi Saj,
Agreed, and thanks for spotting this, a special mention also to Jo for responding on the need to optimise the images to fix the first part of these errors. Although it should be possible to access the individual array values using the correct notation within the JSON data returned, just glad that you were able to get the values through, gives some hope that the site is on the right track.
Thanks, Martin
So here is a way you could access the JSON data once you get that worked out.
$.ajax({
type: "GET",
url: "geo.php",
async: false,
timeout: 15000,
}).done (function(data){
$.each(data.Array,function(i,val){
alert("IP=" + val.IP + "\n" +
"COUNTRY_CODE=" + val.COUNTRY_CODE + "\n" +
"COUNTRY_NAME=" + val.COUNTRY_NAME + "\n" +
"CITY=" + val.CITY + "\n" +
"LATITUDE=" + val.LATITUDE + "\n" +
"LONGITUDE=" + val.LONGITUDE);
});
}).fail(function(){
console.log("oops error");
}).always (function(){
console.log("completed request");
});
It may be better though that your JSON data is like this instead.
{
"Array": [
{
"IP": "173.11.9.17",
"COUNTRY_CODE": "US",
"COUNTRY_NAME": "UnitedStates",
"CITY": "Corvallis",
"LATITUDE": 44.6391,
"LONGITUDE": -123.271
}
]
}
Reason being is that it's intended that you'd have more then 1 array result like:
{
"Array": [
{
"IP": "173.11.9.17",
"COUNTRY_CODE": "US",
"COUNTRY_NAME": "UnitedStates",
"CITY": "Corvallis",
"LATITUDE": 44.6391,
"LONGITUDE": -123.271
},
{
"IP": "173.11.9.18",
"COUNTRY_CODE": "US",
"COUNTRY_NAME": "UnitedStates",
"CITY": "Lewisburg",
"LATITUDE": 44.624498,
"LONGITUDE": -123.242616
}
]
}
Also I don't think that "Array" would be good to use.
Saj
Thanks saj,
Precisely right, there was a flaw in the in the original call to get the geo info, a stray "echo" appeared existed within the test environment - which is now removed, meaning that the JSON data is now looking much better and workable (as you had originally suggested - thumbs up for that).
It'll be awesome over the next few hours to see the team presenting the correct map display :)
Fingers crossed :)
Martin
Ahh I see what your doing now. I would suggest that you do a check first for the ID of geo_city so that you don't get a JS error on all the pages that don't contain that element.
$.ajax({
....
if ($("#geo_city")){ //this should check to see if the element with the id=geo_city exists
$("#geo_city").append("Location: "+geo_city+", "+geo_ctry); //This should work if you want to keep it jQuery
}
....
}
});
Also noticed that your iframe for the map doesn't have the id=assist_map so it can't be updated if that was the intent. :)
Saj
That's a keen observation saj :)
…and that's the intention to keep a track on the city - the JSON call code should determine if there is any movement and update accordingly.
The iframe id was added, but will now attempt with Jquery syntax to allow the iframe to accept the new src value. When that allows us to continue, it will be the right direction.
Thanks, Martin
sorry one last thing :)
I can take your js code and use it in the console of Chrome's DEV Tools (F12) and the map breaks (I changed $("#assist_map").attr... to $("iframe").attr...). If I change the js codes src url from using "&" to just "&" the js code works and the map updates.
Saj
saj , don't apologise and thank you, that's awesome :)
Really appreciated, and will now add the hospitals to the maps :)
Thanks, happy to help.
Saj