In my mind, the jQuery ajax().load functionality is possibly one of the best things about jQuery.
I ran into a problem that drove me nuts for a little while...
I have a div:
<div id="divStatus"></div>
I wanted to load some html into it each time I show a popup that contains it, like this:
// Page Variables
var ParsedURL;
var port;
var BaseUrl = "";
$(function () {
var url = document.URL;
ParsedURL
= parseUri(url);
port =
ParsedURL.port;
if (port != "")
{
port = ":" + port;
}
ShowStatusesDDL();
ReadAndDisplayCookieData();
});
function ShowStatusesDDL() {
// Build the Base URL
BaseUrl =
ParsedURL.protocol + "://" +
ParsedURL.host + port + ParsedURL.directory;
// Add the rest of the text to the url for the
BuildStatusDropDownList Handler
var LoadUrl = BaseUrl + "WebHandlers/BuildStatusDropDownList.ashx?t="
+ ParsedURL.queryKey["t"] + "&id=" + ParsedURL.queryKey["id"];
$('#divStatus').load(LoadUrl);
}
The problem with this code, is that every time the .load method runs, the url is the same. The .load method caches the url, and if it isn't different each time the .load method runs, it will return the cached return values.
To fix this you need to make the url unique every time it runs, like this:
// Page Variables
var ParsedURL;
var port;
var BaseUrl = "";
$(function () {
var url = document.URL;
ParsedURL
= parseUri(url);
port =
ParsedURL.port;
if (port != "")
{
port = ":" + port;
}
ShowStatusesDDL();
ReadAndDisplayCookieData();
});
function ShowStatusesDDL() {
// Build the Base URL
BaseUrl =
ParsedURL.protocol + "://" +
ParsedURL.host + port + ParsedURL.directory;
// Build a Globally Unique Identifier to add to the url
to make it unique every time it is loaded -
// This is because jQuery.load caches the url and won't
re-load it each time unless the url is different
var RandomGuid = guid();
// Add the rest of the text to the url for the
BuildStatusDropDownList Handler
var LoadUrl = BaseUrl + "WebHandlers/BuildStatusDropDownList.ashx?t="
+ ParsedURL.queryKey["t"] + "&id=" + ParsedURL.queryKey["id"] + "&guid="
+ RandomGuid;
$('#divStatus').load(LoadUrl);
}
function S4() {
return (((1 + Math.random()) * 0x10000) |
0).toString(16).substring(1);
}
function guid() {
return (S4() + S4() + "-"
+ S4() + "-" + S4() + "-" + S4() + "-"
+ S4() + S4() + S4());
}
Pretty basic, but if you don't know about the .load method caching, it will confise the hell out of you.
