Problem ze wskazaniem konkretnego formularza w jQuery Opcje

[Barton]

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

Ten post edytował Barton 16.03.2012, 13:30:55

[rocktech.pl]

Witam.

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

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

[Barton]

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. (IMG:style_emoticons/default/sad.gif) Poza tym wciąż się zastanawiam jakim cudem strona się przeładowuje gdyż poza JavaScriptem nie ma żadnych instrukcji wracających na stronę główną.

Ten post edytował Barton 16.03.2012, 13:42:40

[rocktech.pl]

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.

[Barton]

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? (IMG:style_emoticons/default/sad.gif)

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.

Ten post edytował Barton 16.03.2012, 16:12:18

[cudny]

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

[markonix]

edit: nie przeczytałem kodu dokładnie

Ten post edytował markonix 16.03.2012, 17:51:59

[Barton]

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!

[cudny]

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/