Witam,

Napisałem taką funkcję obsługującą dodawanie komentarzy formularza:

[HTML] pobierz, plaintext 
					$('#commentform').submit(function() {
 
						  var $form = $(this);
						  $inputs = $form.find("input, select, button, textarea"),
						  serializedData = $form.serialize();
						  $inputs.attr("disabled", "disabled");
 
								$.ajax( {type: 'POST', url: 'dodaj.html', dataType:'json', data: serializedData, success: function(dane) { 
 
								$inputs.removeAttr("disabled"); 
								$('.komentarzform' + dane.id).prepend('...');
								var ile = $('#divkomentarz' + dane.id).css('height');
								var iles = parseInt(ile);
								var ilenowy = $('#nowykomentarz' + dane.id).css('height');
								var ilenowys = parseInt(ilenowy);
								var suma = iles + ilenowys;
								$('#divkomentarz' + dane.id).css('height', suma + 'px');
								$('#nowykomentarz' + dane.id).slideDown("slow");
 
							 }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); }});
 
						  return false;					
 
					});
[HTML] pobierz, plaintext 

Problem jest taki, że działa ona tylko w pierwszym divie z komentarzami, czyli odnośnie pierwszego formularza. Zakładając że mam na stronie 10 formularzy, po dodaniu komentarza za pomocą pierwszego komentarz się pojawia tam gdzie powinien. Korzystając z jakiegokolwiek innego, komentarz również dodaje się tam gdzie powinien, ale po przeładowaniu strony, co jest bardzo dziwne gdyż plik PHP obsługujący dodawanie elementów do bazy nie ma nawet nagłówka kierującego z powrotem na stronę główną. Odnoszę wrażenie że to przez brak odniesienia do konkretnego formularza. Co przypisać zmiennej $form żeby zawsze odnosiła się do odpowiedniego

Witam.

http://api.jquery.com/jQuery.each/

