display Jquery GIF onload Jquery Tabs

Question

I am trying to display a spinner gif inside the area where my tabs display while the AJAX content is loading. However my Ajax call doesn't happen inside the tabs code. It happens via an external ajax call shown below and then during the .done() method of the ajax call I place json data within that div located inside the tabs.

I would like to display a spinner inside the tab while the ajax call is happening. I've looked at several tutorials online but nothing is working for my needs. Any help appreciated thanks.

                          $('#tabs').tabs({
                                    selected: 1,
                                    beforeLoad: function(event, ui) {
                                        $('#imageSpinner').show();
                                        /* if ajax call to retrieve tab content failed */
                                        ui.jqXHR.error(function() {
                                           // $('#imageSpinner').hide();
                                            ui.panel.html("An error occured.");
                                        });
                                    },

                                    /* Called when tab is loaded */
                                    load: function(event, ui) {
                                      //  $('#imageSpinner').hide();

                                    }
                                });


<div id="tabs">
                                <ul>
                                    <li><a href="#tabs-1">PL Message Viewer</a>
                                    </li>
                                    <li><a href="#tabs-2">File Message Viewer</a>
                                    </li>
                                </ul>

                                <div id="tabs-1" style="height:535px; overflow-y:scroll; float:left; z-index:1;">
                                    <div style="margin-left:32px;">
                                        <div id="buttonContent" class="buttonContente">
                                         <img id="imageSpinner" src="images/image_623941.gif" style="vertical-align:middle; z-index:200;'">
                                        </div>
                                    </div>
                                </div>

                                <div id="tabs-2" style="height:535px; overflow-y:scroll; float:left;">
                                    <div style="margin-left:32px;">
                                        <div id="buttonContentFile" class="buttonContente"></div>
                                    </div>
                                </div>

                            </div>




function getFilters() {
                    return $.ajax({
                        type: "GET",
                        url: "InsertMessage",
                        data: "term=PLM",
                        cache: false,
                        success: function (data) {},
                        error: function (xhr, status, error) {
                            alert(xhr.responseText);
                        }
                    });
                }
                getFilters().done(function (r) {
                    if (r) {
                        gridValsstr = r;
                        gridvals = JSON.parse(gridValsstr);
                        $.each(gridvals.messagetypes, function (key, value) {
                            $("#buttonContent").append('<div id="ck-button"> <label> <input type="checkbox" value="' + value.id + '"><span>' + value.messagetype + '</span>  </label></div>');
                        });

                    }
                })
                    .fail(function (x) {
                        alert("Asynchronous call failed.");
                    });

Answer 1

It looks like the image is showing by default when the page is loaded. To remove the image and show the content use html() instead of append() in the done function.

This will replace the image with the loaded content.

$("#buttonContent").html('<div id="ck-button"> <label> <input type="checkbox" value="' + value.id + '"><span>' + value.messagetype + '</span>  </label></div>');

Since it seems you know the element you are loading the results of you ajax call you can set the content to the spinner when you call the getFilters() function

function getFilters()
{
    $("#buttonContent").html('<img id="imageSpinner" src="images/image_623941.gif" style="vertical-align:middle; z-index:200;'">';
    // your ajax call
});

Answer 2

Try changing the beforeLoad function to include a function to handle the done event of the ajax call...

beforeLoad: function(event, ui) {
    $('#imageSpinner').show();

    // when ajax call to retrieve tab content is complete
    ui.jqXHT.done(function() {
        $('#imageSpinner').hide();
    });

    // if ajax call to retrieve tab content failed
    ui.jqXHR.error(function() {
        ui.panel.html("An error occured.");
    });
},

Answer 3

// Tabs
$("#tabs").tabs({
// This enables caching as well
beforeLoad: function( event, ui ) {
    if (ui.tab.data("loaded")) {
        event.preventDefault();
        return;
    }
    ui.jqXHR.success(function() {
        ui.tab.data("loaded", true);
        $(".spinner").hide();
    }),
    ui.jqXHR.error(function( jqXHR, textStatus, errorThrown ) { 
        alert(lang.tabErrorMsg);
    })
},
beforeActivate: function( event, ui ) {
    if (ui.newPanel.html()=="") ui.newPanel.html('<img class="spinner" src="spinner.gif">);
        }
});