hi all
i've got this application where a user selects tabs on the page, which then loads a different section onto another section of the page
we currently have it working using ajax, but we would like it to cache the current object before loading the next one
and then, if it gets selected again, it can be loaded from the cache if it exists, otherwise load it from ajax
our code works in firefox, but in ie, the cached object becomes empty (not null, or undefined), we are storing it in an associative array object, and when we alert it, it is just nothing
we're using prototype, testing in firefox 1.5 and ie6
[php]
// the assoc array used as the cache
var cachedThemeTabContents = new Object();
function updateThemeTabContent(themeId) {
// get the name of the current theme, this is a string used as the assoc array key
var theme = getTheme();
// get the dom object that is currently loaded
var element = $('theme-tab-content');
// cache the current contents of the theme tab div
//cachedThemeTabContents[theme] = element.childNodes.item(0);
// set the theme to the newly selected theme
setTheme(themeId);
// check to see if the theme is cached, if it is, simply replace the current
// node with the cached one and return
if (cachedThemeTabContents[themeId] != null) {
var children = element.childNodes;
element.removeChild(children.item(0));
element.appendChild(cachedThemeTabContents[themeId]);
return;
}
// otherwise update it via ajax
// just a function to load the new theme into the element using ajax/prototype
//
// #############
// this is where the problem occurs in ie
// #############
var params = 'cmd=updateThemeTabContent'
+ '&theme=' + themeId
+ '&domain=' + getDomain();
startLoading();
asyncUpdate('theme-tab-content', params,
function(originalRequest) {
endLoading();
});
}
function asyncUpdate(destId, params, oncomplete) {
var url = '/index.php';
new Ajax.Updater(
destId,
url,
{
method: 'post',
parameters: params,
onComplete: function(originalRequest) {
if (oncomplete != null) {
oncomplete.call(this, originalRequest);
}
},
onFailure: function(originalRequest) {
alert('Error performing request, please try again later');
}
});
}
[/php]
basically, after the new element has been loaded from ajax, the previous ones are empty
i've used alerts to debug, and the innerHTML exists up until that ajax call at the bottom, after it, they will just be '', so they exist, but have no value
any ideas
thanks
dave