[JAVASCRIPT] pobierz, plaintext 
$('.commentform')each(function(element) {
element.submit(function() { ....
[JAVASCRIPT] pobierz, plaintext 

Dzięki za szybką odpowiedź. Teraz moja funkcja wygląda tak:

[HTML] pobierz, plaintext 
					$('#commentform')each(function(element) {
						element.submit(function() {
 
						  var $form = $(this);
						  $inputs = $form.find("input, select, button, textarea"),
						  serializedData = $form.serialize();
						  $inputs.attr("disabled", "disabled");
 
								$.ajax( {type: 'POST', url: 'dodaj.html', dataType:'json', data: serializedData, success: function(dane) { 
 
								$inputs.removeAttr("disabled"); 
								$('.komentarzform' + dane.id).prepend('...');
								var ile = $('#divkomentarz' + dane.id).css('height');
								var iles = parseInt(ile);
								var ilenowy = $('#nowykomentarz' + dane.id).css('height');
								var ilenowys = parseInt(ilenowy);
								var suma = iles + ilenowys;
								$('#divkomentarz' + dane.id).css('height', suma + 'px');
								$('#nowykomentarz' + dane.id).slideDown("slow");
 
							 }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); }});
 
						  return false;					
 
						});
					});
[HTML] pobierz, plaintext 

I w tym momencie strona odświeża się przy każdym formularzu, nawet tym pierwszym. Poza tym wciąż się zastanawiam jakim cudem strona się przeładowuje gdyż poza JavaScriptem nie ma żadnych instrukcji wracających na stronę główną.

http://api.jquery.com/event.preventDefault/

[JAVASCRIPT] pobierz, plaintext 
element.submit(function(event) {
event.preventDefault();
 
[JAVASCRIPT] pobierz, plaintext 

I jeszcze jedno nie zapominaj o tym, że id musi być unikalne.

[JAVASCRIPT] pobierz, plaintext 
$('#divkomentarz' + dane.id).css('height', suma + 'px');
$('#nowykomentarz' + dane.id).slideDown("slow");
[JAVASCRIPT] pobierz, plaintext 

Nie widziałem kodu html na stronie ale zakładam, że tak nie jest.

Id są unikalne, do każdej nazwy identyfikatora dodaję przez PHP identyfikator postu.

Wracając do tematu niestety nic mi to nie dało i w tym przypadku żadna akcja po prostu się nie wykonuje i przerzuca do strony zajmującej się skryptem php. Skleciłem coś takiego:

[HTML] pobierz, plaintext 
				    $('#commentform').each(function(element){
						element.submit(function() {
 
						    var $form = element;
						    $inputs = $form.find("input, select, button, textarea"),
						    serializedData = $form.serialize();
						    $inputs.attr("disabled", "disabled");
 
								$.ajax( {type: 'POST', url: 'dodaj.html', dataType:'json', data: serializedData, success: function(dane) { 
 
								$inputs.removeAttr("disabled"); 
								$('.komentarzform' + dane.id).prepend('...');
								var ile = $('#divkomentarz' + dane.id).css('height');
								var iles = parseInt(ile);
								var ilenowy = $('#nowykomentarz' + dane.id).css('height');
								var ilenowys = parseInt(ilenowy);
								var suma = iles + ilenowys;
								$('#divkomentarz' + dane.id).css('height', suma + 'px');
								$('#nowykomentarz' + dane.id).slideDown("slow");
 
								}, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); }});
 
							return false;
 
                        });						  
 
					});
[HTML] pobierz, plaintext 

Ale to również nie działa. Nie użyłem metody event.preventDefault(); gdyż nawet po przeczytaniu dokumentacji nie za bardzo rozumiem czemu ona służy, a nawet po jej dodaniu nic to nie zmienia. Jakiś pomysł dlaczego pomimo zdefiniowania akcji 'submit', nie jest ona w ogóle wykonywana?

Kod HTML formularza:

[HTML] pobierz, plaintext 
			<form class="commentform" method="post" action="dodaj.html">
				<div style="width:100px; height:auto; text-align:right; float:left;">
					<p class="tresckomentarza" style="margin-top:4px;">Nick:  </p>
					<p class="tresckomentarza" style="margin-top:9px;">Treść:  </p>
				</div>
				<div style="width:192px; height:auto; float:left;">
					<input maxlength="30" type="input" placeholder=" twój nick" style="margin-top:2px; margin-bottom:0px; width:180px; height:18px; border:1px solid #fda21d; font-family:Tahoma; font-size:8pt; color:#57564e; " name="nickname" />
					<input maxlength="1000" type="input" placeholder=" treść komentarza" style="margin-top:2px; width:180px; height:18px; border:1px solid #fda21d; font-family:Tahoma; font-size:8pt; color:#57564e; " name="tresc" />
				</div>				
				<div style="width:100px; height:auto; text-align:center; float:left;">
					<input type="submit" style="border:1px solid #fda21d; width:70px; margin-top:16px; " value="dodaj">
				</div>			
					<input type="hidden" name="token" value="komentarz">
					<input type="hidden" name="idpostu" value="<? echo $row['id']; ?>">
			</form>
[HTML] pobierz, plaintext 

EDIT: zorientowałem się również że wszystkie 10 formularzy ma ten sam identyfikator więc zmieniłem je na klasę (edytując również pierwszą linijkę na $('.commentform').each(function(element){ ). To również nic nie dało.

[HTML] pobierz, plaintext 
$('.commentform').each(function() {
console.log($(this));
});
[HTML] pobierz, plaintext 

edit: nie przeczytałem kodu dokładnie

Problem rozwiązany:

Okazało się że pierwotny kod był całkowicie działający, tylko że korzystając z akcji $(document).ready(); zdążył się załadować tylko jeden formularz (które to są ładowane w pętli przez php). Dlatego też skrypt działał tylko w pierwszym formularzu. Sprawę rozwiązało umieszczenie skryptu w metodzie $(window).load();.

Pozdrawiam i jeszcze raz dzięki!

Że niby co ? $(document).ready(function() { //kod }); wewnątrz metody ready() skrypty zaczynają się wykonywać dopiero po zaczytaniu całego DOM'a !
W takim wypadku może miałeś jakąś funkcję poniżej kodu wykonywalnego, bo $(window).load() na bank nie naprawił Ci skryptu.

Polecam: http://api.jquery.com/ready/