The problem is with my two forms (for comments and subcomments by the users). I've implemented a jquery code so that this such form can show or hide when clicking on the "reply" button. Well, man, so far so good. But I noticed after a few tests that this works out on the comments but not on the subcomments.
On the subcomments it works but only on the subcomments I posted and when I'm logged in my own system. On the rest of the subcomments, it does not work, and when I click on the secondary comment or subcomment "reply" button, it doesn't show or hide anything and the other buttons like "delete" and "edit" look unactive and don't work at all. Well, this is my first problem. Now, my second problem is with the span "view replies".
When I click on it, it hides all "ul"(unordered lists) with class ".replies" at once (in which there are the subcomments to the main comment) and not one by one (hide-and-show switching) like I'd like. Besides, when I click on it again, it simply doesn't reshow. This is the jQuery code:
$(document).ready(function(){
$(document).on('click' , '.reply' , function(){
var closestDiv = $(this).closest('div'); // also you can use $(this).parent()
//closestDiv.fadeOut();
$('.replyto').not(closestDiv.next('.replyto')).hide();
//$('.reply').closest('div').not(closestDiv).show()
closestDiv.next('.replyto').slideToggle(100);
});
});
This one above is to toggle the "reply" form of comments. It's working on the first level (comments), but not for the subcomments.
$(document).ready(function(){
$(document).on('click' , '.clicktoviewreplies' , function(){
var closestUl = $(this).closest('ul'); // also you can use $(this).parent()
//closestUl.fadeOut();
$('.replies').not(closestUl.next('.replies')).hide();
//$('.clicktoviewreplies').closest('ul').not(closestUl).show()
closestUl.next('.replies').slideToggle(100);
});
});
This one above is to toggle the subcomments or replies. It's something like "show replies" and "hide replies". And this is the whole php code. It's based on four tables: registered_users, videos (although it's not here), comments and subcomments, as you can see.
<?php
while($commentslist = $showcomments->fetch()){
$iduser = $commentslist['idUser'];
$idcomment = $commentslist['id'];
$showuser = $pdo->prepare("SELECT * FROM registered_users WHERE id = ?");
$showuser->execute(array($iduser));
while($row6 = $showuser->fetch()){
<li>
<div>
<b><?php echo $row6['username']; ?></b><br>
<?php echo $commentslist['comments']; ?>
<!--additional comment buttons or controllers-->
<?php
if($iduser == $row['id']){ ?> <button>Edit</button><?php }else{ ?> <button>Report</button><?php } ?> <button class="reply">Reply</button><?php if($iduser == $row['id']){ ?> <a onClick="return confirm('You sure you wanna delete that comment there')" href=""><button>Delete</button></a><?php }
?>
</div>
<div class="replyto">
<!--THIS IS TO SUBMIT THE CHILD COMMENTS(SUBCOMMENTS)-->
<form enctype="multipart/form-data" method="post" action="<?php echo "postsubcomment.php?id=$idcomment"; ?>">
<textarea name="subcomment" cols="50" rows="4"></textarea>
<input type="submit" name="reply" value="Submit">
</form>
</div>
<span class="clicktoviewreplies"><b>View replies</b></span> <!--ATTENTION!HERE IT IS WHERE MY PROBLEM IS. I CLICK ON IT AND IT HIDES ALL "UL"(Unordered Lists) WITH CLASS ".REPLIES" AND NOT ONE BY ONE (SWITCHING) LIKE I'D LIKE. AND WHEN I CLICK ON IT AGAIN, IT DOESN'T RESHOW.-->
<!--SECOND LEVEL UNORDERED LIST-->
<ul class="replies">
<!--Subcomments go/show here. This happens everytime the user replies to a main comment-->
<?php
$showsubcomments = $pdo->prepare("SELECT * FROM subcomments WHERE idComment = ?");
$showsubcomments->execute(array($idcomment));
while($subcommentslist = $showsubcomments->fetch()){
$subcommenter = $subcommentslist['idComment'];
$selectcomment = $pdo->prepare("SELECT * FROM comments WHERE id = ?");
$selectcomment->execute(array($subcommenter));
$row7 = $selectcomment->fetch();
//This is to get the parent comment user
$selectuser = $pdo->prepare("SELECT * FROM registered_users WHERE id = ?");
$selectuser->execute(array($row7['idUser']));
$row8 = $selectuser->fetch();
$subcommentslist['idUser']; //The user that made the subcomment
$selectuser2 = $pdo->prepare("SELECT * FROM registered_users WHERE id = ?");
$selectuser2->execute(array($subcommentslist['idUser']));
$row9 = $selectuser2->fetch();
?>
<!--SECOND LEVEL LIST ITEM: This is to show the subcomments-->
<li>
<div>
<?php echo "<b>".$row9['username']; ?>
<?php echo "<br>".$subcommentslist['subcomments']."<br>"; ?>
<!--additional subcomment buttons or controllers-->
<?php
if($row9['id'] == $row['id']){ ?> <button>Edit</button><?php }else{ ?> <button>Report</button><?php } ?> <button class="reply">Reply</button><?php if($row9['id'] == $row['id']){ ?> <a onClick="return confirm('You sure you wanna delete that comment there')" href=""><button>Delete</button></a><?php }
?>
</div>
<div class="replyto" style="margin-left:5%; position:relative;">
<!--THIS IS TO REPLY TO BOTH THE MAIN COMMENT AND SUBCOMMENTS BELOW IT-->
<form enctype="multipart/form-data" method="post" action="<?php echo "postsubcomment.php?id=$idcomment"; ?>">
<textarea name="subcomment" cols="50" rows="4"></textarea>
<input type="submit" name="reply" value="Submit">
</form>
</div>
</li>
<?php
}//THIRD (SUBCOMMENTS) WHILE CLOSED
?>
</ul> <!--SECOND UNORDERED LIST CLOSED -->
</li>
<?php
} //SECOND WHILE CLOSED
} //FIRST WHILE CLOSED
?>
Well, the first instance (comments) "reply button "behaviour works. Why not the second instance one (reply for subcomments)? I wonder if the problem is the second or third while loop or maybe it has something to do with the "ul" and "li" arrangements.
Well, the boss here will solve these problems for you, man. For the second problem (span:"view replies"), change your code to this:
$(document).ready(function(){
$(".clicktoviewreplies").click(function(){
//$(this).closest('ul').next('.replies').hide();
//$('.replies').
$('.replies').not($(this).next('.replies')).css("display", "none");
$(this).next('.replies').slideToggle(100);
});
});
And also change the text to "show/hide replies". As for the first problem (reply buttons and comment and "subcomment" forms), delete the "style" tag and all css, except the attribute "display: none". Remember that the jQuery or even a Javascript code might have a malfunction since you're using something beyond the class itself needed to identify the element in the code. I don't know how to explain why this happens. So instead of using:
<div class="replyto" style="margin-left:5%; position:relative;">
Use:
<div class="replyto">
And in CSS, use only:
.replyto
{
display: none;
}
And a tip: for a matter of having a well structured and "understable" way of code implementation, you could avoid "style" tags and use only CSS organized in a separated stylesheet document. I hope to have helped you, dude.