07 kwiecień 2010
Wydrukuj tę stronę

Formularze Ajax

Kategorie:  Web  jQuery  Ajax

Jak w prosty sposób zmienić statyczne formularze HTML starego typu w formularze przetwarzane przez Ajaxa.

Ajax jest dzisiejszym standardem przetwarzania danych na stronach internetowych. Pozwala on zachowywać się twojej stronie w bardziej dynamiczny i asynchroniczny sposób. Typowe zastosowania Ajaxa to możliwość poinformowania użytkownika, że jego dane są przetwarzane, i przeładowywanie nie całej zawartości strony a tylko wybranych fragmentów, które rzeczywiście powinny być przeładowane.

Ostatnio chciałem dodać do mojej strony formularze kontaktowe email. Jako, że używam Systemu Zarządzania Treścią, zostałem zmuszony do wykorzystania plug-inu do budowania formularzy, który jest częścią tego narzędzia. Niestety ten plug-in nie posiada funkcjonalności Ajaxa. Przez to stworzone formularze zachowują się w stary sposób. Użytkownik wybierający przycisk wyślij, nie zostaje powiadomiony o tym, że dane do serwera są właśnie wysyłane, co może zakończyć się klikaniem wiele razy I w efekcie wysyłanie do serwera informacji wielokrotnie. To nie jest zachowanie, którego oczekuję od mojej strony internetowej. Tak więc zdecydowałem, że muszę to zmienić. Spędziłem trochę czasu szukając informacji w internecie I znalazłem całkiem proste rozwiązanie tego problemu, postaram się nim tutaj podzielić.

Istnieje sympatyczne API oparte na jQuery nazwane Form Plug-in. Używając go możesz zmienić swoje stare formularze HTML w dynamicznie przetwarzane formularze Ajaxa. Wszystko co musisz zrobić to stworzyć skrypt, który będzie operował na unikalnie oznaczonych formularzach.

Zacznijmy od wyświetlenia jak formularze wyglądają na mojej stronie:

Wyświetl formularz HTML
  1. <div id="email_form">
  2. <!-- Start FormBuilder Module (0.6.1) -->
  3. <form enctype="multipart/form-data" action="http://www.kardasa.pl/polish/email_form.html" method="post" id="m173d5moduleform_1">
  4. <div class="hidden">
  5. <input type="hidden" value="FormBuilder,m173d5,default,1" name="mact">
  6. <input type="hidden" value="68" name="m173d5returnid">
  7. <input type="hidden" value="68" name="page">
  8. <input type="hidden" value="1" name="m173d5fbrp_callcount">
  9. </div>
  10. <div>
  11. <input type="hidden" value="4" name="m173d5form_id">
  12. <input type="hidden" value="2" name="m173d5fbrp_continue">
  13. <input type="hidden" value="1" name="m173d5fbrp_done">
  14. </div>
  15. <div class="formbuilderform email_form">
  16. <div><p>Przy wykorzystaniu tego formularza możesz wysłać mi maila.</p>
  17. <p>Musisz uzupełnić wszystkie pola.</p>
  18. <p>Maile zawierające agresywne lub obraźliwe treści będą natychmiast kasowane, nie zamierzam ich czytać do końca.</p></div>
  19. <div class="required">
  20. <label for="fbrp__33">Twój Adres Email (To pole jest wymagane)</label>
  21. <input type="text" id="fbrp__33" maxlength="128" size="25" value="" name="m173d5fbrp__33">
  22. </div>
  23. <div class="required">
  24. <label for="fbrp__32">Tytuł Wiadomości (To pole jest wymagane)</label>
  25. <input type="text" id="fbrp__32" maxlength="128" size="25" value="" name="m173d5fbrp__32">
  26. </div>
  27. <div class="required">
  28. <label for="fbrp__35">Tekst Wiadomości (To pole jest wymagane)</label>
  29. <textarea id="fbrp__35" rows="10" cols="40" name="m173d5fbrp__35">Tutaj wpisz wiadomość do mnie</textarea>
  30. </div>
  31. <div class="captcha">
  32. <img src="http://www.kardasa.pl/modules/Captcha/lib/gd_captcha/captcha.php?sess=CMSSESSIDed3334a6"><br>
  33. Wpisz kod z obrazka (To pole jest wymagane)<br>
  34. <input type="text" maxlength="255" size="10" value="" id="m173d5fbrp_captcha_phrase" name="m173d5fbrp_captcha_phrase">
  35. </div>
  36. <div class="submit">
  37. <input type="submit" class="fbsubmit" value="Wyślij wiadomość" id="m173d5fbrp_submit" name="m173d5fbrp_submit">
  38. </div>
  39. </div>
  40. </form>
  41. <!-- End FormBuilder Module -->
  42. </div>

Ja widzisz nie ma tutaj nic specjalnego. Co natomiast jest istotne, to fakt, że formularz znajduje się wewnątrz unikalnie oznaczonego znacznika div o identyfikatorze email_form. Skorzystamy z tego w naszym skrypcie.

Ale zanim przystąpimy do stworzenia skryptu musimy załadować jQuery i jQuery Form Plug-in API. Dodaj te dwie linie do sekcji head twojej strony po uprzednim wgraniu skryptów z API na swój serwer.

<script type="text/javascript" src="/scripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/scripts/jquery.form.js"></script>

Teraz jest dobra chwila aby dodać jakiś znacznik powiadamiający o ładowaniu informacji poprzez ajax, będziemy go pokazywać kiedy użytkownik będzie oczekiwał na przetwarzanie danych. Mój znacznik wygląda tak:

