Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][jQuery/AJAX] Formularz przeładowujący stronę
Forum PHP.pl > Forum > Przedszkole
jg44
Witam,
chciałbym zamieścić na swojej stronie prosty skrypt jQuery (bazujący na AJAXie) do zamieszczania komentarzy (coś w rodzaju shoutboxa). W otchłani różnych dodatków jQuery znalazłem dodatek ajaxForm, który ma działać tak, że trzeba napisać tylko kod PHP do obsługi formularza, 'podpiąć' formularz pod ten dodatek, i jQuery załatwi za mnie to, że ten formularz nie będzie wymagał przeładowania strony. Niestety, po podpięciu formularza pod ten dodatek, strona niestety przeładowuje się (co wygląda fatalnie, bo układ strony jest zrobiony z użyciem innego dodatku organicTabs). Najlepiej będzie, jak sami wejdziecie na stronę i dodacie jakiś komentarz, to zobaczycie, co się dzieje:
menu 'Oceń'
Kod PHP obsługujący formularz (chyba nie ma tutaj większego znaczenia) wygląda następująco:
  1. class AddComment
  2. {
  3. public $nick;
  4. public $message;
  5.  
  6. public function setNick($nick)
  7. {
  8. $this->nick = $nick;
  9. }
  10.  
  11. public function setMessage($message)
  12. {
  13. $this->message = $message;
  14. }
  15.  
  16. public function __construct()
  17. {
  18. mysql_connect("localhost","root","root");
  19. mysql_select_db("shoutbox");
  20. }
  21.  
  22. public function printComments()
  23. {
  24. $tab = array();
  25. $r = mysql_query("SELECT * FROM shoutbox2 ORDER BY ID DESC");
  26. while($l = mysql_fetch_array($r))
  27. {
  28. $linia = "<hr />";
  29. $br = "<br />Napisano: ";
  30. $obrazek = "<img src=\"src/images/bullet.gif\" alt=\"-\" />";
  31. $tab[] = $l['user'];
  32. $tab[] = $obrazek;
  33. $tab[] = $l['message'];
  34. $tab[] = $br;
  35. $tab[] = $l['date'];
  36. $tab[] = $linia;
  37. }
  38.  
  39. return $tab;
  40. }
  41.  
  42. public function check()
  43. {
  44. $this->error = 0;
  45. if(empty($this->nick) or empty($this->message))
  46. {
  47. $this->error++;
  48. echo "Proszę wypełnić oba pola.";
  49. }
  50.  
  51. return $this->error;
  52. }
  53.  
  54. public function insert()
  55. {
  56. if(!$this->error)
  57. {
  58. $query = sprintf("INSERT INTO shoutbox2 (user, message) VALUES('%s', '%s');", mysql_real_escape_string(strip_tags($this->nick)), mysql_real_escape_string(strip_tags($this->message)));
  59. mysql_query($query)or die(mysql_error());
  60. }
  61. }
  62. }
  63.  
  64. $entry = new AddComment();
  65.  
  66. if(isset($_POST['wyslany']))
  67. {
  68. extract($_POST);
  69. $entry->setNick($nick);
  70. $entry->setMessage($message);
  71. $entry->check();
  72. $entry->insert();
  73. }
  74.  
  75. $tab = $entry->printComments();
  76. foreach($tab as $index)
  77. {
  78. echo $index." ";
  79. }

Niedziałający kod jQuery, mający zapobiegać przeładowaniu strony:
  1. $(document).ready(function() {
  2. $('#form').ajaxForm({ // id formularza
  3. target: 'body'
  4. // alert("Komentarz został dodany.");
  5. });
  6. });

Formularz:
  1. <form method="post" action="index.php" id="form">
  2. <tr>
  3. <td><label>Imię / nick:</label></td>
  4. <td><input class="text-user" name="nick" id="nick" type="text" MAXLENGTH="25" /></td>
  5. </tr>
  6. <tr>
  7. <td><label>Komentarz:</label></td>
  8. <td><textarea class="text" name="message" id="message" cols="30" rows="4"></textarea></td>
  9. </tr>
  10. <tr>
  11. <td></td>
  12. <td><input name="wyslany" id="send" type="submit" value="Dodaj komentarz!" class="przycisk" /></td>
  13. </tr>
  14. </form>

Proszę o pomoc,
Z góry dziękuję
Necsord
Sprawdź stronę używając np. firebug / dragonfly / chrome dev tools. Jeden z błędów ( usuń "-" ):
  1. missing ) after formal parameters
  2. [Break On This Error]
  3. function ramka(text-user, klasa)
  4. -------------------^
jg44
Ok, poprawiłem.
Sprawdziłem firebugiem i żadnych niepokojących objawów nie stwierdził...
Necsord
Strona się nie przeładowywuje. Ty poprostu próbujesz wpakować całą stronę ( html, head, body ) do body. Zrób np. osobny plik obsługujący ten formularz, który będzie tobie zwracał sam komentarz.

  1. $(document).ready(function() {
  2. $('#form').ajaxForm({
  3. target: 'body'
  4. // alert("Komentarz został dodany.");
  5. });
  6. });
jg44
Ale jak zrobię osobny plik dla formularza, to trzeba będzie załadować stronę z tym plikiem, a to nie o to chodzi. Po prostu chcę dodać komentarz, strona ma się nie przeładować, a ten komentarz powinien pojawić się pod formularzem. Chyba, że Cię źle zrozumiałem.
Necsord
Plugin od formularza po potwierdzeniu wysyła request do wyznaczonego miejsca ( czyli ładuje tą "stronę" w tle ) i zwraca to co tam dostanie. W twoim przykladzie wysyłasz request do strony index.php która zwraca całą stronę zamiast tylko potrzebne elementy (sam komentarz). Popatrz sobie na przykłady porównaj wyniki konsoli firebug'a z twojej strony i ich:
http://jquery.malsup.com/form/#html
jg44
No tak, widzę, że to co mam jest złe. Takie coś też nic nie daje, bo dalej jest ładowana cała strona, tyle że do '.content' zamiast do 'body' ...
  1. $(document).ready(function() {
  2. $('#form').ajaxForm({
  3. target: '.content'
  4. // alert("Komentarz został dodany.");
  5. });
  6. });

Necsord
Ponieważ jak już mówiłem:
  1. <form method="post" action="index.php" id="form">

Ten plik zwraca całą stronę. Zrób plik np index2.php ( nazwa pogladowa ).

index2.php

  1. if(post)
  2. {
  3. zapisz komentarz;
  4.  
  5. $html = '<span>nazwa komentarza</span><span>tresc komentarza</span>';
  6.  
  7. exit($html)
  8. }


Równie dobrze ( nie tyle dobrze ile zadziała ) możesz to zrobić w index.php na samym poczatku przed wyświetleniem HTML'a.
jg44
Ok, dzięki za pomoc. wink.gif
Ciężko z myśleniem u mnie dzisiaj, ale chyba zaczynam łapać. wink.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.