In order to make my AJAX functionality a little more efficient I've added a cache component; but this has given me a huge new headache. The AJAX related code is below.
It listens for a click and checks if the user has already clicked that link. If not, it'll fetch the request and render the resulting bit I want nicely. If the user has already clicked the link it'll find the reference, bypass the AJAX part, and just display the data.
var cache = {}; // Data cache
var $placehold = $('#placeholder'); // Target div for all data
// The AJAX part
function getDetails(request){
$placehold.empty().addClass('loading');
return jQ.get(request);
};
// Filter & Render AJAX Data
function renderData(data){
var endResult = $(data).find('#thepartiwant');
$placehold.append(endResult);
$placehold.find('#thepartiwant').fadeTo(0,function(){
$placehold.find('#thepartiwant').fadeTo(1,600);
});
elemSize(); // Checks window size and adjusts layout accordingly...
}; // ...also bound to the window resize event
// Click Handler
jQ('#slides').on('click', '.slideLink', function(e){
e.preventDefault();
var target = jQ(this).attr("href");
// If we already have this data
if ( cache[target] ) {
renderData( cache[target] );
// Else we need to get the data
} else {
$placehold.addClass('loading');
getDetails(target)
.done( function(result) {
cache[target] = result;
renderData(result);
})
}
});
However, when loading data from the cache it seems to trigger the elemSize() function too quickly or not properly or something - the elements load but require a manual window resize to pop back into place.
Below is the relevant part of elemSize() - I've included it as is, rather than omitting anything in case there's something I've overlooked (i.e. sorry it's so verbose). Also, take it as granted that all the elements exist that have been referenced - I get no console errors.
function productWideSize(){
var $pInfo = jQ('#productInfo'),
$pForm = jQ('#product-form'),
$pNameH = jQ('#productName').outerHeight(),
$pPriceH = jQ('#productPrice').outerHeight(),
$pDesc = jQ('#productDescription'),
$pDescH = 0;
$pDesc.find('p').each(function(){
$pDescH += $(this).outerHeight();
});
// If contents are shorter than container
if ( ($pNameH + $pPriceH + $pDescH) < $pInfo.height()-72 ) {
$pInfo.removeClass('scroll');
$pForm.css({
'margin-top' : '-' + $pForm.outerHeight()/2 + 'px'
})
} else {
$pInfo.addClass('scroll');
$pForm.css({
'margin-top' : ''
})
$pDesc.css({
'height' : ($pInfo.height() - $pNameH - $pPriceH) + 'px'
});
}
};
So my question is - how can I ensure that my cached AJAX data gets rendered as nicely as my non-cached AJAX data. I've tried various ways of manually delaying the elemSize() call, with varying results - but it's a clunky approach I'd rather not use.
