Show loading panel on click of asp button

2019-08-29 11:03发布

站内问答 / JavaScript
1626 2 6

I have my asp button on which I am validating some data and then firing its server side function it is working fine it looks like this

<asp:Button CssClass="btnRequestFile" ID="btnSave" runat="server" Text="Request"
                            OnClientClick="if(clientValidate() == false) return false;" OnClick="btnSave_Click" />

So on my client side function I want to show a loading panel but the loading panel does not appear until there is some alert being fired here is my code:

function clientValidate() {
    // $("#IDData").html('');
    $.loading({ align: 'center', delay: 0, img: '../common/Content/images/shared/sq_loader_3.gif', onAjax: false, pulse: false });
    $("#divLoadingImg").show();
    alert("dfhdfh");
    var isValid = false;
    var objectData = null;

    var liTags = $('#' + secondContainer).find('li');
    if (liTags.length == 0) {
        alert('Please select at least one question !');
    }
    else {
        if (SaveConfiguration()) {
            //alert('error occurred');
        }
        else {
            //alert('error free');

            isValid = true;
        }
    }

    $("#divLoadingImg").hide();
    $.loading(false);
    return isValid;
}

I am using jquery.loading.min.js to show the loading panel it is not working also I have tried to place a div in markup and just show hide it as a loading but to no avail any suggestion how it could be done.

2条回答
forever°为你锁心
2楼-- · 2019-08-29 11:49 
 <head>
        <script type="text/javascript">

        document.onload=hide_loading_div();

        function show_loading_div(){
          var my_loading_div = document.getElementById('the_loading_div');
          my_loading_div.style.visibility = 'visible';
        }

        function hide_loading_div(){
          var my_loading_div = document.getElementById('the_loading_div');
          my_loading_div.style.visibility = 'hidden';
        }
    </script>

    <style type="text/css">

        .class_of_the_loading_div{
            position:fixed;
            width:100%;
            height:100%;
            top:0;
            left:0;
            background-color: rgba(0,0,0,0.75);
            text-align:center;           
        }
    </style>


</head>

<body onload="hide_loading_div()">

   Some elements, grids, buttons etc..

   <asp:Button ID="btn_something" runat="server" Text="A Button" OnClientClick="show_loading_div()" OnClick="btn_something_Click" />

  <div class="class_of_the_loading_div">
    Write here LOADING or put a loading gif...
  </div>
</body>

EXPLANATION:

  • The loading panel is visible at the beginning (while the page is initializing)
  • After first initialization, document.onload=hide_loading_div(); code hides the panel.
  • When you clicked the Asp button, JS code is triggered at first, and shows the panel again. Then C# code runs and does something at the background for a while.
  • After postback is completed, html body hides the panel because you write <body onload="hide_loading_div()">
  • You smile, because you are happy.

Note: If you want to block only a part of the page with a panel like loading div, the container div -which will 'dim out'- must have `position:relative;' attribute and the blocker div must have 'position:absolute' attribute (not fixed).

查看更多
0人赞 添加讨论(0) 举报
ゆ 、 Hurt°
3楼-- · 2019-08-29 11:59

place a dive ther "sonu" and give it some id

and in jquery write;

<script type="text/javascript">
    $(document).ready(function () {
$("#div1").hide();
function clientValidate() {

$("#div1").show("slow");
});
});
</script>

place your loding gif in the dive

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)