By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,462 Members | 1,126 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,462 IT Pros & Developers. It's quick & easy.

cache dom object into js associative array object

P: 2
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
Oct 2 '06 #1
Share this Question
Share on Google+
2 Replies


iam_clint
Expert 100+
P: 1,208
You may have to store the information in hidden divs.
Sep 8 '08 #2

rnd me
Expert 100+
P: 427
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...
Sep 9 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.