Problem mit Jquery/Ajax/Internet Explorer

K

Kopfballstar

Erfahrenes Mitglied
Hallo,

ich habe momentan ein Problem bei einem Programm. Ich schildere erstmal kurz den Sachverhalt, den Code, dann das Problem.

Es geht um folgendes:
Aus einer Menge von Ebenen (z.b. 200 Ebenen) wird vom User eine beliebige Anzahl ausgewählt, dann per AJAX an den Sever zum verarbeiten gesendet. Das aktualisierte Ergebnis wird dann auf der Seite angezeigt

Folgender Code wird verwendet (mit anderem Wording):

Code: 
$.ajax({	type:"POST",
		url:{/literal} "die url",
		data:alleDatenDesFormularsSammelnUndAlsStringÜbergeben(),
		beforeSend: function(){$("#ladeGrafik").css("visibility", "visible");},
		success:function(){$("#all").empty();$("#all").html(Ergebnis)},
		complete:function(){$("#ladeGrafik").css("visibility", "hidden");}
	});

Im Firefox funktioniert das alles wunderbar. Sobald man auf abschicken klickt erscheint die Ladegrafik, welche auch erst wieder verschwindet wenn das Ergebnis auf der Seite dargestellt ist.

Im Internet Explorer 6 funktioniert das leider überhaupt nicht so elegant.
Der Abluf ist in etwa so:
1. Klick auf abschicken => IE scheint kurz "einzufrieren" 1-5 sec. je nach Datenmenge
2. Dann erscheint erst die Ladegrafik
3. Ladegrafik "friert" ein, also das Animated Gif bleibt stehen, 1-5 sec.
4. Ergebnis wird auf der Seite dargestellt.

Das ist für den User natürlich extrem unkomfortabel.

Leider stehe ich total auf dem Schlauch. Ich weiß nicht ob es ein generelles IE Problem ist oder ob ich irgendwo Mist programmiert habe.

Bin für jede Hilfe dankbar!
 
Moin,

das "Einfrieren" dürfte mit AJAX eigentlich nicht passieren, da es ja asynchron abläuft.

Da ist aber etwas, was nicht asynchron läuft, was ich als erstes verdächtigen würde: alleDatenDesFormularsSammelnUndAlsStringÜbergeben()

Zeig doch mal, was das macht.
 
Moin,
das ist auch mein Verdacht aber ich weiß nicht wie ich die Funktion optimieren könnte:

Code: 
function getFormData(){
  var queryString = '';
  $.each($('#sortArticle').get(0).elements, function(k, ele) {
    if(ele.type == "checkbox"){
	queryString += ele.name+"="+ele.checked+"&";
    }else{
	queryString += ele.name+"="+ele.value+"&";
    }
  });
  return queryString;
}
 
Ist das irgendwo online, damit man mal schauen kann, wie umfangreich die Daten sind, welche da gesammelt werden müssen, und um evtl. andere Ursachen ermitteln zu können?
 
Online angucken geht leider nicht, kann höchstens einen zensierten Code hergeben, ich denke aber man kann da die relevanten Informationen auslesen:

Code: 
<form name="sortArticle" id="sortArticle">
	<table>
		<tr>
			<td>
				<input type = "hidden"  	id = "1">
				<input type = "hidden"  	id = "2">
				<input type = "hidden"  	id = "3">
				<input type = "hidden"  	id = "4">
				<input type = "hidden"  	id = "5">
				<input type = "hidden"		id = "6">
				<input type = "hidden"		id = "7">
				<input type = "hidden"		id = "8">

				<div id="replace">

					{section name=pos loop=$DATEN} // Können auch mal 200 Durchläufe werden

						{if}
							<div id="start_pos"></div>
						{else}
							<div id="fill_pos"></div>
						{/if}

						<div id='div_COUNTER'>

							<input type="hidden" id='9'>
							<input type="hidden" id='10'>
							<input type="hidden" id='11'>
							<input type="hidden" id='12'>
							<input type="hidden" id='13'>
							<input type="hidden" id='14'>
							<input type="hidden" id='15'>
							<input type="hidden" id='16'>
							<input type="hidden" id='17'>

							<input type="hidden" id='18'>
							<input type="hidden" id='19'>
							<input type="hidden" id='20'>

							<!-- #### Tabelle stellt den Artikel dar #### -->
							<table>
								<tr>
									<td>
										<img src='xyz'>
									</td>
									<td>
										bla blub
									</td>
								</tr>
								<tr>
									<td>
									
										<input type="hidden" id="21">
										<input type="hidden" id="22">
										
									</td>
									<td>

										<img src="">
										<input type="hidden" id="23">

									</td>
									<td>

										<input type='checkbox' id='24'>
										<a href="#" ">blubber</a>
									
									</td>
								</tr>
							</table>
						</div>
					{/section}

					<!-- #### Eine Positionsebene erstellen #### -->
					<div id="end_sort">&nbsp;</div>
					
				</div>
				
			</td>
		</tr>
	</table>
</form>
 
Da kann schon ordentlich was zusammenkommen, würde ich mal sagen :)

Du hast ja geschrieben, dass der User selbst auswählt, was dort übermittelt werden soll, das wäre ein guter Ansatz, meine ich.

Anstatt das Ganze erst vor dem Senden einzusammeln, könntest du die Daten bereits dann, wenn der User etwas ausgewählt hat, zusammenstellen....das sollte dir diese Schleife ersparen.
 
Es ist nicht ganz so wie du denkst, da habe ich mich am Anfang falsch ausgedrückt.
Aber egal, der grundsätzliche Gedanke ist umsetzbar, ich muss nur einiges dafür umprogrammieren. Falls du also noch eine andere Idee hast :) .....
Bist du der meinung das mein zu übergebener Datensatz generell zu groß ist und ein 'einfrieren' unvermeidlich? Das würde ja bedeuten das Ajax nur bei kleinen Datenmengen Sinn macht.
 
Die einzige Möglichkeit die sich bisher aufgetan hat war die statischen, benötigten Informationen pro Datensatz schon im vorraus zu einem String zu sammenzufassen. Das hat auch etwas Performance gebracht. Mehr aber leider auch nicht. Wenn die Daten gesendet werden friert die Loader Grafik ein, und während die neuen Daten auf der Site aktualisiert werden friert die Loader Grafik ein.
Es muss doch irgendeine Möglichkeit geben.....
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück