Displaying spinner Jquery Tabs while Ajax is loading

Displaying spinner Jquery Tabs while Ajax is loading

Hello,

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.
 

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

  11.                                     /* Called when tab is loaded */
  12.                                     load: function(event, ui) {
  13.                                       //  $('#imageSpinner').hide();
  14.                                        
  15.                                     }
  16.                                 });

  17. <div id="tabs">
  18.                                 <ul>
  19.                                     <li><a href="#tabs-1">PL Message Viewer</a>
  20.                                     </li>
  21.                                     <li><a href="#tabs-2">File Message Viewer</a>
  22.                                     </li>
  23.                                 </ul>
  24.                               
  25.                                 <div id="tabs-1" style="height:535px; overflow-y:scroll; float:left; z-index:1;">
  26.                                     <div style="margin-left:32px;">
  27.                                         <div id="buttonContent" class="buttonContente">
  28.                                         <img id="imageSpinner" src="images/image_623941.gif" style="vertical-align:middle; z-index:200;'">
  29.                                         </div>
  30.                                     </div>
  31.                                 </div>

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

  37.                             </div>



  38. function getFilters() {
  39.                     return $.ajax({
  40.                         type: "GET",
  41.                         url: "InsertMessage",
  42.                         data: "term=PLM",
  43.                         cache: false,
  44.                         success: function (data) {},
  45.                         error: function (xhr, status, error) {
  46.                             alert(xhr.responseText);
  47.                         }
  48.                     });
  49.                 }
  50.                 getFilters().done(function (r) {
  51.                     if (r) {
  52.                         gridValsstr = r;
  53.                         gridvals = JSON.parse(gridValsstr);
  54.                         $.each(gridvals.messagetypes, function (key, value) {
  55.                             $("#buttonContent").append('<div id="ck-button"> <label> <input type="checkbox" value="' + value.id + '"><span>' + value.messagetype + '</span>  </label></div>');
  56.                         });

  57.                     }
  58.                 })
  59.                     .fail(function (x) {
  60.                         alert("Asynchronous call failed.");
  61.                     });