jQuery Mobile – das kleine grosse Problem mit den Forms

5. Dezember 2013 - JavaScript

John Resigs jQuery hat mir schon immer gefallen. Es geht sehr elegant mit Javascript um und löst dabei fast unbemerkt Inkompatibilitäten der verschieden Browser.
Mit jQuery UI hat man schnell eine harmonische Webseite zusammengebaut, ohne viel mit CSS zu tun zu haben – was mit sehr entgegenkommt.

Die Kombination jQuery und jQuery UI (= JQuery Mobile) erschien mir daher die erste Wahl, wenn man die neuen Herausforderungen der inkompatiblen Betriebssysteme und Browser im mobilen Bereich angehen muss.

jQuery Mobile ist sehr ambitioniert und damit viel mehr als die reine Kombination von jQuery und jQuery UI.
Es ist ein neues Framework mit dem Versprechen, auf fast allem, was man mit sich herumtragen kann, maximal gut auszusehen.
Vielleicht ist es aber zu ambitioniert.

Nun zum Thema. Wir nehmen mal eine einfache Webseite

index.html
impressum.html

Damit wird jQuery Mobile leicht fertig. (Gilt auch z.B. für WordPress Seiten)
Ein paar neue Divs mit neuen Attributen wie data-role=“page“, data-role=“content“, data-role=“button“ usw, jQuery Mobile laden, ggf. ein theme mit dem themeroller erstellen wenn der Standard nicht gefällt.
Fertig.

Wir haben eine andere Webseite

index.html
impressum.html
kontakt.php

Üblicherweise hat kontakt.php am Anfang mehr oder weniger viel (PHP-)Code, der das Kontaktformular weiter hinten bearbeiten soll (Mails erzeugen, Datenbank …)
In einfachen Fall wird ja kontakt.php an sich selbst geschickt. <form action=“/“ …>

Also alles alter Kram.

Wenn man keine hohen Anspüche an den Dialog im Kontaktformular hat, wird jQuery Mobile auch damit leicht fertig.
Es gibt hierfür auch eine offizielle Demo

Leider zeigt diese Demo nicht die ganze Wahrheit. Nämlich den Fall, wo das Kontaktformular ein paarmal hin- und herläuft (z.B. wenn man gewünschte Termine erst im Backend mit der Datenbank verifizieren muss, wenn man ein Captcha einsetzt und und und.

Das Problem hat man auch erst, wenn man die Seite mit dem Dialog wieder verlassen möchte (und das zeigt die Demo schlauerweise nicht).
Sich selbst aufrufende Seiten erzeugen einen zusätzlichen Eintrag in jQuery Mobiles navigation stack. Für jQuery Mobile ist diese Seite dann mehrfach vorhanden.
Mit dem Effekt, dass man die Zurück-Taste mehrfach drücken muss, um wieder auf seine Ausgangsseite zu kommen. Bei fünf Hin- und Herläufen also fünf Mal 🙂

Da sich die Bildschirmanzeige nicht oder wenig ändert hat ein Benutzer den Eindruck, es tut sich nichts, die Anwendung hängt.

Dieses Verhalten gibt es wohl schon immer https://github.com/jquery/jquery-mobile/issues/3226 https://github.com/jquery/jquery-mobile/issues/5069. Die Threads sind schon älter und wurden vor ein paar Wochen wieder von den JQuery Mobile Entwicklern als issue geöffnet.

Die dort vorgeschlagene Lösung (data-history=false) funktioniert bei mir nicht.

Eine funktionierende Lösung ist etwas aufwändig. Man muss jQuery Mobile daran hindern, die kontakt.php mehrfach zu lesen und das Lesen selber durch AJAX übernehmen.
Eine kleine Hilfe war mir hier das promise Interface von jQuery .