Ajax Script "pimpen"?

Kopfballstar

Erfahrenes Mitglied
Hallo,

vielleicht kann mir jemand weiterhelfen. Ich habe auf eine Seite eine Ajax Funktionalität eingebaut.
Man bekommt (im schlechten Fall, und hier wird es langsam) z.B. 200 Datensätze angezeigt und kann diese dann markieren und an eine neue Position verschieben, also sortieren.
Die Daten werden per AJAX an PHP gesendet, ausgwertet, zurückgegeben und dann werden die Datensätze auf der Seite aktualisiert.

Und bei der Aktualisierung liegt das Problem. Wenn man zum ersten Mal sortiert rödelt das Script sehr lange, zu lange. Bei allen weiteren Sortierungen ist es dann sehr fix.

Ich habe das Script mal angehangen, vielleicht sieht ja jemand Optimierungsmöglichkeiten.

Das wäre super toll!


PHP:
function interpretAjax(result){

	var count = result.length;
	var color = "#E3F7FD";
	var transparent = "transparent";

	for(var i=0; i < count; i++){


		/**
		 * Wenn es ein verschobener Artikel ist, background-color setzen
		 */
			document.getElementById("div_"+i).style.backgroundColor = result[i].move == 'true' ? color : transparent;


		/**
		 * Positionsebeneninhalt
		 */
			document.getElementById("fill_"+i).title = result[i].item;

		/**
		 * Values der Input Felder aktualisieren
		 */
			document.getElementById("newSort_"+i+"_company_id").value=result[i].company_id;
			document.getElementById("newSort_"+i+"_shoptype").value=result[i].shoptype;
			document.getElementById("newSort_"+i+"_item").value=result[i].item;
			document.getElementById("newSort_"+i+"_ag_segment").value=result[i].ag_segment;
			document.getElementById("newSort_"+i+"_style").value=result[i].style;
			document.getElementById("newSort_"+i+"_sort").value=result[i].sort;
			document.getElementById("newSort_"+i+"_status").value=result[i].status;
			document.getElementById("newSort_"+i+"_manufacturer_description").value=result[i].manufacturer_description;
			document.getElementById("newSort_"+i+"_description").value=result[i].description;
			document.getElementById("newSort_"+i+"_brand").value=result[i].brand;
			document.getElementById("newSort_"+i+"_file").value=result[i].file;
			document.getElementById("newSort_"+i+"_validArticle").value=result[i].validArticle;
			document.getElementById("newSort_"+i+"_img").value=result[i].img;
			document.getElementById("newSort_"+i).value=i;
			document.getElementById("div_"+i+"_move").value=result[i].move;
			document.getElementById("newSort_"+i+"_old_sort").value=result[i].old_sort;


		/**
		 * Anzeige des Artikels aktualisieren
		 */
			document.getElementById("img_"+i).src=result[i].img;
			document.getElementById("text_"+i).innerHTML=result[i].sort+" | "+result[i].item+" | "+result[i].brand+" | "+result[i].manufacturer_description;

		/**
		 * Befindet sich der Artikel im Sortiment
		 */
			if(result[i].validArticle == 'yes'){
				document.getElementById("imgValid_"+i).src=result[i].validArticleImg;
				document.getElementById("newSort_"+i+"_validArticleImg").value=result[i].validArticleImg;
			}else{
				document.getElementById("imgValid_"+i).src=result[i].notValidArticleImg;
				document.getElementById("newSort_"+i+"_notValidArticleImg").value=result[i].notValidArticleImg;
			}

		/**
		 * Ist Artikel als 'entfernen markiert'
		 */
			document.getElementById("newSort_"+i+"_remove_article").checked = result[i].remove_article == 'true' ? true : false;

	}
	document.getElementById("fill_0").title = 'start';


}
 
Moin,

die Funktion, die du dort gepostet hast, aktualisiert ja die Anzeige, nachdem serverseitig umsortiert wurde(nehme ich zumindest an :)). Wie erfolgt denn vorher die Sortierung clientseitig?
 
Hallo,

ein Array wird gesplittet in ['sort'] = true bzw. = false
Dann wird das sortTrue Array an der entsprechenden Stelle eingegliedert.
Das funktioniert quf jeden Fall ziemlich fix.
Habe die Aktualisierungsfunktion auch schon bruchstückweise durchgeführt - da konnte ich sehen das das Geschwindigkeitsproblem dort liegt. Und zwar ab hier wirds langsam:
/**
* Values der Input Felder aktualisieren
*/
...........

Grüße
 
Mmmh...ist alles ein wenig abstrakt :)

