Jquery Progressbar für XML-Ladescript

Hallo,

habe jetzt einiges übers WE ausprobiert und dachte schon eine Lösung gefunden zu haben,
aber denkste - es will nicht funktionieren :(
Mein Ansatz war folgender (hattest Du auch schon mal so angeschnitten):
Ich habe meine index.html, aus der habe ich nun eine "Multipage" gemacht, die sieht dann so aus.
HTML:
<!DOCTYPE html> 
<html> 
<head> 
	<title>XYZ</title> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
	<link rel="stylesheet" href="css/style.css" />
	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>
        <script src="js/main-min.js"></script>
       <script language="javascript" type="text/javascript">	
	function spin(){
		$("#start").hide();
		$("#spinner").show();
	
	setTimeout(function() {
  		$("#spinner").hide();
  		$("#start").show();
	}, 1000);
}
/*
$(document).on("pagehide", "div[data-role=page]", function(event){
	//$("#start").show();
	//$("#spinner").hide();
  	$(event.target).remove();
});*/
</script>
</head> 
<body> 
<!-- Multipage Part 1 -->
<div data-role="page" id="start">
	<div data-role="header">
		<h5>Head</h5>
	</div><!-- /header -->
	<div date-role="content">
		<a href="test.html" onClick="spin();" data-transition="none">Link</a>
	</div><!-- /content -->
        <div data-role="footer">		
        </div><!-- /footer -->
</div><!-- /page -->

<!-- Multipage Part 2 -->
<div data-role="page" id="spinner">
	<div data-role="header"></div><!-- /header -->
	<div date-role="content">
	<div id="grafik">
        <div class="spinner">
             <img src="img/spinner.gif" width="30px" height="31px" style="border: 0px;" /> Daten werden geladen...
        </div><!-- class-spinner ENDE -->
        </div><!-- grafik ENDE -->
	</div><!-- /content -->
   <div data-role="footer"></div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Das "setTimeout" habe ich gesetzt, da man ja sonst nur das "Daten werden geladen" sieht, wenn man im Browser zurück geht.
Das Ganze funktioniert aber irgendwie nur beim ersten Mal, beim zweiten Mal wird dann "fast sofort" die test.html angezeigt
ohne inhalte, wenn dann alle Inhalte da sind, wird die Seite befüllt...
Das Script im Header (hier auskommentiert) sollte eigentlich bewirken, dass er immer die Seite neu lädt, also nix cacht,
funktioniert aber irgendwie auch nicht.
Habt Ihr vielleicht noch einen Tipp für mich?

Lieben Gruß, Blaubär
 
1) Was ist bei dir eine "Multipage"?

2) Was ist mit meiner Frage/meinen Fragen aus Beitrag 8?

3) Nochmal die Frage: Kannst du die "Originaldateien" zur Verfügung stellen? Irgendwie ist mir der Ablauf von dir noch immer nicht so ganz klar. Welche Seite wird wann geladen, was wird angeklickt, was passiert dann und wohin wird die XML-Datei geladen?


NACHTRAG: und hier nochmal ein Beispiel. Was hier passiert, steht im Beispiel selber.


CSS:
<style type="text/css">
.hide {
    display: none;
}
</style>
Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("a").click(function(e) {
	$("#xml").addClass("hide");
    $("#laden").removeClass("hide");
    page = $(this).attr("href");
    $("#xml").load(page);
    var t = setTimeout(function(){
        $("#laden").addClass("hide");
        $("#xml").removeClass("hide");
    }, 2000);
    e.preventDefault();
});

});
</script>
HTML:
<p>Das ist die "test.html" in welche dann die XML-Datei geladen wird.</p>
<p>Als Ersatz für die XML-Datei wird hier einfach eine beliebige HTML-Datei genommen und die Ladezeit mit setTimeout "verlängert".
<br />
Der DIV-Container mit der id="xml" dient als Container für die XML-bzw. HTML-Datei.</p>
<br/>
<a href="datei1.html">Datei 1 laden</a>
<br />
<a href="datei2.html">Datei 2 laden</a>
<div id="laden" class="hide">Datei wird geladen...</div>
<div id="xml" class="hide"></div>
 
Zuletzt bearbeitet:
Hallo tombe,

zu 1)
Ich dachte eine "Multipage" wäre eine Seite, in der man mehrere Daten (page, header, content, footer x n) hält und diese über die id's
differenziert (bei mir): <div data-role="page" id="start">+<div data-role="page" id="spinner"> Und halt nicht mehrere Html-Seiten verwendet...?

zu 2)
So im Groben soll es funktionieren...

