Ajax Without Refreshing Problem

[portseven]

Tag,

Ich möchte, dass beim betätigen des Button, die Seite nicht neu ladet.

kann mir jemand mal verraten was ich falsch mache?!

	while($row = $stmt->fetch()) {
	$sql4 ="
	SELECT 
	comments.u_id,
	comments.p_id,
	u_post.u_id,
	u_post.p_id
	
	FROM comments
	
	LEFT JOIN u_post
	ON comments.p_id = u_post.p_id
	
	WHERE comments.p_id = ?";
	
	$new = $pdo->prepare($sql4);
	$new->BindValue(1, $row['p_id']);
	if(!$new->execute()) {
	print_r($new->errorInfo());
	}
	
	$countss = $new->rowCount();
	
	$row4 = $new->fetch();
	
	echo '<div id="form-content">'; 
	echo '<form method="POST" id="reg-form" autocomplete="off">';
	echo '<br>Post-Id: '. $row['p_id'] . '<br>' .  $row['post'] . '<br>';
	echo 'Kommentare: ' . $countss . ' <br> ';
		if($_POST['post-id'] === $row['p_id']) {
			while($row2 = $result->fetch()) {
				echo 'Kommentar: ' . $row2['comment'] .'<br>';
		}
	}
		echo '<p><input type="submit" name="show" id="show"></p>';
		echo '<p><input type="hidden" name="post-id" value="' . $row['p_id'] . '"></p>';
		echo '_____________________';
	echo '</form>';
	echo '</div>';
}

?>
		<script src="jQuery/jquery-3.3.1.min.js">
        $("#show").click( function()
        {
                $.ajax({
                url: "test.php",
                type: 'POST',
                success: function(result) { 
                //finished
         }
         });
         });
        </script>

[kackb00n]

Hi,

1. solltest du uns den relevanten Code zeigen. In diesem Fall ist es ein clientseitiges Problem also wollen wir nichts von PHP sehen, sondern das, was beim Client ankommt.

2. Bei Events muss man unter Anderem beachten, dass es bei manchmal Standardverhalten gibt. Z.B. dass bei einem Click auf einen Link eine neue Ressource aufgerufen wird oder - wie in deinem Fall - ein Formular abgeschickt und somit auch eine neue Ressource ausgeführt wird. Dein Eventhandler wird wahrscheinlich das machen was du willst, aber da gleichzeitig auch das Formular abgesendet wird, interessiert den Browser deine AJAX-Anfrage nicht mehr.

Hier kannst du mehr dazu lesen und auch wie du das Standardverhalten unterbindest.

MfG

[portseven]

Das untere werde ich mir aufjedenfall anschauen. Aber ich verstehe nicht was du mit "relevanten Code" meinst. Du willst ja kein Code sehen sondern was beim Client ankommt. Wo kann ich das denn nachschauen wo was beim Client ankommt?

[JürgenB]

Hallo,

… Wo kann ich das denn nachschauen wo was beim Client ankommt?

im Seitenquelltext in den Entwicklertools des Browsers.

Gruß
Jürgen

[portseven]

Danke!

Dort wird aber nichts angezeigt. Also kein Fehler.

[JürgenB]

Hallo,

Dort wird aber nichts angezeigt. Also kein Fehler.

wenn da „nichts“ angezeigt wird, wird wohl auch nichts ausgeliefert, aber dann müsste das Browserfenster leer sein 😀

Wenn in der Konsole kein Fehler angezeigt wird, ist syntaktisch wohl alles richtig. Aber du sollst ja auch in der Quelltextanzeige nachsehen, ob das per php generierte html deinen Erwartungen entspricht. Diesen Quelltext kannst du dann hier posten. Besser wäre natürlich ein Link zu deiner Seite.

Dein Problem scheint zu sein, dass du per Ajax Daten anforderst, deren Auslieferung aber nicht abwartest, weil dein Submit-Button die Seite schon vorher neu lädt.

Gruß
Jürgen

[portseven]

Hier ist mal ein Link. Hoffe ihr könnt euch ein Bild zu der Situation machen, und den Fehler finden. Bin sowas von ratlos. Hab etliche Methoden versucht, es klappt einfach nicht.

http://test.liscon.bplaced.net/world_two.php

[pl]

Wenn die Seite nicht neu laden soll, darf der button nicht von type="submit" sein. Also alles was zu einem Submit führt, muss false liefern, egal ob button oder link. MfG

[Rolf B]

Hallo portseven,

hast Du gelesen, was kackb00n über das Standardverhalten und sein Unterbinden geschrieben hat?

