Javascript运行时错误'；显示'；是未定义的_Javascript_Jquery_Asp.net_Vb.net

Javascript运行时错误'；显示'；是未定义的

javascript jquery asp.net vb.net

Javascript运行时错误'；显示'；是未定义的,javascript,jquery,asp.net,vb.net,Javascript,Jquery,Asp.net,Vb.net,在服务器上加载数据表时，我试图显示正在加载的gif。我从中找到了一些代码，但当我尝试实现它时，我发现运行时错误“Show”未定义。下面是我正在使用的javascript/jquery代码 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript

在服务器上加载数据表时，我试图显示正在加载的gif。我从中找到了一些代码，但当我尝试实现它时，我发现运行时错误“Show”未定义。下面是我正在使用的javascript/jquery代码

<script type="text/javascript" src="http://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);
}
$('form').live("submit", function () {
    ShowProgress();
});

编辑： 我正在编辑它以添加Css标记

<style type="text/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: 5px solid #67CFF5;
    width: 200px;
    height: 100px;
    display: none;
    position: fixed;
    background-color: White;
    z-index: 999;
}


情态动词
{
位置：固定；
排名：0；
左：0；
背景色：黑色；
z指数：99；
不透明度：0.8；
过滤器：α（不透明度=80）；
-moz不透明度：0.8；
最小高度：100%；
宽度：100%；
}
.装货
{
字体系列：Arial；
字号：10pt；
边框：5px实心#67CFF5；
宽度：200px；
高度：100px；
显示：无；
位置：固定；
背景色：白色；
z指数：999；
}

任何帮助都将不胜感激。

您正在引用的示例是使用引导。您需要在代码中引用引导javascript库才能使用

.show（）

方法

下面是示例源代码的最上面部分-请参见底线：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_Head1"><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="Content-type" content="text/html;charset=UTF-8" /><title>
    Display Loading progress Image when Page loads or does PostBack using ASP.Net
</title><meta http-equiv="Keywords" content="Mudassar,Mudassar Khan, Mudassar Ahmed Khan,asp.net articles,C#.NET Articles,ASP,ASP.NET,C#,VB,CSharp,C Sharp,dotnet,GridView,DropDownList,Visual Studio,AJAX,CSS, CSS3, JavaScript,JQuery,XML,Crystal Reports,SSIS,SSRS,DetailsView,winforms,windows forms,windows application,code samples,.net code examples,WCF tutorial,WebService tutorial,LINQ,,authoring,programming,learning,beginners guide,primer,lessons,school,howto,reference,free,examples,samples,source code,demos,tips,links,FAQ,tag list,forms,Crystal Reports,Reporting,RDLC Reports,ReportViewer,FaceBook,Twiiter,Google, Google Maps" /><meta http-equiv="Description" content="
ASP.NET,C#.NET,VB.NET,JQuery, Json,JavaScript,Gridview,SQL Server,Ajax,jQuery Plugins,jQuery UI,SSRS,RDLC,Crystal Reports,Reports,FaceBook, Twitter, Google, Google Maps, API, Windows Forms, Windows, WinForms, XML,HTML, CSS, CSS3, jQuery demos,code,snippets, examples, articles" /><link rel="alternate" type="application/rss+xml" title="Free ASP.Net Code Snippets, Tutorials, Articles, Technical Stuff, Tips, Solutions and much more. | ASP.Net, C#.Net, VB.Net, AJAX,JQuery, JavaScript, GridView,SQL Server, RDLC, SSRS, Crystal Reports, XML, JSON, FaceBook, Twitter, Google Maps examples" href="/RSS.axd" /><link rel="icon" type="image/x-icon" href="//aspsnippets.com/images/Metro/Blue/ASPSmall.png" /><meta content="Mudassar Ahmed Khan" name="author" /><meta content="index,follow" name="robots" /><meta content="index, follow" name="Googlebot" />


    <!--[if gt IE 8]>
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" media="screen" />
    <![endif]-->
    <!--[if !IE]><!-->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" media="screen" />
    <!--<![endif]-->
    <!--[if lt IE 9]>
        <link rel="stylesheet" href="/Demos/Bootstrap-3.0/css/bootstrap.min.css" media="screen" />
    <![endif]-->

    <link rel="stylesheet" href="//www.aspsnippets.com/Demos/Bootstrap-3.0/css/override.css?15_12_2016" /><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" media="screen" />
    <!--[if !IE]><!-->
    <link rel="stylesheet" href="//www.aspsnippets.com/Demos/Bootstrap-3.0/media/Above_1024.css?06_05_2014" /><link rel="stylesheet" media="all and (max-width: 767px)" href="//aspsnippets.com/Demos/Bootstrap-3.0/media/below_767.css" />
    <!--<![endif]-->
    <!--[if gt IE 8]>                
        <link rel="stylesheet" href="//aspsnippets.com/Demos/Bootstrap-3.0/media/Above_1024.css?06_05_2014" /><link rel="stylesheet" media="all and (max-width: 767px)" href="//aspsnippets.com/Demos/Bootstrap-3.0/media/below_767.css" /> 
    <![endif]-->
    <!--[if lt IE 9]>
      <link rel="stylesheet" href="//aspsnippets.com/Demos/Bootstrap-3.0/css/IE.css?06_05_2014" />
        <![endif]-->
    <script type="text/javascript" src='//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>


