Event Button + Jedes mal 2 weitere Kommentare anzeigen

Cc_Cc_Cc · 04/15/2018, 03:35

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

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

florian0 · 04/15/2018, 13:16

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:

Gruß
florian0

Cc_Cc_Cc · 04/15/2018, 21:07

Quote:
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.
Code:
<div class="post" id="mypost-<?php echo $rowsafe['p_id']; ?>">

</div>
Mit:
Code:
$("#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

HTML Button Code:

Spoiler

False · 04/15/2018, 21:55

Quote:
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
Code:
	<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
HTML Code:
<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"

Code:

$('.bt')

Und holst dir dann von dem ersten die value

Code:

.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

Code:

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

Und im Event holst du dir die pasende Id vom Button

Code:

$(this).data('id')

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

Code:

<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 · 04/16/2018, 20:44

Weitere Anmerkung:

HTML Code:

 $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.