Search code examples
javascriptjquerybuttonloadinganimated-gif

Show loading gif for one button only


i don't have expirience with js, so i need help.

i found some js scripts, how to show loading gif for all submit buttons and i'm trying to show that gif for one submit button only.

How it looks like:

  function ShowProgress() {
    setTimeout(function () {
    var modal = $('<div />');
    modal.addClass("modal");
    $('body').append(modal);
    var loading = $(".loading");
    loading.show();
    var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
    var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
    loading.css({ top: top, left: left });
    }, 200);
}

$('form').live("submit", function () {

    ShowProgress();

});

CSS:

.modal
{
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    z-index: 99;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
}

.loading
{
    font-family: Arial;
    font-size: 10pt;
    border: none;
    width: auto;
    height: auto;
    display: none;
    position: fixed;
    background-color: White;
    z-index: 999;
}

it's one to one expample from: http://www.aspsnippets.com/Articles/Display-loading-image-while-PostBack-calls-in-ASPNet.aspx

And i need to use it for this button only:

asp:Button ID="InitDataButton" OnClick="InitData_Click" runat="server" Text="Show" Width="110px" Height="30px"


Solution

  • Okay. I don't know your server side but I checked the reference you provided. So here is another solution. Try move the script from the IsPostBack in Page_Load() to the button click handler for this button. I assume you are using VB, but the idea is the same for C#.

    Dim script As String = "$(document).ready(function () { $('[id*=InitDataButton]').click(); });"
    ScriptManager.RegisterStartupScript(this, "load", script, True)