当页面加载或使用ASP.Net进行回发时显示加载进度图像

您正在引用的示例是使用引导。您需要在代码中引用引导javascript库才能使用

.show（）

方法

下面是示例源代码的最上面部分-请参见底线：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_Head1"><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="Content-type" content="text/html;charset=UTF-8" /><title>
    Display Loading progress Image when Page loads or does PostBack using ASP.Net
</title><meta http-equiv="Keywords" content="Mudassar,Mudassar Khan, Mudassar Ahmed Khan,asp.net articles,C#.NET Articles,ASP,ASP.NET,C#,VB,CSharp,C Sharp,dotnet,GridView,DropDownList,Visual Studio,AJAX,CSS, CSS3, JavaScript,JQuery,XML,Crystal Reports,SSIS,SSRS,DetailsView,winforms,windows forms,windows application,code samples,.net code examples,WCF tutorial,WebService tutorial,LINQ,,authoring,programming,learning,beginners guide,primer,lessons,school,howto,reference,free,examples,samples,source code,demos,tips,links,FAQ,tag list,forms,Crystal Reports,Reporting,RDLC Reports,ReportViewer,FaceBook,Twiiter,Google, Google Maps" /><meta http-equiv="Description" content="
ASP.NET,C#.NET,VB.NET,JQuery, Json,JavaScript,Gridview,SQL Server,Ajax,jQuery Plugins,jQuery UI,SSRS,RDLC,Crystal Reports,Reports,FaceBook, Twitter, Google, Google Maps, API, Windows Forms, Windows, WinForms, XML,HTML, CSS, CSS3, jQuery demos,code,snippets, examples, articles" /><link rel="alternate" type="application/rss+xml" title="Free ASP.Net Code Snippets, Tutorials, Articles, Technical Stuff, Tips, Solutions and much more. | ASP.Net, C#.Net, VB.Net, AJAX,JQuery, JavaScript, GridView,SQL Server, RDLC, SSRS, Crystal Reports, XML, JSON, FaceBook, Twitter, Google Maps examples" href="/RSS.axd" /><link rel="icon" type="image/x-icon" href="//aspsnippets.com/images/Metro/Blue/ASPSmall.png" /><meta content="Mudassar Ahmed Khan" name="author" /><meta content="index,follow" name="robots" /><meta content="index, follow" name="Googlebot" />


    <!--[if gt IE 8]>
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" media="screen" />
    <![endif]-->
    <!--[if !IE]><!-->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" media="screen" />
    <!--<![endif]-->
    <!--[if lt IE 9]>
        <link rel="stylesheet" href="/Demos/Bootstrap-3.0/css/bootstrap.min.css" media="screen" />
    <![endif]-->

    <link rel="stylesheet" href="//www.aspsnippets.com/Demos/Bootstrap-3.0/css/override.css?15_12_2016" /><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" media="screen" />
    <!--[if !IE]><!-->
    <link rel="stylesheet" href="//www.aspsnippets.com/Demos/Bootstrap-3.0/media/Above_1024.css?06_05_2014" /><link rel="stylesheet" media="all and (max-width: 767px)" href="//aspsnippets.com/Demos/Bootstrap-3.0/media/below_767.css" />
    <!--<![endif]-->
    <!--[if gt IE 8]>                
        <link rel="stylesheet" href="//aspsnippets.com/Demos/Bootstrap-3.0/media/Above_1024.css?06_05_2014" /><link rel="stylesheet" media="all and (max-width: 767px)" href="//aspsnippets.com/Demos/Bootstrap-3.0/media/below_767.css" /> 
    <![endif]-->
    <!--[if lt IE 9]>
      <link rel="stylesheet" href="//aspsnippets.com/Demos/Bootstrap-3.0/css/IE.css?06_05_2014" />
        <![endif]-->
    <script type="text/javascript" src='//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>


