Verwendung von “gleichzeitigen” Ajax-Events vermeiden

Auf komplexeren “ajaxifzierten” Seiten ist es leicht möglich nur schwer zu identifzierende Probleme zu erzeugen, wenn mehrere Javascript-Events aufgrund einer einzelnen Benutzer-Aktion ausgelöst werden.

Als Beispiel soll folgender Code dienen:

<h:dataTable id="tabelle">
	<h:column>
		<h:inputText id="inputZelle" value="#{controller.text}">
			<f:ajax render="tabelle" event="blur" />
		</h:inputText>
	</h:column>
	<f:facet name="footer">
		<h:inputText id="inputFooter" value="#{controller.neuerText}" />
	</f:facet>
</h:dataTable>

Wenn der User mit seinem Cursor in dem inputText mit der ID “inputZelle” steht (diese also den Focus hat) und mit der Maus in das untere inputText-Element mit der ID “inputFooter” klickt, erwartet er natürlich, dass danach der Cursor im angeklickten inputText “inputFooter” steht und somit dieses Element den Focus hat.

Dies geschieht hier aber nicht, weil das Verlassen des “inputZelle”-Elements (onblur-Event) einen Ajax-Request auslöst, der als Ergebnis die komplette Tabelle neu rendert (render=”tabelle”), d.h. die komplette Tabelle wird aus dem DOM des Browsers gelöscht und stattdessen das Ergebnis des Ajax-Requests neu in den DOM eingefügt. Darin enthalten ist auch das “inputFooter”-Element. Dieses neu eingefügte Element wurde aber gar nicht angeklickt, es ist ja neu und hat demzufolge auch keinen Focus! Der User muss jetzt erneut in das “inputFooter”-Element klicken, damit dieses den Focus erhält.

Das könnte man natürlich umgehen, indem man am Ende des Ajax-Requests nochmal explizit per onevent-Listener den Focus auf das (neue) “inputFooter”-Element setzt, aber besser wäre es, wenn die Anwendung so designed wäre, dass so etwas gar nicht nötig ist, weil man sonst irgendwann sehr viele Abhängigkeiten hat, die man mit immer neuen Besonderheiten berücksichtigen muss.

Schon im Jahr 2009 als JSF 2.0 noch im Entwicklungsstadium war, hat Jim Driscoll (Senior Engineer im JSF-Team) eine Race Condition beschrieben, die durch eine ähnliche Konstellation ausgelöst wird: Mixing Ajax and full requests in JSF 2.0

Leave a Reply

Your email address will not be published. Required fields are marked *

*