Ich hoffe der Rest klärt sich an hand folgender Infos:
Dies ist also nochmal die test.html:
HTML:
<!DOCTYPE html> 
<html>
<head> 
	<title>Titel</title> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
	<link rel="stylesheet" href="css/style.css" />
	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>
    <script src="js/main-script.js"></script>
</head> 
<body>
<div data-role="page" data-theme="c" id="start">
	<div data-role="header">
		<h1>Head</h1>
	</div><!-- /header -->
	<div data-role="content">	
  	<script language="javascript" type="text/javascript">
$(document).ready(function() {
    ladeXML('xml/test.xml');
});
</script>
    <div id="mCon">
        <ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Suchen..."></ul>
    </div>
	</div><!-- /content -->
		<div data-role="footer"></div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Hier nun ein Auszug aus der XML-Datei:
HTML:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<media>
	<eintrag>
		<kopf>Bla</kopf>
		<zeitstart>01.10.</zeitstart>
		<zeitende>04.10.</zeitende>
		<masse>301</masse>
		<bezeichner>bez1</bezeichner>
	</eintrag>
	<eintrag>
		<kopf>Blub</kopf>
		<zeitstart>keine</zeitstart>
		<zeitende></zeitende>
		<masse>keins</masse>
		<bezeichner>bez2</bezeichner>
	</eintrag>
	<eintrag>
		<kopf>Bla2</kopf>
		<zeitstart>05.09.</zeitstart>
		<zeitende>01.03.</zeitende>
		<masse>27</masse>
		<bezeichner>bez1</bezeichner>
	</eintrag>
	<eintrag>
		<kopf>Blub2</kopf>
		<zeitstart>immer</zeitstart>
		<zeitende></zeitende>
		<masse>02</masse>
		<bezeichner>bez2</bezeichner>
	</eintrag>
und viele mehr
.
.
.
.
</media>
Die Einträge der XML werden noch auf bestimmte Sachen geprüft und ein paar Datumsgeschichten berechnet, wie hier angesprochen:
Link
Ich hoffe das hilft vielleicht etwas weiter...?!
Das komische ist ja, dass er manchmal so lange die index anzeigt bis alle Daten für die test-seite da sind, und dann erst die test-seite komplett anzeigt - und manchmal sofort die "leere" test-seite anzeigt (nur mit Header und Suchleiste) und nach Fertigstellung den Container mit den Daten aus der Xml anfügt...

LG, Blaubär
 
Ich habe versucht es mit den obigen Daten nachzubauen, aber das klappt bei mir leider nicht weil mir die JS-Funktion immer Fehler ausgibt.

Somit leider wieder nur eine Vermutung:

Die Seite "test.html" wird per Link aufgerufen und lädt dann direkt die entsprechende XML-Datei. Hier müsste der "XML-Bereich" gleich auf unsichtbar gesetzt und die Ladegrafik sichtbar sein.

Die ready-Funktion wird dann aufgerufen wenn die Seite inklusive der XML-Datei komplett geladen wurde.

Folglich muss hier dann die Ladegrafik aus - und der "XML-Beriech" eingeblendet werden.

Um den "XML-Bereich" auszublenden, würde ich alles was innerhalb des body-Tags steht nochmals in einen DIV-Container packen der dann zuerst nich sichtbar ist.

Javascript:
$(document).ready(function() {
    $("#laden").css("display", "none");
    $("#xml").css("display", "block");
});
HTML:
<body>
<div id="laden" style="display: block;">LADEGRAFIK</div>
<div id="xml" style="display: none;">
    <!-- Hier kommt alles rein was aus der XML-Datei kommt -->
</div>
</body>
 
Hallo tombe,

