2017-06-23 2 views
1

Ich versuche, ein Laden GIF anzuzeigen, während meine Datentabelle auf meinem Server geladen wird. Ich habe einen Code von here gefunden, aber wenn ich es versuche und es implementieren bekomme ich den Laufzeitfehler 'Show' ist undefined. Unten ist mein Javascript/jQuery-Code Ich bin mitJavascript Laufzeitfehler 'Show' ist undefined

<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(); 
}); 

Meine div id geladen wird, so dass, wenn sie die loading.show() in der Javascript begegnet, es Fehler aus.

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

Und ich mein Skript bin Registrierung auf der Seite Load-Ereignis wie:

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

    End If 

EDIT: ich es bin der Bearbeitung als auch die CSS-Markup hinzuzufügen.

<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; 
} 

Jede Hilfe wäre willkommen.

+0

Hey, wann wird das div.loading gerendert? Ich schätze, Sie fügen es dem DOM nach dem Senden-Button hinzu. Haben Sie es Stil zu verbergen, und die Show() es dem Benutzer, oder Sie haben es dynamisch erstellt, wenn dies so versteckt es. Hoffe, es hilft –

+0

Krum, ich bearbeitet meinen Beitrag, zeigt meine Css Markup. Das Ladediv ist nach dem Gitter, das ich mit meiner Datatabelle aktualisieren werde, sobald es gebaut ist. Die Schaltfläche befindet sich oben auf der Seite. – ag93

+1

Versuchen Sie diese loading.css ("display", "block"), wenn sie bereits ausgeblendet ist. Veröffentlichen Sie außerdem den Konsolenfehler, den Sie sehen. – praveen

Antwort

0

Nun, ich habe das Problem herausgefunden, das ich hatte, anscheinend hatte ich ein Stück Code im Code dahinter stecken, der von einem früheren Experiment stammte, das einige wie mich auf die location.show() verweist. Sobald ich den untenstehenden Code herausnahm, fing alles an zu arbeiten.

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

Dank an alle, die geholfen haben.

0

Das Beispiel, auf das Sie verweisen, verwendet Bootstrap. Sie müssen auf die Bootstrap-JavaScript-Bibliothek in Ihrem Code verweisen, um die Methode .show() zu verwenden.

Hier ist der oberste Teil des Quellcodes Beispiels - in die untere Zeile sehen:

<!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> 
+0

Xavier, ich sehe nirgendwo in diesem Beispiel, wo sie sagen, dass Sie Bootstrap verwenden müssen. Können Sie Ihre Antwort näher erläutern? – ag93

+0

Siehe bearbeiten .. Ich klebte in den oberen Teil –

+0

Sie haben Recht ...Die Website, auf der er veröffentlicht, verwendet Bootstrap, aber der Beispielcode, den er freigegeben hat, ist nicht. Wenn Sie in seinem Beispielprojekt nach einem Bootstrap suchen, gibt es dort keins, aber wenn Sie die Website-Seitenquelle öffnen, gibt es da einige. – ag93

0

Probieren Sie folgende,

unterhalb der Linie entfernen von Ihrer Belastungsklasse css

display: none;

Und verwenden Sie unter JS-Zeile am Anfang Ihrer JS-Skript als eine Alternative zur Anzeige: keine; in CSS

(".loading"). verstecken();

+0

Munadil, ich habe versucht, Ihre vorgeschlagene Änderung und ich bekomme immer noch den Fehler. Das div wird jetzt auch nicht angezeigt, wenn ich #loading anstelle von .loading verwende. In der Vergangenheit wird das Div für ein paar Sekunden angezeigt, und dann werde ich den Fehler erhalten. – ag93

+0

Hallo, ich habe meine Antwort geändert, da das Laden eigentlich eine Klasse in Ihrem Code ist. Bitte versuchen Sie es wie in der obigen Antwort erwähnt. –

Verwandte Themen