【问题标题】:Javascript runtime error 'Show' is undefinedJavascript 运行时错误“显示”未定义
【发布时间】:2017-11-27 11:42:00
【问题描述】:

我正在尝试在我的服务器上加载我的数据表时显示加载 gif。 我从here 找到了一些代码,但是当我尝试实现它时,我得到运行时错误“显示”未定义。下面是我正在使用的 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();
});

我的 div id 正在加载,所以当它在 javascript 中遇到 loading.show() 时,它会出错。

<div class="loading" align="center">
    Loading. Please wait.<br />
         <br />
         <img src="gears.gif" alt="" />
        </div>

我正在页面加载事件中注册我的脚本,例如:

 If IsPostBack = False Then
        Dim script As String = "$(document).ready(function () { $('[id*=Button2]').click(); });"
        ClientScript.RegisterStartupScript(Me.GetType, "load", script, True)

    End If

编辑: 我正在编辑它以添加 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;
}

任何帮助将不胜感激。

【问题讨论】:

  • 你好,div.loading 是什么时候渲染的?我猜你在提交按钮之后将它添加到 DOM 中。您是否将其样式隐藏起来,并将其显示()给用户,或者您动态创建它,如果这样使其隐藏。希望对你有帮助
  • Krum,我编辑了我的帖子,显示了我的 Css 标记。加载 div 位于网格之后,一旦构建,我将使用我的数据表进行更新。该按钮位于页面顶部。
  • 试试这个 loading.css( "display", "block" ) 如果它已经被隐藏了。同时发布您看到的控制台错误。
  • praveen,我试过你的建议,它似乎有效。请注意,我还在服务器端更改了一些代码,现在一切似乎都正确显示了!感谢所有的帮助!

标签: javascript jquery asp.net vb.net


【解决方案1】:

您引用的示例是使用 Bootstrap。您需要在代码中引用引导 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>

【讨论】:

  • Xavier,我在该示例中没有看到他们说您需要使用 Bootstrap 的任何地方。你能详细说明你的答案吗?
  • 你是对的......他发布的网站使用的是引导程序,但他分享的示例代码不是。如果您在他的示例项目中搜索引导程序,则那里没有,但是如果您打开网站页面源代码,是的,那里有一些..
  • 这就是 .show() 不起作用的原因,正如 OP 在帖子中所说的那样。它清楚地写着“'Show' is undefined”
【解决方案2】:

好吧,我发现了我遇到的问题,显然我有一段代码卡在后面的代码中,这是来自早期实验的一些如何引用我到 location.show() 的方法。 一旦我拿出下面的代码,一切都开始工作了。

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

感谢所有提供帮助的人。

【讨论】:

    【解决方案3】:

    尝试以下方法:

    从加载类 css 中删除以下行

    display:none;
    

    在你的 JS 脚本开头使用下面的 JS 行作为 CSS 中 display:none; 的替代品

    (".loading").hide();
    

    【讨论】:

    • Munadil,我尝试了您建议的更改,但仍然出现错误。当我使用#loading 而不是.loading 时,div 现在也没有显示。过去 div 会显示几秒钟,然后我会收到错误消息。
    • 嗨,我已经改变了我的答案,因为加载实际上是你代码中的一个类。请按照我在上面的答案中提到的尝试。
    猜你喜欢
    • 2016-06-15
    • 2013-07-12
    • 2013-12-14
    • 1970-01-01
    • 1970-01-01
    • 2014-10-02
    • 2013-04-03
    • 2015-07-06
    • 1970-01-01
    相关资源
    最近更新 更多