<div style="display: none;" id="form-indicator">
<span>Trwa wysyłanie danych<br>
<img alt="" src="uploads/images/progress_bar.gif">
</span>
</div>

Dodatkowo warto dodać też kilka linii do arkusza CSS, które określą jak nasz znacznik zostanie wyświetlony użytkownikowi.

#form-indicator {
	position: absolute;
	background-color:#eee;
	border: 1px solid #bbb;
	top:50%;
	left:40%;
	width:20%;
	font-weight:bold;
	text-align:center;
	padding:0.6em;
	z-index:100;
	filter:alpha(opacity=70);
	opacity: 0.7;
}

Jak widzisz style=”display: none;”, sprawia że nasz znacznik pozostanie ukryty, po załadowaniu strony. Nasz skrypt zmieni to podczas wysyłania danych do serwera.

Teraz spójrzmy na skrypt

Wyświetl kod źródłowy skryptu
  1. $(document).ready(function(){
  2. var options = {
  3. target: '#email_form',
  4. success: function() {
  5. $('#email_form > #form-indicator').hide();
  6. $('#email_form > form').ajaxForm(options);
  7. },
  8. replaceTarget: true,
  9. beforeSubmit: function() {
  10. $('#email_form > #form-indicator').show();
  11. }
  12. };
  13. $('#email_form > form').ajaxForm(options);
  14. });

Jak zawsze skrypty wykorzystujące jQuery API są bardzo krótkie, uwielbiam za to jQuery.

Przyjrzyjmy się skryptowi. Pierwsza linia określa, że kiedy strona będzie załadowana wykonany zdefiniowaną funkcję.

W tej funkcji skonstruujemy obiektową zmienną options, która określi zachowanie naszego formularza Ajaxowego.

Parametr target powie, którą część naszej strony zaktualizować, i oczywiście chcemy zaktualizować znacznik div oznaczony email_form.

Parametr replaceTarget mówi, że nasz cel (parametr target) powinien być zastąpiony odpowiedzią serwera.

Parametr boforeSubmit powie co zrobić przed przesłanie danych do serwera, zostanie wykonany kiedy użytkownik klinie przycisk Wyślij na naszym formularzu. Tutja definiujemy funkcję, która pokażę użytkownikowi nasz ajax-indicator aby powiadomić go o tym, że dane są wysyłane.

Parametr sukces powie co robić kiedy odpowiedź trafi do nas z serwera, tutaj chcemy najpierw ukryć ajax-indicator. Druga rzecz, która nastąpi może wydać się nieco dziwna na pierwszy rzut oka ale jeśli rozważysz co może trafić do nas w wyniku odpowiedzi, powinieneś zrozumieć dlaczego tak postępujemy. Możemy otrzymać dwie odpowiedzi od serwera, informację, że email został wysłany, lub komunikat błędu i nowy formularz pokazujący użytkownikowi jego błędy. Jeśli użytkownik popełni jakieś błędy, serwer pokaże mu ten sam formularz. I musimy się upewnić, że ten nowy formularz także będzie formularzem ajaxowym. Tak więc wykorzystujemy tu selector jQuery, który powinien wybrać formularz znajdujący się wewnątrz znacznika div oznaczonego email_form, i na tym elemencie wywołujemy ajaxForm aby upewnić się, że nasz formularz będzie się zachowywał jak formularz ajaxa ze zdefiniowanymi opcjami.

Dokładnie to samo robimy w ostatniej linii skryptu. Czynimy z naszego formularza formularz, ajaxowy poprzez wywołanie głównej metody ze zdefiniowanego API.

Oczywiście musisz dodać stworzony skrypt do sekcji head twojej strony:

<script type="text/javascript" src="/scripts/email_form.js"></script>

I to jest to, proste nieprawdaż? Upewnij się, że przeczytasz API jQuery Form , posiada ono kilka innych fajnych i przydanych opcji, które mogą ci pomóc. Jeśli chcesz sprawdzić jak to działa po prostu wykorzystaj jeden z moich formularzy kontaktowych na stronie.

Jak widzisz wszystko co musiałem zrobić po stronie interfejsu użytkownika to dodać ajax-indicator jako oddzielny ukryty znacznik, i dodatkowo kilka linii CSS aby wyglądał ładnie. Ale jest jeszcze jedna rzecz, której nie można pominąć. W normalnych warunkach odpowiedź serwera może zawierać całą stronę, a my nie chcemy ładować nagłówka I stopki naszej strony do znacznika div email_form. Musisz więc sprawić aby twój serwer zwrócił nie całą stronę ale tylko interesujący cię fragment w odpowiedzi na żądanie typu xmlHttpRequest. Można to stosunkowo proso zaimplementować w dowolnej technologi, nie ma znaczenie czy to PHP czy Ruby On Rails. Po prostu upewnij się , że zrobisz to po stornie serwera, w skrypcie które przetwarza dane formularza. Ten temat jest poza zakresem tego artykułu.

Możesz uzyskać dostęp do skryptu, który wykorzystuje na swojej stronie na moim serwerze svn podążając za ty, linkiem.

Źródła:




Komentarze

Jeśli znalazłeś jakieś błędy w powyższej informacji lub po prostu chcesz wypowiedzieć swoje zdanie na jej temat, będę wdzięczny za pozostawienie komentarza.
Wszystkie komentarze będą pokazywać się na stronie po tym jak zostaną zatwierdzone. Przepraszam za to ale chcę mieć pewność, że moja strona będzie wolna od obraźliwych lub wulgarnych treści. Nie mam nic przeciwko krytyce ale zrób to właściwie dobierając słowa.

Pozostaw komentarz