即使在主内容页面中使用 jQuery 单击表单提交后，加载 gif 也不起作用答案

【问题标题】：Loading gif not working even after clicking form submit using jQuery in master content page即使在主内容页面中使用 jQuery 单击表单提交后，加载 gif 也不起作用
【发布时间】：2017-02-17 05:26:22
【问题描述】：

我正在开发一个 ASP.NET 网页，但这是第一次使用主内容页面。在这里，我正在尝试使用加载 gif 图像，但它根本不起作用。如果我在普通页面中尝试相同的代码，它工作正常。我尝试了很多教程，但我没有得到确切的解决方案，并且加载 gif 图像应该出现在整个页面上，并且它应该只允许按钮单击一次。请帮忙。

我的代码：

 <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0)" />
<title>:::Assets Tracking System:::</title>
<link href="Style/Rewards.css" rel="stylesheet" type="text/css" />
<link href="Style/master.css" rel="stylesheet" type="text/css" />
<link href="Style/StyleSheet.css" rel="stylesheet" type="text/css" />

<link href="jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="jquery.blockui.js" type="text/javascript"></script>
<script src="common.js" type="text/javascript"></script>

 <style type="text/css"></style>


<%--jquery for loding gif image--%>
 <script src="jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
  <script>
      $('#form1').submit(function () {
          $('#loading_image').css('visibility', 'visible');
      });
</script>

<div>


