Система комментариев - создание сообщения и его отображение на странице -1

Question

Существует множество сценариев для веб-сайтов для комментариев. Но я чувствовал, что это очень запутанно. Когда мы хотим настроить его, это как дыра.

Я хочу создать свой собственный простой блок комментариев, где пользователь может публиковать и комментировать.

Вот мое пространство, чтобы ввести сообщение: 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> 

Теперь на кнопку мыши можно хранить в базе данных, но как показать в вниз каждый, когда пользователь вводит сообщение и нажмите кнопку? использование ajax - это jquery, который когда-либо был эффективным и легким. Я хочу показать изображение пользователя рядом с сообщением. Url идет из таблицы ниже.

Моя таблица, откуда данные поступают в:

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; 

Ребята я положу всю эту систему на GitHub, которые помогают другим и учиться. Нуждается в помощи!

UPDATE 1: ajax.php - для базы данных

<?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>'; 
} 
?> 

Answer 1

Если вы используете JQuery, то используйте этот код

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> 

В 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>'; 
} 
?> 

Вот именно .. он должен работа

Answer 2

Я надеюсь, что у вас есть основные из HTML и баз данных. Я надеюсь, что эта ссылка поможет вам

http://tutorialzine.com/2010/06/simple-ajax-commenting-system/

Answer 3

лучше использовать jquery.what и может сделать, это положить ур текстовое поле внутри сНу тега, а затем и может динамически изменять положение div.use Javascript, чтобы изменить название div каждый раз, когда нажата кнопка отправки. Затем вы можете использовать следующий код jquery, который я нашел в сети, наиболее подходящей для вашей проблемы. Когда вы опубликуете новый комментарий, более старая почта будет смещаться логически, мы заменяем свое место.

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

Если у вас есть какие-либо разъяснения, сообщите мне.

Answer 4

вы можете использовать этот подход я надеюсь, что это поможет вам: -

поставил блок (ul), которая скрыта, когда нет ни одного комментария выше вашего текстового поля или TextInput в вашей скрипке.

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

теперь использовать JQuery Ajax, как на отправить/нажмите событие

$('#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() 

      } 

      }) 

      }) 

вы должны использовать PHP, чтобы получить UserData, который комментирует, например, если это Войти на основе сайта как Facebook и т.д., то вы может создать сеанс во время входа в систему и может сохранить имя пользователя при успешном входе в систему $_SESSION. И в PHP скрипт, который будет работать на Ajax вызова вы можете написать как

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 

и если вы хотите, чтобы показать имя пользователя, дата и т.д. в новых комментариях прилагается Используйте PHP подготовить всю строку для вас

$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 

и эхо его и использовать его в качестве ответа на Ajax успеха для добавления к ul#comments