erst mal vielen Dank für Deine Hilfe und Mühe!
Ich muss aber leider eingestehen, ich kriege es nicht ans Laufen!?
Hier ist mal mein gesamtes Script, welches so funktionieren sollte:
PHP:
function ladeXML(pfad){

         var mc = $('#mCon');
             mcUl = $('#mCon ul');
 
        // ganze XML-datei einlesen und in variable 'XMLmediaArray' speichern
        $.get(pfad, function(XMLmediaArray){

            if (mcUl.length === 0) { // wenn Container leer ist
			
                ul = $("<ul data-role='listview'>"); 
                mc.append(ul);
            }
            //-------------------------------------------------
            $(XMLmediaArray).find("eintrag").each(function(){ 
 
                var $myMedia = $(this); 
                var kopf = $myMedia.find("kopf").text();
				var bezeichner = $myMedia.find("bezeichner").text();
                var zeitstart = $myMedia.find("zeitstart").text();
				var zeitende = $myMedia.find("zeitende").text();
                var masse = $myMedia.find("masse").text();
			//-------------------------------------------------
			if (masse != "keins"){ // wenn masse nicht gleich "keins" ist 
					var masse = masse + " dm"; 
			}else {
					masse; 
				}
			//-------------------------------------------------
			if (zeitstart == "keine"){ 
					var trenner = ''; 
			}else if(zeitstart == "immer"){
					var trenner = ''; 
			}else {
					var trenner = ' bis '; // zeit-Trenner, bei zeit "bis" einfügen			
				}
				//-------------------------------------------------
				var startMonat = zeitstart.substring(3, 5);
				var startTag = zeitstart.substring(0, 2);
				//-------------------------------------------------
				var endeMonat = zeitende.substring(3, 5);
				var endeTag = zeitende.substring(0, 2);
				//-------------------------------------------------
				// Tag und Monat umwandeln (Base10)
				var startMonatRes = parseInt(startMonat, 10);
				var startTagRes = parseInt(startTag, 10);
				var endeMonatRes = parseInt(endeMonat, 10);
				var endeTagRes = parseInt(endeTag, 10);
				//-------------------------------------------------
				var sY = new Date();
				var thisYearS = sY.getFullYear(); // aktuelles Jahr zeitStart
		//-------------------------------------------------
			if (startMonatRes>endeMonatRes){ // prüfe ob "Jahresüberhang" vorhanden
				var eY = new Date();
				var thisYearE = eY.getFullYear()+1; // bei "Jahresüberhang" + 1 Jahr bei zeitEnde
			} else {
				var eY = new Date();
				var thisYearE = eY.getFullYear(); // ansonsten das aktuelle Jahr verwenden
				}
				//-------------------------------------------------
				var milliStart = thisYearS+'/'+startMonatRes+'/'+startTagRes; 
				var ms = new Date(milliStart); // zusammengesetzes Datum zur Umrechnung vorbereiten
				var mS = ms.getTime(); // Millisekunden berechnen
				//----------------------
				var milliEnde = thisYearE+'/'+endeMonatRes+'/'+endeTagRes; 
				var me = new Date(milliEnde); 
				var mE = me.getTime()+86400000; 
				//----------------------
				var jetzt = new Date(); 
				var jetztMilli = jetzt.getTime(); 
		//-------------------------------------------------
			if (jetztMilli>mS && jetztMilli<mE){ 

				var offeneTage = (Math.round(Math.abs(mE-jetztMilli) / (1000 * 60 * 60 * 24 )))+1; 
				// prüfe Einzahl + Mehrzahl Tage
			if (offeneTage>=2){
				var tag_tage = ' Tage';
				var filler = '';
			}
			if (offeneTage==1){
				var tag_tage = ' Tag';
				var filler = '';
				}
			if (offeneTage>30 && offeneTage<=60){
				var offeneTage = (Math.round(Math.abs(mE-jetztMilli) / (1000 * 60 * 60 * 24 )/30));
				var tag_tage = ' Monat';
				var filler = 'über ';
			} 
			if (offeneTage>60){
				var offeneTage = (Math.round(Math.abs(mE-jetztMilli) / (1000 * 60 * 60 * 24 )/30));
				var tag_tage = ' Monate';
				var filler = 'über ';
				}
	
				var einWInfo = '<span style="font-style:italic;font-weight:normal;font-size:small;"> noch '+filler+offeneTage+tag_tage+' warten</span>';
				var bgeinW = ' style="background:#00ffff;"'; // Hintergrund ändern
				var einW = '<span style="color:#ff1414;float:right;position:relative;font-size:60px;">X</span>'; // in der zeit
			} else if(zeitstart == "immer") {
				var einWInfo = '';
				var bgeinW = ' style="background:#ff00ff;"'; // Hintergrund ändern
				var einW = '<span style="color:#00ff00;float:right;position:relative;font-size:60px;">x</span>'; 
			} else {
				var bgeinW = '';
				var einWInfo = '';
				var einW = '<span style="color:#008e11;float:right;position:relative;font-size:40px;">+</span>' // frei
				var einW = '' // frei
				}
				//-------------------------------------------------
				// starte zusammensetzen der Einzelteile zum formatieren
				var output = '<li';
				output += bgeinW;
				output += '>';
        		output += kopf; 
				output += einWInfo;
				output += einW; 
				output += '</br>';
				output += '<span style="font-style:italic;font-weight:normal;font-size:small;"> (';
				output += bezeichner;	
				output += ')</span><br />';
				output += '<span style="font-weight:normal;font-size:small;"> Maß: <b>';	
				output += masse; 
				output += '</b></span><br />';
				output += '<span style="padding-top:5px;font-weight:normal;font-size:small;"> Zeit: <b>';
				output += zeitstart + ''; 
				output += trenner; // bis
				output += '' + zeitende;
				output += '</b></span>';
				output += '</li>';
				//-------------------------------------------------
                // daten von jeden treffer ausgeben
					mcUl.append(output); // append = inhalt/string dem kontainer anhängen
 					mcUl.listview('refresh'); // Listview refreshen
					
            });
         });
}
Jenachdem wo ich die Code-Schnipsel von Dir hinpacke (body, head, Content-Block) passieren immer unterschiedliche Sachen,
aber nie läuft es wie erwartet.
Darf man eigentlich mehr als 1 Mal "$(document).ready(function()" in einer Seite verwenden?
Wenn ich z.B. ein setTimeout einfüge, dann klappt es erst nachdem ich die Seite refreshe?
Viele Grüße
Blaubär
 
