cache dom object into js associative array object

[dtra]

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 cachedThemeTabC ontents = new Object();

function updateThemeTabC ontent(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
//cachedThemeTabC ontents[theme] = element.childNo des.item(0);
// set the theme to the newly selected theme
setTheme(themeI d);

// check to see if the theme is cached, if it is, simply replace the current
// node with the cached one and return
if (cachedThemeTab Contents[themeId] != null) {
var children = element.childNo des;
element.removeC hild(children.i tem(0));
element.appendC hild(cachedThem eTabContents[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=updateThem eTabContent'
+ '&theme=' + themeId
+ '&domain=' + getDomain();
startLoading();
asyncUpdate('th eme-tab-content', params,
function(origin alRequest) {
endLoading();
});
}


function asyncUpdate(des tId, params, oncomplete) {
var url = '/index.php';
new Ajax.Updater(
destId,
url,
{
method: 'post',
parameters: params,
onComplete: function(origin alRequest) {
if (oncomplete != null) {
oncomplete.call (this, originalRequest );
}
},
onFailure: function(origin alRequest) {
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

[iam_clint]

You may have to store the information in hidden divs.

[rnd me]

without seeing the function setTheme, i can tell you that if you set an object property to another object (like a div tag for instance), it creates a reference to that tag.

it sound like you want to pass it by value instead.

since all js objects are linked (not copied), you will have to save a primitive, like a string of the .innerHTML, use prototype's .clone if you want to copy a js object, or set the value stored in your cached object's respective key using .cloneNode(true ) rather than a direct assignment to the element.

there is no need for hidden divs...