Sehe ich das richtig, du willst nur die Anzeige neu sortieren, die Inhalte bleiben gleich?
Falls ja, würde ich die ganzen einzelnen Datensätze jeweils in einen Container verpacken(kann ein <div> sein, aber bspw. auch ein <tr>, falls du in einer Tabelle anzeigst).
Anstatt dann alle einzelnen Elemente zu Durchlaufen, nimmst du diese Container komplett und sortierst sie....der Inhalt wird dann ja automatisch mitsortiert.

Das würde pro Schleifendurchlauf ca. 20 Anweisungen sparen, das sollte die Performance deutlich steigern, ob es so machbar ist, kann ich aus der Ferne jedoch nicht sagen :-(

Vielleicht könntest du ja auch schlicht eine sortierbare Liste nutzen, das würde die Neusortierung der Anzeige nach dem Request gänlich überflüssig machen, weil ja schon vorher sortiert wurde.
 
Mmmh...ist alles ein wenig abstrakt :)

Sehe ich das richtig, du willst nur die Anzeige neu sortieren, die Inhalte bleiben gleich?
Falls ja, würde ich die ganzen einzelnen Datensätze jeweils in einen Container verpacken(kann ein <div> sein, aber bspw. auch ein <tr>, falls du in einer Tabelle anzeigst).
Anstatt dann alle einzelnen Elemente zu Durchlaufen, nimmst du diese Container komplett und sortierst sie....der Inhalt wird dann ja automatisch mitsortiert.

Das würde pro Schleifendurchlauf ca. 20 Anweisungen sparen, das sollte die Performance deutlich steigern, ob es so machbar ist, kann ich aus der Ferne jedoch nicht sagen :-(

Vielleicht könntest du ja auch schlicht eine sortierbare Liste nutzen, das würde die Neusortierung der Anzeige nach dem Request gänlich überflüssig machen, weil ja schon vorher sortiert wurde.

Hallo,

Scriptacolous kommt aus verschiedenen Gründen leider nicht in Frage.
Ich versuche nochmal zu erklären was ich genau mache. Leider ist es ein Intranet Programm und ich kann es nicht vorzeigen.
Also, ich habe eine Menge von Artikeln welche in einer Tabelle untereinander angezeigt werden. Der Benutzer kann nun mehrere beliebige Artikel markieren und an eine neue Position "verschieben".
Diese Position wird per Mausklick ausgewählt und befindet sich immer zwischen den Tabellenzeilen.
Nach dem Mausklick werden die Daten mittels AJAX an den Server gesendet. Der besitzt nun zwei Array. "Artikel die ihre Position behalten" + "Artikel die an ausgewählte Position verschoben werden sollen". Anhand dieser Info wird die neue Reihenfolge der Artikel erstellt.
Das ganze wird dann an den Client zurückgesendet, und, mittels der Funktion die ich gepostet habe, werden nun die Tabellenzelleninhalte ausgetauscht.

Ist es so irgendwie verständlich beschrieben?
Du sagst ich solle die kompletten Container sortieren. Da ich ja <tr> benutze wäre es möglich und würde auch Sinn machen (könnte ich mir vorstellen). Wie sollte ich das aber am besten anstellen?

Grüße
 
Kommen denn generell keine fremden JS-Frameworks in Frage?

Nein, "eigentlich" nicht. Das Problem ist, und da hatte ich schonmal einen Thread eröffnet an dem du dich auch beteiligt hast, das bisher jedes Jquery Script Speicherlecks erzeugt hat. Das ist erstmal ansich nicht so ein Problem, da unsere Programme aber meistens über einen längeren Zeitraum benutzt werden und viele Artikel verarbeiten müssen, wachsen die Lecks immer drastisch an bis zur Fehlermeldung das der Speicher voll ist.

Generell, wenn sich ein Script findet das sortiert - aber auch gleichzeitig die Möglichkeit bietet mehrere Artikel zu markieren und zu sortieren - und kein Speicherleck erzeugt - gerne.
Allerdings muss es auf Jquery basieren, weil wir dieses Framework hier benutzen. Hatte mal neben Jquery ein anderes Framework eingebunden (welches weiß ich nicht mehr) und beide zusammen haben nicht funktioniert.
 
Nein, "eigentlich" nicht. Das Problem ist,..., das bisher jedes Jquery Script Speicherlecks erzeugt hat.
Allerdings muss es auf Jquery basieren, weil wir dieses Framework hier benutzen.

Verstehen muss man das nicht...

http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
Das funktioniert bei mir recht gut in ebenfalls einer riesigen Site. Grade das Sortieren innerhalb multibler TBodys find ich toll :>

Speicherlecks kann man fixen und ich denke das das eher keine Sache des Frameworks an sich ist. Ansonsten eben doch den einen oder anderen Seitenreload machen dann frischt sich die Last auch wieder auf.
 
Zurück