Ich komme auf deiner Seite nicht recht weiter, dein Server scheint arg langsam und ich kriege dauernd Timeouts. Vielleicht liegt's ja auch an meiner Seite, keine Ahnung... Der eine Blick, den ich werfen konnte, zeigte mir mehrfaches Einbinden von jquery und auf die Schnelle keinen Punkt, wo Du überhaupt eigenes Script einbindest.

Aber WAS ich sehe, ist dies:

<script src="query/jquery-3.3.1.min.js">
        $("#show").click( function()
        {
                $.ajax({
                url: "world_two.php",
                type: 'POST',
                success: function(result) { 
                //finished
         }
         });
         });
</script>

Da hast Du was falsch verstanden. Entweder hat das Script-Tag Inhalt, dann ist es ein Inline-Script oder ein src-Attribut, dann ist es ein externes Script. Aber nicht beides. Was ein Script-Tag mit Inhalt UND src ausführt, das weiß ich gar nicht. Vielleicht liegt es ja daran, dass dein Script nicht läuft.

Rolf

[portseven]

Danke euch beiden erstmal.

Habe jetzt den Input type zu Button umgeändert und kein Submit eingefügt.

Mein Scirpt sieht wie folgt aus:(natürlich gehts noch weiter, aber hab nur eingefügt was ich alles geändert habe.

		<p><button id="show" name="show_comments" value="<?php echo $countss; ?> Kommentare anzeigen"><?php echo $countss . 'Kommentare anzeigen';?></button></p>
	<?php	} ?>
		<p><input type="submit" name="send_comment" id="submitFormData" value="Kommentar senden" onclick="SubmitFormData()"></p>
		<p><input type="hidden" name="comment_pid" value="<?php echo $row['p_id'];?>"></p>	
		</form>
		<span id="comment_message"></span>
		<br><br><hr>
		<?php } ?>
		<script src="query/jquery-3.3.1.min.js"></script>
		<script>
        $("#show").click( function()
        {
                $.ajax({
                url: "world_two.php",
                type: 'POST',
                success: function(result) { 
				if(result === true) {
				alert("geklappt");
				} else {
				alert("fehl");
				}
         }
         });
         });
        </script>

Hab noch ne Abfrage gemacht.

if(result).. also wenn result existiert dann soll er mir per Alert sagen es hat geklappt.Der sagt mir das es fehl schlägt.

[JürgenB]

Hallo,

  		if(result === true) {

if(result).. also wenn result existiert dann soll er mir per Alert sagen es hat geklappt.Der sagt mir das es fehl schlägt.

die prüfst result auf true, nicht auf "wenn existiert". Versuch mal alert(result). Evtl. musst du in der jquery-Doku nachsehen, welches Format result hat.

Gruß
Jürgen

[portseven]

Der zeigt mir meine Seite als Quellcode an.

[JürgenB]

Hallo,

also nichts mit dem Wert true.

Gruß
Jürgen

[Rolf B]

Hallo portseven,

der success-Handler bekommt drei Parameter. Alles hier dokumentiert.

Der erste Parameter enthält die Daten, die der Server geliefert hat. Das ist ein string oder ein Document. Ein bool würde ich da nicht erwarten.

Rolf

[kackb00n]

Hi,

		<p><button id="show" name="show_comments" value="<?php echo $countss; ?> Kommentare anzeigen"><?php echo $countss . 'Kommentare anzeigen';?></button></p>
	<?php	} ?>

Mal als Anmerkung: Es ist schön wie du Hinweise einfach ignorierst, der PHP-Code ist nicht Ursache des Problems.

Habe jetzt den Input type zu Button umgeändert und kein Submit eingefügt.

Da ist das Problem. Der Standardtyp vom Button-Element ist submit. Das und weiteres kann man hier nachlesen.

Damit hast du nach wie vor das gleiche Problem, wie ich schon am Anfang beschrieben hab.

if(result === true) {

Ich vermute du kennst noch nicht den Unterschied zwischen == und ===, dazu kannst du hier einiges nachlesen. Und generell was truthy ist.

if(result === true) {
    alert("geklappt");
} else {
    alert("fehl");
}

Mancher tut sich am Anfang recht schwer die Entwickler-Tools der Browser zu benutzen (ich war auch einer davon), aber ich rate dir, eigne es dir so schnell wie möglich an, sonst hast du spätestens dann Probleme, wenn es um "größe" Probleme geht oder die Browser unterschiedlich reagieren (nicht jeder benutzt den aktuellen Chrome, Firefox, Edge usw.) Chrome Firefox Edge/Internet Explorer (Ich hab die Links nur überflogen, sollten aber die Grundlagen zeigen oder darauf verlinken)

MfG