www.webdeveloper.com
Results 1 to 2 of 2

Thread: Ajax loader

Hybrid View

  1. #1
    Join Date
    Mar 2011
    Posts
    20

    Ajax loader

    Good morning all,

    I have a question about displaying an Ajax image before and after a request has completed.

    Code:
        function createList(assetCollection, value, order) {
            showAjaxLoader(true, element);
    
            var sorted;
            var filteredList = [];
    
            // remove any duplicate Id's
            var n = 0;
            $.each(assetCollection, function (i, asset) {
                if (asset.Id != n) filteredList.push(asset);
                n = asset.Id;
            });
    
            switch (value) {
                case 'DisplayName':
                    sorted = (order.toString().toLowerCase() == "desc") ? $(filteredList).sort(sortDisplayNameDesc) : $(filteredList).sort(sortDisplayName);
                    break;
                case 'Type':
                    sorted = (order.toString().toLowerCase() == "desc") ? $(filteredList).sort(sortTypeDesc) : $(filteredList).sort(sortType);
                    break;
                case 'Rating':
                    sorted = (order.toString().toLowerCase() == "desc") ? $(filteredList).sort(sortRatingDesc) : $(filteredList).sort(sortRating);
                    break;
                case 'Downloads':
                    sorted = (order.toString().toLowerCase() == "desc") ? $(filteredList).sort(sortDownloadsDesc) : $(filteredList).sort(sortDownloads);
                    break;
                case 'DateCreated':
                    sorted = (order.toString().toLowerCase() == "desc") ? $(filteredList).sort(sortRecentDesc) : $(filteredList).sort(sortRecent);
                    break;
                default:
                    sorted = (order.toString().toLowerCase() == "desc") ? $(filteredList).sort(sortDisplayNameDesc) : $(filteredList).sort(sortDisplayName);
                    break;
            }
    
            buildAssets(sorted);
    
            showAjaxLoader(false, element);
        };
    As you can see from that function above, I call a function called "showAjaxLoader". The boolean variables are to say whether to show or hide the ajax loader. As you can see I load the ajax loader at the start of the function, then hide it at the end.
    My issue is that is not what happens. There is a delay before the ajax loader is displayed rather than showing it straight away, it looks like it loads the elements and then it shows the loader.

    the function for the ajaxloader looks like this:

    Code:
    function showAjaxLoader(isLoading, target) {
        var ajaxLoader = '<div class="ajax"><img src="/Content/media/ajax-loader.gif" alt="Loading..." /></div>';
    
        if (isLoading) {
            target.css('position', 'relative');
    
            var h = target.height();
            var w = target.width();
    
            $(ajaxLoader)
                    .css({
                        'display': 'none',
                        'position': 'absolute',
                        'left': '0',
                        'top': '0',
                        'z-index': '1000px',
                        'width': w + 'px',
                        'height': h + 'px'
                    })
                    .appendTo(target)
                    .fadeIn();
        } else {
            $('.ajax', target).fadeOut('fast', function () {
                $(this).remove();
            });
        }
    };
    Any help would be greatly appreciated.

    Cheers,
    r3plica

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    Perhaps I'm looking at this too quickly and missing a finer point, but my guess would be that you have either the call to show the AJAX loader or hide the AJAX loader in the wrong place. I don't actually see any AJAX request code in there and obviously you want to show the AJAX loader before the request is made. Then using the readyState attribute you'd of course wait for the request to be complete and then execute some code to handle the responseText and finally hiding the AJAX loader.

    So wherever the AJAX request is, you'll want your showAjaxLoader() function to appear before the .send() in your request. After the readyState is equal to 4 (meaning the request is complete of course) you'd probably then execute your createList() function which seems to handle the data; at the end of this function you'd then be hiding your AJAX loader.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles