40435

Append to current div element in a while loop only

Good day everyone,

I have the following code structure. This code structure loads a page with different post subject and content on it. For each loaded post, a user can leave a comment. Have a look at the following code:

<?php $getposts = "SELECT * FROM posts"; if ($result = $con->query($getposts)) { while ($row1 = $result->fetch_assoc()) { $id = $row1['id']; $subject = $row1['sub']; $content = $row1['body']; $comments = $row1['comments']; echo" <div class='content_wrap'> <div class='subject'>$subject</div> <div class='content'>$content</div> <div class='comment'>$comments</div> </div> "; ?> <form id='reply' autocomplete="off"> <input type="hidden" value="<?php echo $id;?>" name="id" id="pid"/> <input type="text" name="comment" id="comment" placeholder="Type a commmment here..."></input> </form> <?php } } ?> <script type="text/javascript"> $('form').submit(function () { var comment = $(this).find('input[name=comment]').val(); var id = $(this).find('input[name=id]').val(); $.post("comments_ins.php", { pub_id: id, comment: comment}); $(this).parent().children('.content_wrap').append("<div class='comment'" + comment + "</div"); var comment = $(this).find('input[name=comment]').val(''); return false; }); </script>

All of the above codes I currently have in one page...and the file is a php file type.

Notice that there is a form generated for each loaded post on the page according to the while loop. The code above works about 90 percent correct. But one thing I don't seem to get right. I want that when a user leaves a comment, that the comment displays on the page for that post only....nut all of the loaded posts on the page. So, if a user types a first comment, it is visible, and, if the user types another comment on to that same post, the new comment falls under the previous comment posted....and is visible ....so that it appends to a div element each time a user types a comment.

How do I go about accomplishing this?

If you look at my javascript above, I made an attempt but it did not work for me.

Guidance would be appreciated. Thanks

Answer1:

try appending an ID to your divs so you can locate them more easily

$id = $row1['id']; $subject = $row1['sub']; $content = $row1['body']; $comments = $row1['comments']; echo" <div class='content_wrap'> <div class='subject' id=subject_$id>$subject</div> <div class='content' id=content_$id>$content</div> <div class='comment' id=comment_$id>$comments</div> </div> ";

This should let you append to only the div you want it on.

Recommend

  • PDO throwing error if MYSQL_ATTR_INIT_COMMAND is used
  • Foreach loop using string to output XML
  • How to realize UIPickerView with RXSwift
  • PHP code displaying as comments in browser using WAMP [closed]
  • adding the same object twice
  • Highchart Treemap: forcing layout on 3 lines
  • Arrange forum posts by time of latest reply
  • PHP - sending email with attachment does not show message content
  • How to reply a tweet using the Twitter gem?
  • get latest text entry of GROUP BY statement
  • Serverless Framework Dynamo DB Table Resource Definition with Sort Key
  • how to convert open xml representation of word document into RTF format using c#.net 4.0?
  • Retrieving a double from a JTextArea while solving for X
  • Whats the right place for testhelper-classes? (phpunit/best practise)
  • Cloud Code function running twice
  • Diff between two dataframes in pandas
  • Stop Bash Script if Hive Fails
  • How to add git credentials to the build so it would be able to be used within a shell code?
  • Do I need to reset a Perl hash index?
  • Use of this Javascript
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Display Images one by one with next and previous functionality
  • Upload files with Ajax and Jquery
  • jQuery tmpl and DataLink beta
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • SQL merge duplicate rows and join values that are different
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Proper way to use connect-multiparty with express.js?
  • How to set the response of a form post action to a iframe source?
  • Java static initializers and reflection
  • How to stop GridView from loading again when I press back button?
  • How does Linux kernel interrupt the application?
  • unknown Exception android
  • Observable and ngFor in Angular 2
  • Unable to use reactive element in my shiny app
  • git trying to push non-existent file … after clearing cache