[FRAGE] Popup-Fenster beim Laden einblenden und wenn fertig geladen ausblenden?

MM400 · 20. Sep. 2015

Hallo Community,

bezüglich JavaScript bin ich ein absoluter Anfänger und habe mir aus einem JQueryMobile Beispiel ein erscheinendes Popup Fenster zusammen gestellt.
Das Beispiel ist aber so, dass das Popup-Fenster erst bei Betätigen einer Schaltfläche erscheint bzw. verschwindet.

Ich würde es aber so benötigen, dass das Popup-Fenster beim Laden der Seite erscheint und wenn sie fertig geladen ist, dass das Popup-Fenster automatisch wieder verschwindet.

Kann mir vielleicht jemand einen Tipp geben, wie ich den bestehenden HTML/JavaScipt Code umbauen muss, damit ich dieses Verhalten bekomme?

Vielen Dank!
Michael

HTML:

<html>
<head>
<?php
include_once("head_importJQueryMobile.php");
?>

<script type="text/javascript">

$( document ).on( "click", ".show-page-loading-msg", function() {
    var $this = $( this ),
        theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,
        msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,
        textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,
        textonly = !!$this.jqmData( "textonly" );
        html = $this.jqmData( "html" ) || "";
    $.mobile.loading( "show", {
            text: msgText,
            textVisible: textVisible,
            theme: theme,
            textonly: textonly,
            html: html
    });
})
.on( "click", ".hide-page-loading-msg", function() {
    $.mobile.loading( "hide" );
});

</script>

</head>
<body>

<button class="show-page-loading-msg"
        data-theme="b"
        data-textonly="true"
        data-textvisible="true"
        data-msgtext="Custom Loader"
        data-inline="true"
        data-html="<span class="ui-bar ui-shadow ui-overlay-d ui-corner-all"><center><img src="ajax-loader.gif"><h2><br>120 Fragen werden für Sie geladen! <br>Bitte haben Sie ein wenig Geduld.</center></h2></span>" data-iconpos="right">Custom HTML</button>
				
<button class="hide-page-loading-msg" data-inline="true" data-icon="delete">Hide</button>

</body>
</html>

kkapsner · 21. Sep. 2015

Den ersten Block musst du gleich ausführen... d.h. das ganze nicht in ein .on(...) packen, sondern in ein <script> direkt hinter den ersten <button>. Du musst dann aber natürlich mit this erst auf den <button> zeigen.

Damit das dann beim schließen wieder verschwindet, musst du den zweiten Block einfach in einem .load() auswühren.

MM400 · 21. Sep. 2015

Hallo!

Danke für deine Antwort, doch leider bin ich ein JS Anfänger und kann deine Hinweise nicht in Codezeilen gießen.
Hast du vielleicht einen Link für mich, indem drinnen steht, wie man sowas macht?

Danke!
Michael

kkapsner · 22. Sep. 2015

Im Prinzip musst du nur

Code:

