I am creating dynamic posts data on ajax call in which i am creating checkboxes also. but checkbox is not clickable. it is being showed on document but not responding on click. no showing tick i mean checked and uncheked states on user clicks. Everything is working fine except checkboxes. I did not done any jquery for checkboxes yet.
In Console i checked checkbox html and id value etc shown properly
here is my code //
if(mysqli_num_rows($result) > 0){
$output = "";
$output .= "<div class='col-12'><p id='content-title'>Fresh Posts</p></div>";
while($row = mysqli_fetch_assoc($result)) {
$title = substr($row['title'],0,25) . '...';
$description = substr($row['description'],0,200) . '...';
$output .= "<div class='col-4'>
<div class='post-content'>
<a href='single-post.php?id={$row['post_id']}' class='post-img'>
<img src='dashboard/uploads/{$row['post_img']}'>";
if(isset($_SESSION['logged-in'])){
$output .= "<input type='checkbox' id='{$row["post_id"]}' value='{$row['post_id']}' class='fav-icon-checkbox'>
<label for='{$row["post_id"]}'><i class='fa fa-heart fav-icon'></i></label>";
}
$output .= "</a>
<div class='post-info-container'>
<div class='post-info'>
<span class='post-author'><a href='#'>{$row['author']}</a></span>
<span class='dot'></span>
<span class='post-category'><a href='category.php?id={$row['category_id']}'>{$row['category_name']}</a></span>
<br>
<span class='post-date'>{$row['date']}</span>
</div>
<h5 class='post-title'>{$title}</h5>
<p class='post-description'>{$description}<a href='single-post.php?id={$row['post_id']}' class='read-more'>read more</a></p>
</div>
</div>
</div>";
}
echo $output;
}
Check the value attribute of the checkbox try changing the single quote :: $row["post_id"].
Related
Im trying to Hide a comments that are not releated with the post above, the problem is that I have a database with all comments, and they are present in every post that I add... I'm trying to add a data-ID for every comments and trying to create a PHP "if" inside a generator post that if doesn't match doesn't show, but I think that i'm going to complicate myself, please help me:
this is a PHP function that create a comment and as you can see I added a data-POSTER that rappresent the ID of the post:
function createCommentRow($data,$utenteloggato) {
global $conn;
if ($utenteloggato == $data['userID']) {
$response = '
<div class="comment" data-postER="'.$data['postID'].'" >
<div class="user">'.$data['name'].' <span class="time">'.$data['createdOn'].'</span></div>
<div class="userComment" >'.$data['comment'].'</div>
<div class="reply">REPLY</div>
<div class="replies">
<a id="option1"
data-id="'.$data['id'].'"
data-option="'.$data['tipo'].'"
href="javascript:void(0)"
onclick="goDoSomething(this);">
Delete
</a> ' ;
}
else
{
$response = '
<div class="comment" data-postER"'.$data['postID'].'" >
<div class="user">'.$data['name'].' <span class="time">'.$data['createdOn'].'</span></div>
<div class="userComment" data-postID="'.$data['postID'].'">'.$data['comment'].'</div>
<div class="reply">REPLY</div>
<div class="replies">
' ;
}
$sql = $conn->query("SELECT replies.id, name, comment, tipo, DATE_FORMAT(replies.createdOn, '%e/%c/%Y %T') AS createdOn, userID, postID FROM replies INNER JOIN users ON replies.userID = users.id WHERE replies.commentID = '".$data['id']."' ORDER BY replies.id DESC LIMIT 1");
while($data = $sql->fetch_assoc())
$response .= createCommentRow($data,$utenteloggato);
$response .= '
</div>
</div>
';
return $response;
}
inside ad another php I show all the post from database table "post", everything work fine, but inside this div where the comments go to display:
<div class="userComments" data-postID="'.$data['id'].'" > </div>
I want put a IF condition that if the value of data-postER from the comments doesn't much with the data-postID from class="userComments" it doesn't show up. Thanks to everybody
Since you are creating a big piece of html inside the $response...
How about, adding (just for the example I will use line by line) few or one line at a time with an if when coming in the line of userComment so for example:
else
{
$response = '
<div class="comment" data-postER"'.$data['postID'].'" >
<div class="user">'.$data['name'].' <span class="time">'.$data['createdOn'].'</span></div>
<div class="userComment" data-postID="'.$data['postID'].'">'.$data['comment'].'</div>
<div class="reply">REPLY</div>
<div class="replies">
' ;
}
this becomes this:
else {
$response .= '<div class="comment" data-postER"'.$data['postID'].'" >';
$response .= '<div class="user">'.$data['name'].' <span class="time">'.$data['createdOn'].'</span></div>';
if($data['postID'] == $data['id']){
$response .= '<div class="userComment" data-postID="'.$data['postID'].'">'.$data['comment'].'</div>';
}
$response .= '<div class="reply">REPLY</div>';
$response .= '<div class="replies">';
}
This and now you either created the userComments or didn't...
You can ofcourse insert more than one line at a time but I wanted to illustrate it...
Also I would recommend not building the whole html inside a variable... rather building the html and inserting variables into it like this:
?><div class="comment" data-postER="<?php echo $data['postID'];?>" >
This way you embed php variables inside a healthy lookin html ...:)
I have a form with textarea and dropzone for uploading images, and submit button. When the submit button is clicked - new comment is created and textarea content is saved to database, with all images added to dropzone (they are stored on server and in the database).
I'm trying to load div that contains comments via ajax, and below every comment there should be displayed all images for that particular comment.
I'm calling function like this:
<div id="comments_ticket_div"><?php echo commentsTicketList($id); ?></div>
And this is my function with mysql queries and output:
function commentsTicketList($id){
global $dbh1;
$query = $dbh1->query("SELECT a.*, b.avatar, b.first_name, b.last_name FROM `tickets_comments` AS a
INNER JOIN users AS b
ON a.tickets_comments_user = b.user_id
WHERE tickets_comments_parent = $id AND comments_parent=0 ORDER BY a.tickets_comments_date DESC");
$data = "";
while ($a_row = mysqli_fetch_array( $query )) {
$tickets_comments_id = $a_row['tickets_comments_id'];
$data .= '<span class="timeline-seperator text-center"> <span>'.$a_row['tickets_comments_date'].'</span></span>
<div class="btn-group pull-right"></div></span>
<div class="chat-body no-padding profile-message">
<ul>
<li class="message">
';
if (!empty ($a_row['avatar'])){
$data .= '<img src="'.ASSETS_URL.'/img/avatars/'.$a_row['avatar'].'-50.png" alt="User" class="" />
';
} else {
$data .= '<img src="'.ASSETS_URL.'/img/avatars/sunny.png" alt="User" class="" />';
}
$data .= '
<span class="message-text"> '.$a_row['first_name'].' '.$a_row['last_name'].' <!--small class="text-muted pull-right ultra-light"> 2 Minutes ago </small-->
'.$a_row['tickets_comments_body'].'
<div id="refresh-gallery">';
$queryx = $dbh1->query("SELECT img_url FROM `tickets_attachments` WHERE parent_comment_id = $tickets_comments_id AND parent_ticket_id = $id");
while ($b_row = mysqli_fetch_array( $queryx )) {
$data .= '<p>'.$b_row['img_url'].'</p>';
}
$data .= ' </div>
<ul class="list-inline font-xs">
<!--li>
<i class="fa fa-reply"></i> Odgovori
</li-->
<!--li>
ObriĊĦi
</li-->
</span>
</ul>
<!--input id="replubtn" name="replubtn" class="form-control input-xs" placeholder="Type and enter" type="text"-->
</li>
</ul>
</div>';
}
return $data;}
On success I'm loading that div with comments:
$("#comments_ticket_div").load( "<?php echo $_SERVER['REQUEST_URI'];?> #comments_ticket_div" );
And also div with query to get all img's for that comment:
$('#refresh-gallery').load("/.../.../.../edit-ticket2.php?id=<?php echo $id;?> #refresh-gallery");
As a result of this code, loading is working properly for all comments and image names are shown correctly (correct number of images and their names), but not for the last comment. The last comment is showing ALL images, but it should display only those images which belong to that last added comment (as the queryx is indicating above).
This has been solved...in the example given above I was loading #comments_ticket_div, and than later in code I was trying to load #refresh-gallery div that was inside of #comments_ticket_div - and that somehow created a problem.
For the solution, I removed loading of #refresh-gallery div, and apllied loading of #comments_ticket_div in Dropzone .on success function.
myDropzone.on("success", function (file) {
$('#comments_ticket_div').load("/../../../edit-ticket2.php?id=<?php echo $id;?> #comments_ticket_div");
});
$i = 0;
while($row = $statement->fetch()) {
$current_id = 'id-' . $i;
$i++;
echo "
<tr>
<td>
<p>
<button class='btn btn-primary'
type='button'
data-toggle='collapse'
data-target='#<?=$current_id?>'
aria-expanded='false'
aria-controls='Collapse'>
Button with data-target
</button>
</p>
<div class='collapse' id='<?=$current_id?>'>
<div class='card card-block'>
Here is the content for block which will be shown when the button. This uses button with data-target attribute for collapsing.
</div>
</div>
</td>
";
}
Where is my error? It doesn't collapse but I need the unique ids for my rows.
now it work. What i have to do now:
$ccid = "#$current_id";
$ccid2 = "$current_id";
And then i have put the variables inside of ID and Href Like this:
href='".$ccid."'
id='".$ccid2."'
That fixxed this problem. Thanks to all!
I have a query that returns a row of values
<?php
$chapter_title = $story_data['chapter_title'];
and i have an href link that shows a modal when clicked
echo "<a href='#deleteModal' name='$chapter_title' >delete chapter</a>";
which shows
echo "<div id='deleteModal' class='modalDialog'>
<div>
<h3>Delete Chapter Confirmation </h3><h3 style = 'color:red'> $chapter_title</h3><hr>
<div style='display:inline-block;width:auto%'>
<text>You are about to delete this chapter. <br />It cannot be restored at a later time! <br />Do you still want to continue?</text>
<br><br>
<div id='create_btn'><a href=''>Delete</a></div>
<div id='cancel_btn'><a href=''>Cancel</a></div>
<br><br>
</div>
</div>
</div>";
?>
but i am having a problem in displaying the correct $chapter_title. Even when i click the delete button of the second row, it still shows the title of the first row. Please help me on what to do.
Instead of
<h3 style = 'color:red'> $chapter_title</h3>
Try echoing the content
<h3 style = 'color:red'><?php echo $chapter_title; ?></h3>
Correction
<a href='#deleteModal' name='<?php echo $chapter_title; ?>' >delete chapter</a>
I'd like to show the first 5 names in a list and toggle the display of any additional names as a single block.
I've currently got the names list as an array object though I'm happy to change it to an array if the solution would be simpler with that.
Here's what I have so far which is *in*complete because I don't know how to create the hidden div of names:
PHP
$names_count=0;
echo '<div id='nameList' class='toggler'>';
foreach($names as $name){
echo '<a id='name'.$name->acct_id.'>'.$name->full_name.'</a>';
if($names_count<=4){
echo '</div><!--toggler div-->';
}
else
<div class='namesList' style='display:none'>
//put additional names in hidden div?
</div>
}
$names_count++;
} //endforeach
JS:
UPDATE Sorry for the confusion. This isn't really a javascript question so I deleted that tag but I'm including the following jQuery code snippet for completeness with the PHP
$('.toggler').click(function(){
var id=this.id;
$('#'+id).toggle();
});
PHP
$names_count = 0;
echo '<div id="nameList" class="toggler">';
foreach($names as $name) {
echo '<a id="name' . $name->acct_id . '">' . $name->full_name . '</a>';
if ($names_count == 4) {
echo '</div><div class="hidden">';
}
$names_count++;
}
echo '</div>';
JS
$('.toggler').click(function(){
$(this).next().toggle();
});
CSS
.hidden {
display: none;
}
Here's an example with two while loops.
$names = array('Bob', 'Andy', 'Tim', 'Max', 'Roger', 'John', 'Test');
$nameCount = count($names);
$nameIndex = 0;
echo '<div id="nameList" class="toggler">';
// Show the first 5 names.
while ($nameIndex < min(5, $nameCount)) {
$name = $names[$nameIndex++];
echo '<a id="name' . $name . '">' . $name . '</a>';
}
// Show the remaining names in a hidden div.
if ($nameIndex < $nameCount)
{
echo '<div class="hiddenNames" style="display:none">';
while ($nameIndex < $nameCount) {
$name = $names[$nameIndex++];
echo '<a id="name' . $name . '">' . $name . '</a>';
}
echo '</div>';
}
echo "</div>";
That code produces the following output.
<div id="nameList" class="toggler">
<a id="nameBob">Bob</a>
<a id="nameAndy">Andy</a>
<a id="nameTim">Tim</a>
<a id="nameMax">Max</a>
<a id="nameRoger">Roger</a>
<div class="hiddenNames" style="display:none">
<a id="nameJohn">John</a>
<a id="nameTest">Test</a>
</div>
</div>
It also safe if you have less than 5 names; the script would produce :
<div id="nameList" class="toggler">
<a id="nameBob">Bob</a>
<a id="nameAndy">Andy</a>
<a id="nameTim">Tim</a>
</div>
For the JS, I would probably do something along the lines of :
$('.toggler').click(function(){
$('.hiddenNames').toggle();
});
Even if the code is a bigger, I find it easier to follow and probably easier to maintain in the long run. (Opinion)
Hope this helps!
To make a <div> hidden:
<div style="display: hidden"></div>
Then the jQuery should make it visible with the .toggle() command.