locked
Not Displaying Loading Data RRS feed

  • Question

  • User-1499457942 posted

    Hi

      I have below code but it is not working .

    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContentPlaceHolder" runat="server">
        <style type="text/css">
        .modal
        {
            ;
            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: 5px solid #67CFF5;
            width: 200px;
            height: 100px;
            display: none;
            ;
            background-color: White;
            z-index: 999;
        }
    </style>
        <script type="text/javascript">
            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);
            }
            $("body").on("#btnUpload", "click", function () {
                alert('in');
                ShowProgress();
            });
    
        </script>
    </asp:Content>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
        <div class="form-horizontal">
            
            <div class="form-group">
                <asp:Label ID="lblDescription" runat="server" CssClass="col-sm-4 control-label" Text="Description"></asp:Label>
                <div class="col-sm-4">
                    <asp:FileUpload ID="FileUpload0" CssClass="form-control" runat="server" />
                   
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4"></div>
                <div class="col-sm-4">
                    <asp:Button ID="btnUpload" CssClass="btn btn-primary"  runat="server" class="btn btn-primary" Text=" UpLoad " OnClick="UpLoadData" ></asp:Button>
                </div>
            </div>
            <div id="dialog" style="display: none"> </div>
            <div class="loading" align="center">
                Loading. Please wait.<br />
                <br />
                <img src="Images/ajax-loader.gif" alt="" />
            </div>
        </div>
    </asp:Content>

    Thanks

    Wednesday, August 29, 2018 4:35 PM

Answers

  • User-1171043462 posted

    Place Code of JavaScript in ContentPlaceHolder Content2

    And use the following code

    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContentPlaceHolder" runat="server">
        <style type="text/css">
        .modal
        {
            ;
            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: 5px solid #67CFF5;
            width: 200px;
            height: 100px;
            display: none;
            ;
            background-color: White;
            z-index: 999;
        }
    </style>  
    </asp:Content>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
    <script type="text/javascript">
            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);
            }
            $("body").on("[id*=btnUpload]", "click", function () {
                alert('in');
                ShowProgress();
            });
    
        </script>
        <div class="form-horizontal">
            
            <div class="form-group">
                <asp:Label ID="lblDescription" runat="server" CssClass="col-sm-4 control-label" Text="Description"></asp:Label>
                <div class="col-sm-4">
                    <asp:FileUpload ID="FileUpload0" CssClass="form-control" runat="server" />
                   
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4"></div>
                <div class="col-sm-4">
                    <asp:Button ID="btnUpload" CssClass="btn btn-primary"  runat="server" class="btn btn-primary" Text=" UpLoad " OnClick="UpLoadData" ></asp:Button>
                </div>
            </div>
            <div id="dialog" style="display: none"> </div>
            <div class="loading" align="center">
                Loading. Please wait.<br />
                <br />
                <img src="Images/ajax-loader.gif" alt="" />
            </div>
        </div>
    </asp:Content>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 29, 2018 6:41 PM
  • User-1171043462 posted

    And also your ON syntax is wrong. Correct one is

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        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);
        }
        $("body").on("click", "[id*=btnUpload]", function () {
            alert('in');
            ShowProgress();
        });
        </script>
    

    And if you are uncomfortable with ON simply use Click inside document ready

    <script type="text/javascript">
        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);
        }
        $(function () {
            $("[id*=btnUpload]").click(function () {
                alert('in');
                ShowProgress();
            });
        });
        </script>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 29, 2018 6:49 PM

All replies

  • User475983607 posted

    I have below code but it is not working .

    As suggested many times, explain what "not working" means and the troubleshooting steps performed to this point.  For example did you open developer tools and make sure the jQuery selector for the event handler matches the element name?

     $("body").on("#<%=btnUpload.ClientID%>", "click", function () {

    Wednesday, August 29, 2018 5:05 PM
  • User753101303 posted

    Hi,

    IMHO never start a debugging session by reading your code. Instead use available tools (such as F12 in your browser but also the VS debugger when applicable) to first see what happens when your code runs (or even if it really runs).

    I noticed you added an alert but you don't even tell if the "in" message is shown or not. As pointed already it could be for now that your code is not even called because the generated ClientID doesn't match what you are using in your JavaScript code.

    Edit: it is also the other way round

     $("body").on("click","#<%=btnUpload.ClientID%>", function () { etc...

    If you see then the "in" message then keep looking at what happens next if it still doesn't work.

    Wednesday, August 29, 2018 5:24 PM
  • User-1171043462 posted

    Upload with progress bar

    Upload File without Form Submit (PostBack) using jQuery AJAX in ASP.Net

    Wednesday, August 29, 2018 6:39 PM
  • User-1171043462 posted

    Place Code of JavaScript in ContentPlaceHolder Content2

    And use the following code

    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContentPlaceHolder" runat="server">
        <style type="text/css">
        .modal
        {
            ;
            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: 5px solid #67CFF5;
            width: 200px;
            height: 100px;
            display: none;
            ;
            background-color: White;
            z-index: 999;
        }
    </style>  
    </asp:Content>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
    <script type="text/javascript">
            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);
            }
            $("body").on("[id*=btnUpload]", "click", function () {
                alert('in');
                ShowProgress();
            });
    
        </script>
        <div class="form-horizontal">
            
            <div class="form-group">
                <asp:Label ID="lblDescription" runat="server" CssClass="col-sm-4 control-label" Text="Description"></asp:Label>
                <div class="col-sm-4">
                    <asp:FileUpload ID="FileUpload0" CssClass="form-control" runat="server" />
                   
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4"></div>
                <div class="col-sm-4">
                    <asp:Button ID="btnUpload" CssClass="btn btn-primary"  runat="server" class="btn btn-primary" Text=" UpLoad " OnClick="UpLoadData" ></asp:Button>
                </div>
            </div>
            <div id="dialog" style="display: none"> </div>
            <div class="loading" align="center">
                Loading. Please wait.<br />
                <br />
                <img src="Images/ajax-loader.gif" alt="" />
            </div>
        </div>
    </asp:Content>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 29, 2018 6:41 PM
  • User-1171043462 posted

    And also your ON syntax is wrong. Correct one is

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        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);
        }
        $("body").on("click", "[id*=btnUpload]", function () {
            alert('in');
            ShowProgress();
        });
        </script>
    

    And if you are uncomfortable with ON simply use Click inside document ready

    <script type="text/javascript">
        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);
        }
        $(function () {
            $("[id*=btnUpload]").click(function () {
                alert('in');
                ShowProgress();
            });
        });
        </script>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 29, 2018 6:49 PM