[Solved] Tutorial - Reload portion of a Tab and display loading indicator next to Tab Title

[Big T]

I wanted to be able to load partial content to a portion of a Tab and display a loading ajax indicator on the left of the tab title.

You can call the refreshTab method like this:

refreshTab('/Controller/PartialAction', $('#ContentElement'), $("a[href='#TabStrip-2']"));

Parameter Explanation:
1. url - The Url of a partial view you wish to load
2. contentElement - The element you want to update with the HTML from the partial view
In the above example #ContentElement is a span in the content of my tab:

parent.Add()
      .Text("Your Tab Name")
       .Content(() =>
      { %>
         <span id="ContentElement"></span>
         <% }).Enabled(false);

3. the linkElement of the tab. If you see in the above example, there is a pattern. Tab 1 is #TabStrip-1, 2 is #TabStrip-2, etc...

After calling this method your content will be refreshed on the tab and it will remove the ajax loading indicator when done. Change the img src in refreshTab method to point to your own ajax loader:

<img src='../Content/Images/ajax-loader.gif' />

function refreshTab(url, contentElement, linkElement) {

      

          var statusIcon = null;

          var loadingIconTimeout = setTimeout(function () {

          statusIcon = $("<span id='result_loading'><img src='../Content/Images/ajax-loader.gif' /></span>").prependTo(linkElement)

          }

               , 100);

          var data = {};

          $.ajax({

              type: 'GET',

              cache: false,

              url: url, 

              dataType: 'html',

              data: data,

              error: $.proxy(function (xhr, status) {

function refreshTab(url, contentElement, linkElement) {

          var statusIcon = null;
          var loadingIconTimeout = setTimeout(function () {
          statusIcon = $("<span id='result_loading'><img src='../Content/Images/ajax-loader.gif' /></span>").prependTo(linkElement)
          }
               , 100);

          var data = {};
          $.ajax({
              type: 'GET',
              cache: false,
              url: url,
              dataType: 'html',
              data: data,

              error: $.proxy(function (xhr, status) {

                  return;
              }, this),

              complete: function () {
                  clearTimeout(loadingIconTimeout);
                  if (statusIcon !== null)
                      statusIcon.remove();
              },

              success: $.proxy(function (data, textStatus) {
                  contentElement.html(data);
              }, this)
          });

  }