Forum PHP.pl

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:

[PHP] pobierz, plaintext 
class AddComment
{
	public $nick;
	public $message;
 
	public function setNick($nick)
	{
		$this->nick = $nick;
	}
 
	public function setMessage($message)
	{
		$this->message = $message;
	}
 
	public function __construct()
	{
		mysql_connect("localhost","root","root");
		mysql_select_db("shoutbox");
	}
 
	public function printComments()
	{
		$tab = array();
		$r = mysql_query("SELECT * FROM shoutbox2 ORDER BY ID DESC");
		while($l = mysql_fetch_array($r))
		{
			$linia = "<hr />";
			$br = "<br />Napisano: ";
			$obrazek = "<img src=\"src/images/bullet.gif\" alt=\"-\" />";
			$tab[] = $l['user'];
			$tab[] = $obrazek;
			$tab[] = $l['message'];
			$tab[] = $br;
			$tab[] = $l['date'];
			$tab[] = $linia;
		}
 
		return $tab;
	}
 
	public function check()
	{
		$this->error = 0;
		if(empty($this->nick) or empty($this->message))
		{
			$this->error++;
			echo "Proszę wypełnić oba pola.";
		}
 
		return $this->error;
	}
 
	public function insert()
	{
		if(!$this->error)
		{
			$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)));
			mysql_query($query)or die(mysql_error());
		}
	}
}
 
$entry = new AddComment();
 
if(isset($_POST['wyslany']))
{
	extract($_POST);
	$entry->setNick($nick);
	$entry->setMessage($message);
	$entry->check();
	$entry->insert();
}
 
$tab = $entry->printComments();
foreach($tab as $index)
{
	echo $index." ";
}
[PHP] pobierz, plaintext 

Niedziałający kod jQuery, mający zapobiegać przeładowaniu strony:

[PHP] pobierz, plaintext 
$(document).ready(function() {
	$('#form').ajaxForm({ // id formularza
		target: 'body'
	//	alert("Komentarz został dodany.");
	});
});
[PHP] pobierz, plaintext 

Formularz:

[HTML] pobierz, plaintext 
<form method="post" action="index.php" id="form">
<table>
<tr>
	<td><label>Imię / nick:</label></td>
	<td><input class="text-user" name="nick" id="nick" type="text" MAXLENGTH="25"  /></td>
</tr>
<tr>
	<td><label>Komentarz:</label></td>
	<td><textarea class="text" name="message" id="message" cols="30" rows="4"></textarea></td>
</tr>
<tr>
	<td></td>
	<td><input name="wyslany" id="send" type="submit" value="Dodaj komentarz!" class="przycisk" /></td>
</tr>
</table>
</form>
[HTML] pobierz, plaintext 

Proszę o pomoc,
Z góry dziękuję

Ten post edytował jg44 28.01.2012, 09:39:59

Sprawdź stronę używając np. firebug / dragonfly / chrome dev tools. Jeden z błędów ( usuń "-" ):

[HTML] pobierz, plaintext 
missing ) after formal parameters
[Break On This Error] 	
function ramka(text-user, klasa)
-------------------^
[HTML] pobierz, plaintext 

Ten post edytował Necsord 28.01.2012, 12:37:23

Ok, poprawiłem.
Sprawdziłem firebugiem i żadnych niepokojących objawów nie stwierdził...

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.

[HTML] pobierz, plaintext 
$(document).ready(function() {
	$('#form').ajaxForm({
		target: 'body'
	//	alert("Komentarz został dodany.");
	});
});
[HTML] pobierz, plaintext 

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.

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

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' ...

[HTML] pobierz, plaintext 
$(document).ready(function() {
	$('#form').ajaxForm({
		target: '.content'
	//	alert("Komentarz został dodany.");
	});
});
[HTML] pobierz, plaintext 

Ok, dzięki za pomoc.
Ciężko z myśleniem u mnie dzisiaj, ale chyba zaczynam łapać.