# Problem mit Jquery/Ajax/Internet Explorer



## Kopfballstar (15. Januar 2009)

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):


```
$.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!


----------



## Sven Mintel (16. Januar 2009)

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.


----------



## Kopfballstar (16. Januar 2009)

Moin, 
das ist auch mein Verdacht aber ich weiß nicht wie ich die Funktion optimieren könnte:


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


----------



## Sven Mintel (16. Januar 2009)

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?


----------



## Kopfballstar (16. Januar 2009)

Online angucken geht leider nicht, kann höchstens einen zensierten Code hergeben, ich denke aber man kann da die relevanten Informationen auslesen:


```
<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>
```


----------



## Sven Mintel (16. Januar 2009)

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.


----------



## Kopfballstar (16. Januar 2009)

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.


----------



## Sven Mintel (17. Januar 2009)

Kopfballstar hat gesagt.:


> 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.



Nö, das würde ich nicht sagen.
Es dauert natürlich länger, viel Daten an den Srver zu Senden als wenige, aber das würde es ohne AJAX auch.


----------



## Kopfballstar (21. Januar 2009)

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.....


----------



## Sven Mintel (22. Januar 2009)

Ich wüsste jetzt wirklich nicht, woran es liegt.

Das Einfrieren der Animation würde ich nicht unbedingt überbewerten....siehe: http://masterblaster.redflexer.doktormolle.de/2_7.htm


----------



## Kopfballstar (22. Januar 2009)

Hm, naja, was überbewerten....Mir ist das ja egal, ich weiß ja das das Programm im Hintergrund arbeitet. Der kluge User ansich kommt aber nicht damit klar, deshalb muss ich was dagegen tun.
Mein GIF wird ürigens über einen ClickHandler aufgerufen. 
Ein bisschen konnte ich es ja schon lösen. 
Das parsen der Informationen auf der Seite führe ich über ein setTimeout mit 10 ms aus, das reicht aus um das animierte Gif unmittelbar nach Klick anzuzeigen -> ist also ok.
Das senden der Parameter, verarbeiten auf dem Server und zurückschicken benötigt 150 - 200ms. Das gif friert hier zwar ein, aber die Zeitspanne ist aber so kurz das es klargeht. 
Problematisch wird es nun bei den folgenden Schritten:
1. per eval() die Json Daten umwandeln (benötigt einiges an Zeit)
2. die Daten auf der Seite ausgeben.

Zu Punkt 2 habe ich mir überlegt den HTML String zerteilt als Array zu übergeben und dann schrittweise auf der Seite auszugeben. Nachteil ist halt das ich dann eval nutzen muss, und außerdem macht sich diese Vorgehehensweise nicht bemerkbar, der Browser + gif frieren so ein als würde ich alles auf einmal ausgeben.


----------