当页面加载或使用ASP.Net进行回发时显示加载进度图像

尝试以下内容：

从加载类css中删除下面的行

显示：无

并在JS脚本开头的JS行下方使用，以替代显示：无；在CSS中

（“.loading”）.hide（）

尝试以下内容

从加载类css中删除下面的行

显示：无

并在JS脚本开头的JS行下方使用，以替代显示：无；在CSS中

（“.loading”）.hide（）

我发现了我遇到的问题，显然我有一段代码卡在了代码后面，这段代码来自一个早期的实验，该实验是如何将我引用到location.show（）的。一旦我拿出下面的代码，一切都开始工作了

  ScriptManager.RegisterStartupScript(Me, Page.GetType, "Script", "show();", True)

感谢所有帮助过我的人。

我发现了我遇到的问题，很明显，我的代码中有一段代码，这段代码来自于一个早期的实验，该实验是如何将我引用到位置的。show（）。一旦我拿出下面的代码，一切都开始工作了

  ScriptManager.RegisterStartupScript(Me, Page.GetType, "Script", "show();", True)

感谢所有帮助过我的人。

Xavier，在这个例子中，我没有看到任何地方有人说你需要使用引导。你能详细说明你的答案吗？你是对的。。。他发布的网站使用的是引导，但他共享的示例代码不是。如果你在他的示例项目中搜索bootstrap，那里没有，但是如果你打开网站页面source yes，那里有一些..这就是为什么

.show（）

不起作用，正如OP在文章中所说的那样。它清楚地写着“'Show'是未定义的”Xavier，在这个例子中，我没有看到任何地方有人说您需要使用引导。你能详细说明你的答案吗？你是对的。。。他发布的网站使用的是引导，但他共享的示例代码不是。如果你在他的示例项目中搜索bootstrap，那里没有，但是如果你打开网站页面source yes，那里有一些..这就是为什么

.show（）

不起作用，正如OP在文章中所说的那样。它清楚地读到“'Show'是未定义的”嘿，什么时候呈现div.loading？我猜您应该在提交按钮之后将其添加到DOM中。您是否有要隐藏的样式，并且show（）将其显示给用户，或者动态创建它，如果是这样，则将其隐藏。希望对你有所帮助，我编辑了我的帖子，展示了我的Css标记。加载div位于网格之后，我将在构建后使用我的datatable更新网格。按钮朝向页面顶部。如果已隐藏，请尝试加载.css（“显示”、“块”）。也张贴你看到的控制台错误。praveen，我试过你的建议，似乎有效。请注意，我还更改了服务器端的一些代码，现在似乎所有内容都显示正确！谢谢你的帮助！嘿，什么时候进行div.loading渲染？我猜您应该在提交按钮之后将其添加到DOM中。您是否有要隐藏的样式，并且show（）将其显示给用户，或者动态创建它，如果是这样，则将其隐藏。希望对你有所帮助，我编辑了我的帖子，展示了我的Css标记。加载div位于网格之后，我将在构建后使用我的datatable更新网格。按钮朝向页面顶部。如果已隐藏，请尝试加载.css（“显示”、“块”）。也张贴你看到的控制台错误。praveen，我试过你的建议，似乎有效。请注意，我还更改了服务器端的一些代码，现在似乎所有内容都显示正确！谢谢你的帮助！穆纳迪尔，我试过你建议的改变，但仍然有错误。当我使用#加载而不是.loading时，div现在也不显示。在过去，div将显示几秒钟，然后我将收到错误。嗨，我已经更改了我的答案，因为加载实际上是代码中的一个类。请像我在上面的回答中提到的那样尝试。Munadil，我尝试了你建议的更改，但仍然得到错误。当我使用#加载而不是.loading时，div现在也不显示。在过去，div将显示几秒钟，然后我将收到错误。嗨，我已经更改了我的答案，因为加载实际上是代码中的一个类。请按照我在上述答案中提到的那样尝试。