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.

I never needed caching of javascript. Or at least I think. Can you show me your site and why do you need caching? Is it so heavy?

The site's still in development - so I can't share it I'm afraid.

However, it's not so much that it's particularly content-heavy, it's more a case of reducing AJAX requests to be kinder to mobile browsers or those with slow connections. Caching the data means not having to request it from the server more than once.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.