Event Button + Jedes mal 2 weitere Kommentare anzeigen

[Cc_Cc_Cc]

hi,

in jedem Beitrag sollte man jedes mal, wenn ein Button betätigt wird, 2 weitere Kommentare anzeigen lassen. Ich habe jetzt versucht, jedoch lässt sich nur ein Button drücken.

Zweites Problem:
Er zeigt jedes mal beim ersten Beitrag die Kommentare ebenso an. Siehe Video.

Würde auch zahlen, falls es zu viel Aufwand ist.

Video:

 Spoiler

Javascript

 Spoiler

	<script>
	$(document).ready(function() {
	
	var commentCount = 1;
	var pid = $("#btn").val();
		$("#btn").click(function(event) {
		event.preventDefault();
		commentCount = commentCount + 2;
			$(".comments").load("load.php", {
			
				commentNewCount: commentCount,
				newpid: pid
			
			});
		});
	});
	</script>

PHP

 Spoiler

PHP Code:

<?php
        $id = 11;
        if($safepost = $pdo->Prepare("
        SELECT
                
        user.id,
        user.username,
        user.image,
                
        u_post.p_id,
        u_post.u_id,
        u_post.post

        FROM u_post
                
        LEFT JOIN user
        ON u_post.u_id = user.id
                
        WHERE u_post.u_id = :user ORDER BY date DESC LIMIT 5;")) {
                
        $safepost->BindParam(':user', $id);
                
        if(!$safepost->execute()) {
            print_r($safepost->errorInfo());
            }
            
        } 
?>
    
        
    <?php while($rowsafe = $safepost->fetch()): ?>
    <div class="post">
    <?php
        $pids = $rowsafe['p_id'];

        $sql3 = "SELECT * FROM comments WHERE comments.p_id = :p_id LIMIT 1;";
        $com = $pdo->prepare($sql3);
        $com->BindParam(':p_id', $pids);
        
        if(!$com->execute()) {
            print_r($com->errorInfo());
        }
        
        $count = $com->rowCount();
    ?>


        
        <p>Post:<?php echo htmlspecialchars($rowsafe['post'], ENT_QUOTES, 'UTF-8'); ?></p>
        
        <br>
        
        <?php while($row2 = $com->fetch()): ?>

        <div class="comments">
            <?php echo $row2['comment'] . '<br>'; ?>
        </div>
        
        <?php endwhile; ?>

            <button id="btn" value="<?php echo $rowsafe['p_id']; ?>">Show more Comments</button>
            
        </div>
        
    <?php endwhile; ?>

Load.php

 Spoiler

PHP Code:

<?php
include 'config/connect.php';
$commentNewCount = $_POST['commentNewCount']; 
$newpid = $_POST['newpid'];
?>

    <?php
        $sql3 =
        "SELECT * FROM comments WHERE comments.p_id = :p_id LIMIT $commentNewCount;";
        $com = $pdo->prepare($sql3);
        $com->BindParam(':p_id', $newpid);
        if(!$com->execute()) {
            print_r($com->errorInfo());
        }
        $count = $com->rowCount();
    ?>
        <br>

        <?php while($row2 = $com->fetch()): ?>
            <?php echo $row2['comment'] . '<br>'; ?>
        <?php endwhile; ?>

[florian0]

1. Eine ID, das sagt auch schon der Name, ist ein eindeutiger Identifier. D.h wenn du 2x id="btn" schreibst verletzt du die Regel des DOM. Das kann gut gehen, muss es aber nicht.

2. Mit $(".comments") bekommst du ALLE HTML-Elemente die die Klasse .comments tragen. Du brauchst an der Stelle aber eine Eindeutigkeit.

Beschäftige dich mal mit CSS Selektoren, da kann man eine Menge Magic mit machen.

 Lösung:

Den Post eindeutig identifizierbar machen.

<div class="post" id="mypost-<?php echo $rowsafe['p_id']; ?>">
<!-- ... -->
</div>

Mit:

$("#mypost-1234 div.comments").load( /* ... */ );

kommst du dann an das richtige HTML Element und kannst gleichermaßen auch eindeutig auf alle anderen Elemente pro Post zugreifen.

Gruß
florian0

[Cc_Cc_Cc]

Originally Posted by florian0

1. Eine ID, das sagt auch schon der Name, ist ein eindeutiger Identifier. D.h wenn du 2x id="btn" schreibst verletzt du die Regel des DOM. Das kann gut gehen, muss es aber nicht.

2. Mit $(".comments") bekommst du ALLE HTML-Elemente die die Klasse .comments tragen. Du brauchst an der Stelle aber eine Eindeutigkeit.

Beschäftige dich mal mit CSS Selektoren, da kann man eine Menge Magic mit machen.

 Lösung:

Den Post eindeutig identifizierbar machen.

<div class="post" id="mypost-<?php echo $rowsafe['p_id']; ?>">
<!-- ... -->
</div>

Mit:

$("#mypost-1234 div.comments").load( /* ... */ );

kommst du dann an das richtige HTML Element und kannst gleichermaßen auch eindeutig auf alle anderen Elemente pro Post zugreifen.

Gruß
florian0

Das mit den Kommentaren im richtigen Feld anzeigen zu lassen hat geklappt. Danke dir! Nur der Event Button funktioniert noch nicht obwohl ich es eigentlich eindeutig gemacht habe.

 Spoiler

	<script>
	$(document).ready(function() {
	
	var commentCount = 1;
	var pid = $(".bt").val();
		$("#btn-"+pid+"").click(function(event) {
		event.preventDefault();
		commentCount = commentCount + 2;
		$("#mypost-"+pid+" .comments").load("load.php", {
			commentNewCount: commentCount,
			newpid: pid
		});
	});
});
	</script>

HTML Button Code:

 Spoiler

<button class="bt" id="btn-<?php echo $rowsafe['p_id']; ?>" value="<?php echo $rowsafe['p_id']; ?>">Show more Comments</button>

[False]

Originally Posted by Cc_Cc_Cc

Das mit den Kommentaren im richtigen Feld anzeigen zu lassen hat geklappt. Danke dir! Nur der Event Button funktioniert noch nicht obwohl ich es eigentlich eindeutig gemacht habe.

 Spoiler

	<script>
	$(document).ready(function() {
	
	var commentCount = 1;
	var pid = $(".bt").val();
		$("#btn-"+pid+"").click(function(event) {
		event.preventDefault();
		commentCount = commentCount + 2;
		$("#mypost-"+pid+" .comments").load("load.php", {
			commentNewCount: commentCount,
			newpid: pid
		});
	});
});
	</script>

HTML Button Code:

 Spoiler

<button class="bt" id="btn-<?php echo $rowsafe['p_id']; ?>" value="<?php echo $rowsafe['p_id']; ?>">Show more Comments</button>

Das kann auch nicht funktionieren, schau dir bitte mal die Javascript/Jquery Grundlagen an.
Aktuell holst du dir Alle Button mit der Class "bt"

$('.bt')

Und holst dir dann von dem ersten die value

.val()

was schon kein Sinn macht.
Danach erzeugst du ein Event für nur einen Button mit der Id btn-(value vom ersten Button).

Einfachste Lösung wäre einfach allen Buttons eine Klasse zu geben z.b. load-comments oder was auch immer.
Dann erzeugst du die Events

$('.load-comments'.click(....)

Und im Event holst du dir die pasende Id vom Button

$(this).data('id')

Am Button wäre die Id als data attribute dran.

<button data-id="DEIN PHP TEIL FÜR DIE ID">

Habe dir extra keine Lösung gegeben, sondern nur einen Vorschlag.
Mit etwas Zeit & google wirst du es hinbekommen.

[xShizoidx]

Weitere Anmerkung:

 $sql3 = 
        "SELECT * FROM comments WHERE comments.p_id = :p_id LIMIT $commentNewCount;";

Du holst jedes mal wenn der Benutzer darauf klickt alle Kommentare erneut und lädst diese dort hinein. Limit hat auch einen zweiten Parameter, also LIMIT VON, BIS. LIMIT 0,2 würdest du dann z.B. für den Anfang verwenden. Hol dir doch einfach nur die Kommentare, welche du neu hinzufügen willst und füge diese mit jQuery append hinzu.