Zuletzt bearbeitet:
Also die XML-Funktion löst noch immer einen Fehler aus: mcUl.listview is not a function.

Aber davon mal abgesehen, wenn ich meine Änderungen in die "test.html" einbaue und den Seitenaufbau dann im Debugger durchlaufe, klappt es so:

HTML:
<!DOCTYPE html>
<html>
<head>
	<title>Titel</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
	<link rel="stylesheet" href="css/style.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="main-script.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
//    ladeXML('test.xml');
//    $("#laden").css("display", "none");
//    $("#xml").css("display", "block");
    ladeXML('test.xml');
    var wait = setTimeout(function() {
    	$("#laden").css("display", "none");
    	$("#xml").css("display", "block");
    }, 2000);
});
</script>
</head>
<body>
<div id="laden" style="display: block;">Datei wird geladen...</div>
<div id="xml" style="display: none;">
	<div data-role="page" data-theme="c" id="start">
		<div data-role="header">
			<h1>Head</h1>
		</div><!-- /header -->
		<div data-role="content">
    	<div id="mCon">
	        <ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Suchen..."></ul>
	    </div>
		</div><!-- /content -->
			<div data-role="footer"></div><!-- /footer -->
	</div><!-- /page -->
</div>
</body>
</html>

Neu dazugekommen sind die DIV-Container mit der ID "laden" und "xml".

ACHTUNG: Ich habe den Pfad zur XML-Datei geändert und jQuery anders eingebunden damit es bei mir läuft. Du musst nur die Container einbinden und dann noch die zwei Zeilen in der ready-Funktion aufnehmen die jetzt auskommentiert sind. Der Code der jetzt dort ausgeführt wird, enthält wieder die Verzögerung damit es zu erkennen ist.

Die Meldung "Datei wird geladen..." wird bei mir zwar angezeigt, aber zu sehen ist es nur wenn man den Code zeilenweise ausführt. Andernfalls ist alles so schnell abgearbeitet das man es nicht bemerkt!

Zu deiner Frage ob man die ready-Funktion mehrmals ins Dokument aufnehmen kann, kann ich nichts genaues sagen. Machen kann man es bestimmt, richtig ist es aber nicht.
 
Uhää, es ist zum Mäuse melken!
Wenn ich das genau so einbaue wie Du vorgegeben hast, dann zeigt er mir, nachdem ich den Link der index geklickt habe sofort die test-Seite mit Header+Suchleiste. Wenn ich nun aktualisiere, scheint es zu funktionieren - also Ladebild erscheint, danach kommt der Content. Es ist irgendwie strange! Was kann das sein?
Warum das Script nun bei Dir nicht läuft verstehe ich auch nicht, das läuft bei mir genau so.
Irgendwie scheint auch ein Unterschied in der Tatsache zu liegen, ob ich das ready im body laufen lasse, oder halt im header...

Gruß, Blaubär
 
Also ich habe jetzt eine Möglichkeit gefunden, wie es funktioniert.
Den Link in der index musste ich noch um ein "data-ajax=false" erweitern
HTML:
<a href="test.html" data-ajax="false" data-transition="none">Link</a>
Und im Header war noch folgendes nötig:
PHP:
$(document).on("pagehide", "div[data-role=page]", function(event){
  	$(event.target).remove();
});
Aber gefallen tut mir die Lösung irgendwie nicht, gibt es vielleicht noch eine weitere Möglichkeit das schöner umzusetzen?

Gruß Blaubär
 
Zurück