<form id="form1" runat="server">
    <%--loding gif image--%>
    <img src="Images/page-loader.gif" style="display: none;" id="loading_image"/>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <table id="table3" cellpadding="0px" cellspacing="0px" border="0">
        <tr>
            <td style="height: 22px; width: 223px; background-color: #a4b9d8;">
                <img align="middle" src="Images/wabag_logo.png" alt="Wabag Logo" style="height: 87px; border: 0px; width: 170px;" />
            </td>
            <%--width: 90%;--%>
            <td style="height: 22px; width: 90%; background-color: #a4b9d8;" valign="middle"
                colspan="2">
                <asp:Label ID="Label2" runat="server" Style="font-family: Georgia,Times New Roman,Times , Serif,; color: #0000A0; font-weight: bolder; font-size: 15pt;"
                    Text="ASSET TRACKING SYSTEM"></asp:Label>
            </td>
        </tr>
        <tr>
            <td valign="bottom" align="right" style="background-image: url(Images/linebar_up.gif); height: 4px"
                colspan="3"></td>
        </tr>
        <tr id="tr3">
            <td style="width: 183px">
                <asp:LinkButton ID="lnkwabag" runat="server" Text="Wabag" BorderStyle="None" Font-Names="Verdana"
                    Font-Size="Small" ForeColor="White" OnClick="lnkwabag_Click" Visible="false"></asp:LinkButton>
                <asp:Label ID="lblpipe" runat="server" Text=" || " Font-Size="Small" Visible="false"></asp:Label>
                <asp:LinkButton ID="lnkportal" runat="server" Text="Portal" BorderStyle="None" Font-Names="Verdana"
                    Font-Size="Small" ForeColor="White" OnClick="lnkportal_Click1" Visible="false"></asp:LinkButton>
                <asp:Label ID="lblpipe1" runat="server" Text=" || " Font-Size="Small" Visible="false"></asp:Label>
                <asp:Image ID="Image2" runat="server" Height="15px" ImageUrl="~/images/home.gif"
                    Style="vertical-align: middle" />
                <asp:LinkButton ID="lnkhome" runat="server" Text="Home" BorderStyle="None" Font-Names="Verdana"
                    Font-Size="Small" ForeColor="White" OnClick="lnkhome_Click"></asp:LinkButton>
            </td>
            <td>
                <asp:Label ID="lblView" runat="server" ForeColor="White" Font-Size="10pt" Font-Names="Verdana"></asp:Label>
            </td>
            <td align="right" style="height: 12px;">
                <asp:Image ID="Image1" runat="server" Height="15px" ImageUrl="~/images/logoff.gif"
                    Style="vertical-align: middle" />
                <asp:LinkButton ID="lblLogout" runat="server" Font-Size="10pt" CssClass="lbl" OnClick="lblLogout_Click"
                    ForeColor="White">Sign out</asp:LinkButton>
            </td>
        </tr>

        <tr>
            <%--id="td31"--%>
            <td id="td31" style="width: 10%; background-image: url(Images/Wvleft.jpg); background-repeat: no-repeat; margin: 0 0 0 0;">
                <table style="width: 100%; background-image: url(Images/Wvleft.jpg); background-repeat: no-repeat; margin: 0 0 0 0;">
                    <%--<tr>
                        <td align="center" style="font-size: 14px; font-family: Verdana; font-weight: bolder;
                            width: 165px;">
                            CONTENTS
                        </td>
                    </tr>--%>
                    <tr>
                        <td align="left" style="font-size: SMALL; font-family: Verdana; font-weight: bolder; width: 165px; background-image: url(Images/Wvleft.jpg); background-repeat: no-repeat; margin: 0 0 0 0;">
                            <asp:TreeView ID="trvReport" runat="server"
                                ImageSet="XPFileExplorer" OnSelectedNodeChanged="trvReport_SelectedNodeChanged" ShowLines="True" Font-Names="Verdana">
                                <Nodes>
                                    <asp:TreeNode Expanded="True" Text="ASSET SYSTEM" Value="10">
                                        <asp:TreeNode Expanded="True" Text="Master" Value="13">
                                            <asp:TreeNode ImageUrl="~/Images/ThumbnailViewHS.bmp" Text="Classifications" ToolTip="Classifications"
                                                Value="11"></asp:TreeNode>
                                            <asp:TreeNode ImageUrl="~/Images/ThumbnailViewHS.bmp" Text="Product Master" ToolTip="Product Master"
                                                Value="12"></asp:TreeNode>
                                        </asp:TreeNode>
                                        <asp:TreeNode ImageUrl="~/Images/ThumbnailViewHS.bmp" Text="Add an Asset" ToolTip="Add Asset"
                                            Value="2"></asp:TreeNode>
                                        <asp:TreeNode ImageUrl="~/Images/ThumbnailViewHS.bmp" Text="Issue" ToolTip="Issue"
                                            Value="3"></asp:TreeNode>
                                        <asp:TreeNode ImageUrl="~/Images/ThumbnailViewHS.bmp" Text="ACK Assets" Value="1" ToolTip="Acknowledgement of your Received Assets"></asp:TreeNode>
                                        <asp:TreeNode ImageUrl="~/Images/ThumbnailViewHS.bmp" Text="Return ACK" Value="9" ToolTip="Acknowledgement of your Return Assets"></asp:TreeNode>
                                        <asp:TreeNode Expanded="True" ImageUrl="~/Images/Folder.ico" NavigateUrl="~/Images/folderopen.ico"
                                            SelectAction="None" ShowCheckBox="False" Text="Reports" ToolTip="Reports"
                                            Value="4">
                                            <asp:TreeNode ImageUrl="~/Images/cal.gif" Text="Detailed Asset List" Value="5"></asp:TreeNode>
                                            <asp:TreeNode ImageUrl="~/Images/cal.gif" Text="Issued Report" Value="6"></asp:TreeNode>
                                            <asp:TreeNode ImageUrl="~/Images/cal.gif" Text="Employee & Assets" Value="15"></asp:TreeNode>
                                            <asp:TreeNode ImageUrl="~/Images/cal.gif" Text="Available Stock" Value="7"></asp:TreeNode>
                                            <asp:TreeNode ImageUrl="~/Images/cal.gif" Text="Consolidated Stock" Value="8"></asp:TreeNode>
                                            <asp:TreeNode ImageUrl="~/Images/cal.gif" Text="Location wise Consolidated Stock" Value="20"></asp:TreeNode>
                                        </asp:TreeNode>
                                        <asp:TreeNode ImageUrl="~/Images/ThumbnailViewHS.bmp" Text="Privilege" ToolTip="User Rights"
                                            Value="14"></asp:TreeNode>
                                    </asp:TreeNode>
                                </Nodes>
                                <RootNodeStyle BorderStyle="None" />
                                <NodeStyle Font-Size="small" ForeColor="Maroon" Font-Names="Verdana" />
                                <ParentNodeStyle BorderStyle="None" />
                                <SelectedNodeStyle ForeColor="Fuchsia" />
                                <HoverNodeStyle ForeColor="Fuchsia" />
                            </asp:TreeView>

                            <asp:TreeView ID="trvAcceptance" runat="server"
                                ImageSet="XPFileExplorer" ShowLines="True" OnSelectedNodeChanged="trvAcceptance_SelectedNodeChanged" Font-Names="Verdana">
                                <Nodes>
                                    <asp:TreeNode Expanded="True" Text="ASSET SYSTEM" Value="12">
                                        <asp:TreeNode ImageUrl="~/Images/ThumbnailViewHS.bmp" Text="ACK ASSETS" Value="1" ToolTip="Acknowledgement of your Received Assets"></asp:TreeNode>
                                        <asp:TreeNode ImageUrl="~/Images/ThumbnailViewHS.bmp" Text="RETURN ACK" Value="9" ToolTip="Acknowledgement of your Return Assets"></asp:TreeNode>
                                    </asp:TreeNode>
                                </Nodes>
                                <RootNodeStyle BorderStyle="None" />
                                <NodeStyle Font-Size="small" ForeColor="Maroon" Font-Names="Verdana" />
                                <ParentNodeStyle BorderStyle="None" />
                                <SelectedNodeStyle ForeColor="Fuchsia" />
                                <HoverNodeStyle ForeColor="Fuchsia" />
                            </asp:TreeView>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <table style="margin: 250px 0 0 0; color: #645454; font-family: Verdana; font-size: 10pt">
                                <tr>
                                    <td>
                                        <asp:Label ID="lbl3" runat="server" Text="Legends:" ForeColor="#000040"></asp:Label></td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label ID="lbl1" runat="server" Text="* ACK ASSETS - Acknowledgement of your Assets" ForeColor="Maroon" Font-Names="Verdana" Font-Size="8pt"></asp:Label></td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label ID="lbl2" runat="server" Text="* RETURN ACK - Acknowledgement of your return Assets" ForeColor="Maroon" Font-Names="Verdana" Font-Size="8pt"></asp:Label></td>
                                </tr>
                            </table>

                        </td>

                    </tr>
                </table>
            </td>
            <td align="Left" id="td32" colspan="2" style="width: 90%;">

            </td>
        </tr>
    </table>

</form>
    </div>

【问题讨论】：

标签： javascript jquery html asp.net

【解决方案1】：

我从您的代码中了解到。您正在尝试在表单提交后显示加载图像。 $(..).submit 将重定向您的页面，因此它找不到 #loading_image 元素。

要阻止它重定向，在函数中返回 false，如

 $('#form1').submit(function () {
     $('#loading_image').css('visibility', 'visible');
     return false;              
});

希望它能解决你的问题

【讨论】：

感谢它现在工作。我犯了一个错误，我纠正了它。