portseven: preventDefault funktioniert nicht

Hi,

weiß jemand warum mein preventDefault() nicht funkioniert?

HTML:

<form id="comment-form">
						<button type="submit" name="show_comments" class="show_comments" value="<?php echo $rowsafe['beichtid']; ?>">Show Comments</button>
							<?php echo $count_comments; ?> <i class="far fa-comment"></i></button>
						<p><input type="hidden" name="beicht-comment-id" value="<?php echo $rowsafe['beichtid']; ?>"></p>
</form>

JS:

			<script>
				
				$('#comment-form').submit(function(e) {
					e.preventDefault();
					$.ajax({
						type: 'POST',
						url: 'show_comments.php',
						data: $(this).serialize(),
						success: function(data) {
							alert(data)
						}
					})
				})
			
			</script>

akzeptierte Antworten

  1. Tach!

    weiß jemand warum mein preventDefault() nicht funkioniert?

    Eine Möglichkeit wäre, dass der Browser anderne Code ausführt, als du denkst. Hast du überprüft, dass der Browser den richtigen Code hat? Fehlermeldungen in der Console gibts auch keine?

    dedlfix.

    1. Keine Fehlermeldung und es wird kein anderer Code ausgeführt. Ich hab oft in letzer Zeit mit Javascript gearbeitet und es oft benutzt. Bei anderen Skript klappt es auch. Aber verstehe nicht wieso es da nicht klappt, es ist doch ein ganz einfacher Code ..

      1. Tach!

        Aber verstehe nicht wieso es da nicht klappt, es ist doch ein ganz einfacher Code ..

        Es ist auch einfach und ich sehe den Fehler nicht in dem gezeigten Code. Bisher stelle sich dann oft heraus, dass der Code gar nicht auf dem Server angekommen war oder der Browser alten Code aus seinem Cache ausgeführt hat.

        dedlfix.

        1. Hab den alten Cache gelöscht im Browser usw. Der Code kommt an, denn er zeigt mir die Kommentare von show_comments.php.

          Ich hab ne alternative mal grad geschrieben hier funktionierts irgendwie, aber hab kein Schimmer wie ich ein eventlistener einfüge für jeden Button:

          			<script>
          			$(document).ready(function() {
          				$('.show_comments').on('click', show)
          			})
          				
          				function show(e) {
          					e.preventDefault()
          					var value =	$(this).val()
          					$.ajax({
          						type: 'POST',
          						url: 'show_comments.php',
          						data: $(this).serialize(),
          						success: function(data) {
          										alert(value)
          						}
          					})
          				}
          			
          			</script>
          
          1. hallo

            Hab den alten Cache gelöscht im Browser usw. Der Code kommt an, denn er zeigt mir die Kommentare von show_comments.php.

            Nur mal so, ein submithandler (die Funktion die onsubmit ausgeführt wird) wird immer auch einen return Wert zurückgeben. Um form action für xhrs zu unterdrücken muss der Wert false sein.

            --
            Neu im Forum! Signaturen kann man ausblenden!
            1. Tach!

              Nur mal so, ein submithandler (die Funktion die onsubmit ausgeführt wird) wird immer auch einen return Wert zurückgeben. Um form action für xhrs zu unterdrücken muss der Wert false sein.

              Muss nicht, für das Unterdrücken gibts ja das event.preventDefault().

              dedlfix.

              1. hallo

                Nur mal so, ein submithandler (die Funktion die onsubmit ausgeführt wird) wird immer auch einen return Wert zurückgeben. Um form action für xhrs zu unterdrücken muss der Wert false sein.

                Muss nicht, für das Unterdrücken gibts ja das event.preventDefault().

                dedlfix.

                Reden wir von der Default Aktion eines buttons oder des form elements?

                --
                Neu im Forum! Signaturen kann man ausblenden!
                1. Tach!

                  Um form action für xhrs zu unterdrücken muss der Wert false sein.

                  Muss nicht, für das Unterdrücken gibts ja das event.preventDefault().

                  dedlfix.

                  Reden wir von der Default Aktion eines buttons oder des form elements?

                  Ja, genauso ist preventDefault() definiert, dass es die Default-Aktion verhindert.

                  dedlfix.

              2. Hab herausgefunden woran es lag. Keine Ahnung wieso es so ist, aber so hats geklappt:

                $('#comment-form').submit(function(event)
                

                Ersetzen mit:

                $('.comment-form').submit(function(event)
                

                Also bzw nicht <form id="comment-form"> machen sondern <form class="comment-form">

                Keine Ahnung wieso das mit Class geht und nicht mit ID. haha so komisch

                1. Tach!

                  Also bzw nicht <form id="comment-form"> machen sondern <form class="comment-form">

                  Keine Ahnung wieso das mit ID nicht geht haha so komisch

                  Hast du vielleicht diese ID zweimal oder öfter vergeben, so dass der Eventhandler an einem falschen Element landet? Dann würde aber auch der Ajax-Request nicht ausgeführt worden sein, was du im Serverlog an dessen Ausbleiben sehen müsstest.

                  dedlfix.

                  1. Hab es kontrolliert. Hatte die nicht 2mal vergeben. Hab halt ne While Schleife wo alle Post sind. Natürlich kommt dann halt mehrfach die FORM vor.

                    1. Hallo portseven,

                      wenn die Form in einer Schleife mehrfach generiert wird, hast Du im Ziel-HTML auch mehrfach die gleiche ID. Gelle?

                      Hab's kurz ausprobiert: Wenn foo eine mehrfache ID ist, behandelt $('#foo') nur das erste Element mit dieser ID. Ist foo eine mehrfache Klasse, werden alle Elemente behandelt. Das entspricht dem, wie HTML spezifizert ist.

                      Ich nehme an, das Sizzle ein '#foo' erkennt und getElementById daraus macht. (querySelectorAll macht er nicht draus, der würde mehrfache IDs finden).

                      Rolf

                      --
                      sumpsi - posui - clusi
                      1. Die From heißt in jeder Schleife #comment-form also gleich.

                        Nur die Beitrag-ID (Ich sag jetzt einfach mal Beitrag) ändert sich.

                        z.b

                        <form id="comment-form">

                        <div class="comment-list-1">

                        </div> </form>

                        <form id="comment-form"> <div class="comment-list-2">

                        </div> </form>

                        Dann finde ich heraus welcher Value der Button hat. Wenn die Value des Button eins ist lasse ich alle Kommentare anzeigen wo die Comment-list den Wert 1 auch hat.

                        1. Tach!

                          Die From heißt in jeder Schleife #comment-form also gleich.

                          Wenn alle gleich heißen, ist es kein Identifikationsmerkmal. Eine ID muss deshalb dokumentweit einmalig sein. Es hilft nichts, in Kindelementen etwas unterschiedlich zu machen, das beeinflusst die ID nicht. comment-form ist also bei dir kein Identifikationsmerkmal sondern eins für die Klassifizierung. Und du brauchst es auch nur, wenn noch andere Formulare in der Seite sind, denn ansonsten kannst du alle Formulare bereits über den Elementnamen form ansprechen.

                          dedlfix.

                          1. Ok super danke für die Info jetzt weiß ich wenigstens bescheid

                  2. Hab noch eine kurze Frage:

                    HTML:

                    <form id="comment-form">
                    						<button type="submit" name="show_comments" class="show_comments" value="<?php echo $rowsafe['beichtid']; ?>">Show Comments</button>
                    							<?php echo $count_comments; ?> <i class="far fa-comment"></i></button>
                    						<p><input type="hidden" name="beicht-comment-id" value="<?php echo $rowsafe['beichtid']; ?>"></p>
                    </form>
                    
                    
                    JS:
                    
                    		<script>
                    			
                    			$('#comment-form').submit(function(e) {
                    				e.preventDefault();
                    				$.ajax({
                    					type: 'POST',
                    					url: 'show_comments.php',
                    					data: $(this).serialize(),
                    					success: function(data) {
                    						alert(data)
                    					}
                    				})
                    			})
                    		
                    		</script>
                    

                    Wie kann ich hier den BTN Value herausfinden?

                    Wenn ich es so mache:

                    var value = $('.show_comments').val()
                    alert(value)
                    

                    dann zeigt er mir einfach ganze Zeit den gleichen Value bei jedem BTN. (Ist ja auch normal hab ja nur eins sozusagen selektiert.

                    Wenn ich es aber so mache:

                    		<script>
                    			
                    			$('#comment-form').submit(function(e) {
                    				e.preventDefault();
                    				var value = $(this).val()
                    .... ajax code
                    
                    alert(value)
                    				})
                    			})
                    		
                    		</script>
                    

                    Dann zeigt er mir einfach ein leeres Feld an

                    1. Tach!

                      Wie kann ich hier den BTN Value herausfinden?

                      Mit this hast du im Eventhandler Zugriff auf das Formular-Element. Nach dem Einpacken in $() kannst du Methoden wie .find() verwenden, um dessen Kinder zu selektieren. Also $(this).find('.button_klasse oder nur button, wenn es nur einen gibt').val().

                      Wenn ich es so mache:

                      var value = $('.show_comments').val()
                      alert(value)
                      

                      dann zeigt er mir einfach ganze Zeit den gleichen Value bei jedem BTN.

                      Den Wert vom ersten Element mit dieser Klasse, dokumentweit.

                        		var value = $(this).val()
                      

                      Dann zeigt er mir einfach ein leeres Feld an

                      Das Formular hat ja auch keinen direkten Wert.

                      dedlfix.

                      1. Danke, das wusste ich nicht und hat mir jetzt geholfen.^^