How do you add a "loading" message or animation while data is being fetched?

Jan 27, 2011 at 11:11 PM

Hi, I'm new to jQuery.  I'm fetching a large data set from an oracle db that populates flexbox.  Because it takes more than 5 secs to get the data that I need, I want to display an animation or message "loading data" to flexbox.  The current flexbox plugin doesn't seem to have this.  But since I'm new to jQuery, I don't know how this can be injected in my code.  Could you help me please?  Thanks. 

Jan 28, 2011 at 1:15 AM

I cannot wait so I created an interim solution.  I added some code in the plugin.  I know I should not be doing this, but hopefully a similar code can be added in the code base by the author later on.  I added the following...

First, add the following in the .defaults

 

// Added the next two lines in the .defaults to specify a class and message text
loadingDataText: 'loading data',
loadingDataClass: 'ffb-loading-data',

 

Second, modify the flexbox function as follows...

 

function flexbox(p, arrowOrPagingClicked, prevQuery) {
            if (arrowOrPagingClicked) prevQuery = '';
            var q = prevQuery && prevQuery.length > 0 ? prevQuery : $.trim($input.val());

            if (q.length >= o.minChars || arrowOrPagingClicked) {
                // If we are getting data from the server, set the height of the content box so it doesn't shrink when navigating between pages, due to the $content.html('') below...
                if ($content.outerHeight() > 0)
                    $content.css('height', $content.outerHeight());
                $content.html('').attr('scrollTop', 0);

                var cached = checkCache(q, p);
                if (cached) {
                    $content.css('height', 'auto');
                    displayItems(cached.data, q);
                    showPaging(p, cached.t);
                }
                else {
                    var params = { q: q, p: p, s: pageSize, contentType: 'application/json; charset=utf-8' };
                    var callback = function (data, overrideQuery) {

                        // ADDED THE FOLLOWING!!!
                        // Added the next two lines to hide 'loading data' text 
                        $content.html('');
                        $content.removeClass(o.loadingDataClass)

                        if (overrideQuery === true) q = overrideQuery; // must compare to boolean because by default, the string value "success" is passed when the jQuery $.getJSON method's callback is called
                        var totalResults = parseInt(data[o.totalProperty]);

                        // Handle client-side paging, if any paging configuration options were specified
                        if (isNaN(totalResults) && o.paging) {
                            if (o.maxCacheBytes <= 0) alert('The "maxCacheBytes" configuration option must be greater\nthan zero when implementing client-side paging.');
                            totalResults = data[o.resultsProperty].length;

                            var pages = totalResults / pageSize;
                            if (totalResults % pageSize > 0) pages = parseInt(++pages);

                            for (var i = 1; i <= pages; i++) {
                                var pageData = {};
                                pageData[o.totalProperty] = totalResults;
                                pageData[o.resultsProperty] = data[o.resultsProperty].splice(0, pageSize);
                                if (i === 1) totalSize = displayItems(pageData, q);
                                updateCache(q, i, pageSize, totalResults, pageData, totalSize);
                            }
                        }
                        else {
                            var totalSize = displayItems(data, q);
                            updateCache(q, p, pageSize, totalResults, data, totalSize);
                        }
                        showPaging(p, totalResults);
                        $content.css('height', 'auto');
                        retrievingRemoteData = false;
                    };
                    if (typeof (o.source) === 'object') {
                        if (o.allowInput) callback(filter(o.source, params));
                        else callback(o.source);
                    }
                    else {
                        retrievingRemoteData = true;
                        if (o.method.toUpperCase() == 'POST') $.post(o.source, params, callback, 'json');
                        else {
                            // ADDED THE FOLLOWING!!!
                            // Added the next two lines to display 'loading data' text 
                            $content.addClass(o.loadingDataClass).html(o.loadingDataText);
                            $ctr.show();
                            $.getJSON(o.source, params, callback);                            
                        }
                    }
                }
            } else
                hideResults();
        }