$( document ).on( "click", ".show-page-loading-msg",

durch

Code:

$(".show-page-loading-msg").each(

austauschen und

Code:

.on( "click", ".hide-page-loading-msg", function() {

durch

Code:

$(window).on("load", function(){

... und natürlich den <script>-Block hinter deinen <button>.

https://api.jquery.com/each/

PS: Ungetestet.

MM400 · 22. Sep. 2015

Danke!
Ich habe hoffentlich den Code so wie beschrieben umgebaut (siehe unten).
Den einzigen Satz den ich noch nicht verstehe ist:

Du musst dann aber natürlich mit this erst auf den <button> zeigen.

Wie macht man das bzw. eigentlich will ich ja keine Buttons, sondern das Popup soll beim Start des Ladens erscheinen und wenn fertig geladen wurde, wieder verschwinden. Ganz ohne Buttons, die brauch ich gar nicht auf dem Bildschirm sehen.

HTML:

<html>
<head>
<?php
include_once("head.php");
?>

<script type="text/javascript">
$(window).on("load", function(){
    $.mobile.loading( "hide" );
});
</script>

</head>
<body>

<button class="show-page-loading-msg"
        data-theme="b"
        data-textonly="true"
        data-textvisible="true"
        data-msgtext="Custom Loader"
        data-inline="true"
        data-html="<span class="ui-bar ui-shadow ui-overlay-d ui-corner-all"><center><img src="ajax-loader.gif"><h2><br>120 Fragen werden für Sie geladen! <br>Bitte haben Sie ein wenig Geduld.</center></h2></span>" data-iconpos="right">Custom HTML</button>
				
<script type="text/javascript">
$(".show-page-loading-msg").each( function() {
    var $this = $( this ),
        theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,
        msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,
        textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,
        textonly = !!$this.jqmData( "textonly" );
        html = $this.jqmData( "html" ) || "";
    $.mobile.loading( "show", {
            text: msgText,
            textVisible: textVisible,
            theme: theme,
            textonly: textonly,
            html: html
    });
})
</script>

<button class="hide-page-loading-msg" data-inline="true" data-icon="delete">Hide</button>

</body>
</html>

MM400 · 25. Sep. 2015

Hallo,

hat vielleicht jemand eine Lösung für mich?

Vielen Dank!
Michael

kkapsner · 25. Sep. 2015

Dein Code sollte eigentlich funktionieren.

Wenn nicht: steht etwas in der Fehlerkonsole? Kannst du uns lauffähigen Code (z.B. ein jsFiddle, ein Livelink oder HTML-Code komplett ohne PHP oder anderen Abhängigkeiten, wie lokale Dateien) geben?

Den "delete"-Button kannst du jetzt schon komplett entfernen. Der andere hält noch die Informationen für das "Popup". Die müsstest du irgendwo anders speichern und dann auch von dort abrufen.

MM400 · 12. Okt. 2015

kkapsner schrieb:
Der andere hält noch die Informationen für das "Popup". Die müsstest du irgendwo anders speichern und dann auch von dort abrufen.

Wie mache ich das, das "irgendwo anders speichern und abrufen"?

Danke!
Michael

kkapsner · 13. Okt. 2015

Äh... dafür gibt es 1001 Möglichkeiten. Wo willst du die Information denn speichern? Ich würde sie irgendwo im HTML speichern (z.B. in einem versteckten DIV).

MM400 · 13. Okt. 2015

kkapsner schrieb:
Äh... dafür gibt es 1001 Möglichkeiten. Wo willst du die Information denn speichern? Ich würde sie irgendwo im HTML speichern (z.B. in einem versteckten DIV).

Danke, d.h. statt <button> und </button> schreibe ich einfach <div> und </div> und es sollte funktionieren??

kkapsner · 14. Okt. 2015

Kannst du machen. Aber du kannst auch deinen <button> einfach per CSS verstecken... macht keine großen Unterschiede.

MM400 · 14. Okt. 2015

Hallo,

ich habe die Änderungen vorgenommen, trotzdem kommt nicht der gewünschte Effekt.
Im Anhang habe ich die komplette Datei einmal hochgeladen

Anhang anzeigen ladesymbol.txt

Evtl. siehst du den Fehler sofort.

Vielen Dank!
Michael

kkapsner · 14. Okt. 2015

Hm... anscheinend funktioniert dieses $.mobile.loading nicht vor dem DOMReady-Event...

Code:

$(document).ready(function(){
	$(".show-page-loading-msg").each( function() {
		var $this = $( this ),
			theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,
			msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,
			textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,
			textonly = !!$this.jqmData( "textonly" );
			html = $this.jqmData( "html" ) || "";
		$.mobile.loading( "show", {
				text: msgText,
				textVisible: textVisible,
				theme: theme,
				textonly: textonly,
				html: html
		});
	})
});

- so funktioniert's im Test, ABER was meinst du denn genau mit "Laden der Seite". Braucht das Aufbauen des HTMLs so lange oder brauchen andere externe Ressourcen so lange? Im ersten Fall ist das Ganze dann ziemlich witzlos...

MM400 · 14. Okt. 2015

kkapsner schrieb:
ABER was meinst du denn genau mit "Laden der Seite". Braucht das Aufbauen des HTMLs so lange oder brauchen andere externe Ressourcen so lange? Im ersten Fall ist das Ganze dann ziemlich witzlos...

Danke, jetzt funktioniert es prinzipiell, aber unterm Strich dann doch noch nicht. Ich schätze, dass ist genau das, was du angesprochen hast.
Nur kurz zur Erklärung: Ich lade einen Fragenkatalog für meine Studenten, den sie dann ausfüllen und abgeben müssen. Dieser Fragenkatalog hat 120 Fragen. Diese 120 Fragen werden mit einer Schleife in PHP aus einer Datenbank erstellt. Bis diese Seite mit den 120 Fragen wirklich im Browser auftauchen dauert es gestoppte 17 Sekunden. Die Zeitspanne ist zu lange um nur eine weiße Seite zu zeigen, da klicken alle dann wieder nervös auf refresh oder sonst wo hin.

Tatsache ist nun, dass die Seite noch immer 17 Sekunden eine weiße Seite zeigt und dann ganz am Schluss die Nachricht kurz aufblitzt und gleich wieder verschwindet.
Ich nehme an, das ist genau das was du mit "ziemlich witzlos" bezeichnet hast.

Wie muss ich das Ganze umbauen, damit das Popup Fenster gleich kommt und nicht erst zum Schluss?

kkapsner · 15. Okt. 2015

MM400 schrieb:
Diese 120 Fragen werden mit einer Schleife in PHP aus einer Datenbank erstellt. Bis diese Seite mit den 120 Fragen wirklich im Browser auftauchen dauert es gestoppte 17 Sekunden.

120 Fragen sollten eigentlich schneller erscheinen. Ich würde da eher was im Rahmen von einer Sekunde erwarten.

MM400 schrieb:
Ich nehme an, das ist genau das was du mit "ziemlich witzlos" bezeichnet hast.

Genau.

MM400 schrieb:
Wie muss ich das Ganze umbauen, damit das Popup Fenster gleich kommt und nicht erst zum Schluss?

Ich kenne mich jetzt mit den Internas von jQuery.mobile nicht aus, aber so wie es aussieht, ist es einfach nicht für deine Zwecke geeignet. Dinge darzustellen, während das HTML der Seite noch nicht ganz an den Browser ausgeliefert worden ist, ist auch ein etwas schwierigeres Thema, da du auf dem Server zuerst sicherstellen musst, dass das Fragment auch schon rausgesendet wurde (also der Buffer geleert wurde), und dann behandeln die unterschiedlichen Browser solche Fragmente auch unterschiedlich. Wenn du wirklich deine Antwortzeit nicht veringern kannst, was ich stark bezweifle, würde ich die Frage am Anfang gar nicht übermitteln, sondern mit AJAX nachladen. Dann könntest du sie auch in kleineren Portionen übermitteln, so dass der Student gleich die ersten 10 Fragen sieht, während die anderen Fragen Stück für Stück noch geladen werden.

MM400 · 15. Okt. 2015

Das Einzige, was ich jetzt noch nicht verstehe ist, dass wenn ich einfach nur ein normales Fenster ausgebe, dieses sehrwohl gleich kommt.
Folgendes steht bei mir gleich nach dem <body> Tag:

Code:

<script type="text/javascript">
window.alert("120 Fragen werden nach dem OK klick geladen. Dies dauert - je nach Internetverbindung - bis zu 20 Sekunden. Bitte haben Sie etwas Geduld.");
</script>

Das Fenster erscheint gleich und wenn ich auf OK klicke kommt erst der Rest!?

kkapsner schrieb:
sondern mit AJAX nachladen. Dann könntest du sie auch in kleineren Portionen übermitteln, so dass der Student gleich die ersten 10 Fragen sieht, während die anderen Fragen Stück für Stück noch geladen werden.

Hast du hier einen Dokumentationslink für mich, wo ich mir das ansehen kann, wie man sowas baut?

kkapsner · 16. Okt. 2015

Ein alert wird gleich ausgegeben, wenn der Browser das entsprechende HTML-Fragment erhalten und geparst hat. Diese Ausgabe über jquery.mobile ist aber anders implementiert. Da gibt es also eigentlich nicht viel zu verstehen.

MM400 schrieb:
Hast du hier einen Dokumentationslink für mich, wo ich mir das ansehen kann, wie man sowas baut?

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

[FRAGE] Popup-Fenster beim Laden einblenden und wenn fertig geladen ausblenden?

MM400

New member

kkapsner

Super Moderator

MM400

New member

kkapsner

Super Moderator

MM400

New member

MM400

New member

kkapsner

Super Moderator

MM400

New member

kkapsner

Super Moderator

MM400

New member

kkapsner

Super Moderator

MM400

New member

kkapsner

Super Moderator

MM400

New member

kkapsner

Super Moderator

MM400

New member

kkapsner

Super Moderator