CODEWITHSUNDEEP
phpjqueryajax
user123
user123

Reputation: 5407

Comment system - Creating post and showing it on the page -1

There are plenty for scripts on web for comment system. But I felt it very confusing. When we want to customize it, it's like as hole.

I want to create my own simple comment box where user can post and comment.

Here is my space to enter post: http://jsfiddle.net/karimkhan/FNcs8/

<lable>Add post </lable><br>
<textarea rows="4" name="Addpost" cols="50" placeholder="Add post"> </textarea>
<input type="submit" value="share"> </input>

Now on button click I can store in the database but how to show in downward each when user enters post and click button? using ajax is jquery which ever efficient and easy I want to show user image near post. Url is coming from table below.

My table from where data is coming is:

CREATE TABLE `user_record` (
  `id` varchar(40) NOT NULL,
  `name` varchar(50) DEFAULT NULL,
  `email` varchar(50) DEFAULT NULL,
  `picture` varchar(50) default NULL  //url for picture
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Guys i will put this entire system on github which help other also to learn. Needs help!

UPDATE 1: ajax.php - for database 

<?php

$con = mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$query= "select * from user_record where id=1660546353";

$result = mysqli_query($con,$query);


//build html format as you need it..
while($row = mysqli_fetch_array($result)){

echo '<div class="comment">'.$row ['name'].'<img src="'.$row ['picture'].'"/></div>';
}
?>

Upvotes: 1

Views: 10532

Answers (3)

Praveen Govind
Praveen Govind

Reputation: 5627

If you are using jquery then use this code

HTML

<label>Add post </label><br>
<textarea id="message" rows="4" cols="50" placeholder="Add post"> </textarea>
<input type="submit" id="submit" value="share"> </input>
<div id="commentsholder"></div>

Javascript

<script type="text/javascript">
$(document).ready(function(){

$('#submit').on('click',function(){
 var commentdata=$("message").val();
  $.ajax({
        type: "POST",
                     data:{ 
            comment: commentdata
                },
        url: "ajax.php",
        success: function(data, textStatus){
            //alert(data);
            $("#commentsholder").append(data);
            }
        },'html');
   });
});
</script>

In ajax.php

//insert comment into database.
//get the user content who are posting it.
<?php

$con = mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$query= "select * from user_record where id=1660546353";

$result = mysqli_query($con,$query);


//build html format as you need it..
while($row = mysqli_fetch_array($result)){

echo '<div class="comment">'.$row ['name'].'<img src="'.$row ['picture'].'"/></div>';
}
?>

That's it.. it should work

Upvotes: 2

Udit Bhardwaj
Udit Bhardwaj

Reputation: 1781

you can use this approach i hope this will help you:-

put a block (ul) which is hidden when there is no comment above your textarea or the textinput in your fiddle.

<ul id="comments" style="display:none"></ul>

<lable>Add post </lable><br>
<textarea  id="cmntinput" rows="4" name="Addpost" cols="50" placeholder="Add post"> </textarea>
<input id="submitbtn" type="submit" value="share"> </input>

now use jquery ajax as on submit/click event

$('#submitbtn').click(function(e)
 {
    e.preventDefault();

    input=$('#cmntinput').val();

    var comment={};

    comment.input=input;

    $.ajax({

            url: 'path/to/php',

            data: comment,

            type: 'POST'

            success: function()

            {


                  $('#comments').append('<li id="cmnt">'+input+</li>)

                  //apply some css changes to `li#cmnt or ul#comments`

                  $('li#cmnt').css({listStleType: 'none'}) //example

                  $('#comments')fadeIn()

            }

            })

           })

you have to use php to get the userdata who is commenting for example if this a login based website like facebook etc then you can create session at login time and can store username on successfull login in $_SESSION. And in the php script that will run on ajax call you can write like

session_start();
user=$_SESSION['userid'];

//retrieve data on the basis of userid from table where you are storing user info like name email etc

//on the basis of retrieved data insert the `$_POST['input']`(comment) in appropriate table

and if you want to show user name, date etc in the new comments appended use the php to prepare the whole string for you

$output="<li id='cmnt'><ul><li id='name'>".$data['name']."<li id='content'>".$_POST['input']."</li></ul></li>


     //$data[] is the array to store user information that you have retrieved about user

and echo it and use it as a response on ajax success to append to ul#comments

Upvotes: 1

R R
R R

Reputation: 2956

better use jquery.what u can do is put ur textarea inside div tag and then u can dynamically change the position of the div.use javascript to change the name of div tag everytime the submit button is pressed.then u can use the following jquery code i found in net best suited for your problem.when u will post the new comment the older post will shift down logically we are swapping their place.

$('.div2:parent').each(function () {
$(this).insertBefore($(this).prev('.div1'));
});

if u want any clarification pls let me know.

Upvotes: 1

Related Questions