2014-07-17 24 views
0

댓글을 달고 싶습니다. 내 mysql 데이터베이스에 댓글을 달고, 제출 한 후 바로 내 페이지에 새로운 댓글을 달아줍니다. 하지만 어쨌든 새로운 코멘트를보기 위해 언제나 새로 고침해야하며, 제출을 두 번 이상 클릭하면 새로 고침 후 중복 된 댓글이 표시됩니다. 어떻게 그 문제를 해결할 수 있습니까? ... 내가 좀 멍청한 놈, 그래서 내 코드는 내가 아직 완전히 이해하지 못하는 튜토리얼에서 대부분이다clear form and show new comment jquery php

내 PHP 페이지 :

<?php 

// Error reporting: 
error_reporting(E_ALL^E_NOTICE); 

include "connect.php"; 
include "comment.class.php"; 

$comments = array(); 
$result = mysql_query("SELECT * FROM comments ORDER BY id ASC"); 

while($row = mysql_fetch_assoc($result)) 
{ 
$comments[] = new Comment($row); 
} 

?> 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>Bausatz</title> 
    <meta name="" content=""> 

    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/main.css"> 
    <script src="js/modernizr-2.7.1.min.js"></script> 
    <style type="text/css"></style> 


    <link href='http://fonts.googleapis.com/css?family=Montserrat:400' rel='stylesheet'  
type='text/css'> 
</head> 


<body> 

<header> 
<div class="logo"> 
<span class="col">ON THE </span>W<span class="col">OODWAY</span> 
</div> 

<nav> 
<a href="travels.html">TRAVELS</a> 
<a href="blog.html">BLOG</a> 
<a href="me.html">ME</a> 
</nav> 
</header> 

<div class="main"> 


<div class="contentwrapper"> 

<div class="entry"> 
</div> 


<div class="comment"> 

<div id="each"> 
<?php 
foreach($comments as $c){ 
echo $c->markup(); 
} 
?> 
</div> 


<div id="addCommentContainer"> 
<p>Add a Comment</p> 
<form id="addCommentForm" method="post" action=""> 
    <div> 
     <label for="name">Your Name</label> 
     <input type="text" name="name" id="name" /> 

     <label for="email">Your Email</label> 
     <input type="text" name="email" id="email" /> 

     <label for="body">Comment Body</label> 
     <textarea name="body" id="body" cols="20" rows="5"></textarea> 

     <input type="submit" id="submit" value="Submit" > 
    </div> 
</form> 

</div> 

</div> 




</div> 
</div> 






<div class="unten"> 
<nav> 
<a href="#">contact</a> 
<a href="#">copyright</a> 
</nav> 
</div> 






    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"> 
<\/script>')</script> 
    <script type="text/javascript" src="js/comment.js"></script> 
    </body> 
</html> 

jQuery를 :

$(document).ready(function(){ 

var working = false; 

$('#addCommentForm').submit(function(e){ 

    e.preventDefault(); 
    if(working) return false; 

    working = true; 
    $('#submit').val('Working..'); 
    $('span.error').remove(); 

    /* Sending the form fileds to submit.php: */ 
    $.post('submit.php',$(this).serialize(),function(msg){ 

     working = false; 
     $('#submit').val('Submit'); 


     if(msg.status){ 

      $(msg.html).hide().insertBefore('#addCommentContainer').slideDown(); 
      $('#body').val(''); 
     } 
     else { 

      $.each(msg.errors,function(k,v){ 
       $('label[for='+k+']').append('<span class="error">'+v+'</span>'); 
      }); 
     } 
    },'json'); 

}); 

}); 

comment.class.php

<?php 

class Comment 
{ 
private $data = array(); 

public function __construct($row) 
{ 
    /* 
    / The constructor 
    */ 

    $this->data = $row; 
} 

public function markup() 
{ 
    /* 
    / This method outputs the XHTML markup of the comment 
    */ 

    // Setting up an alias, so we don't have to write $this->data every time: 
    $d = &$this->data; 

    $link_open = ''; 
    $link_close = ''; 



    // Converting the time to a UNIX timestamp: 
    $d['dt'] = strtotime($d['dt']); 

    return ' 

     <div class="comment"> 

      <div class="name">'.$link_open.$d['name'].$link_close.'</div> 
      <div class="date" title="Added at '.date('H:i \o\n d M  
Y',$d['dt']).'">'.date('d M Y',$d['dt']).'</div> 
      <p>'.$d['body'].'</p> 
     </div> 
    '; 


} 

public static function validate(&$arr) 
{ 
    /* 
    / This method is used to validate the data sent via AJAX. 
    /
    / It return true/false depending on whether the data is valid, and populates 
    / the $arr array passed as a paremter (notice the ampersand above) with 
    / either the valid input data, or the error messages. 
    */ 

    $errors = array(); 
    $data = array(); 

    // Using the filter_input function introduced in PHP 5.2.0 

    if(!($data['email'] = filter_input(INPUT_POST,'email',FILTER_VALIDATE_EMAIL))) 
    { 
     $email = ''; 
    } 



    // Using the filter with a custom callback function: 

    if(!($data['body'] =  
    filter_input(INPUT_POST,'body',FILTER_CALLBACK,array('options'=>'Comment::validate_text'))) ) 
    { 
     $errors['body'] = 'Please enter a comment body.'; 
    } 

    if(!($data['name'] =  filter_input(INPUT_POST,'name',FILTER_CALLBACK,array('options'=>'Comment::validate_text')))) 
    { 
     $errors['name'] = 'Please enter a name.'; 
    } 

    if(!empty($errors)){ 

     // If there are errors, copy the $errors array to $arr: 

     $arr = $errors; 
     return false; 
    } 


    foreach($data as $k=>$v){ 
     $arr[$k] = mysql_real_escape_string($v); 

    } 


    $arr['email'] = strtolower(trim($arr['email'])); 

    return true; 

} 

private static function validate_text($str) 
{ 

    if(mb_strlen($str,'utf8')<1) 
     return false; 

    $str = nl2br(htmlspecialchars($str)); 

    $str = str_replace(array(chr(10),chr(13)),'',$str); 

    return $str; 
} 

} 

?> 

submit.php

0 12,311,217,376,

connect.php

<?php 

$db_host  = '*****'; 
$db_user  = '*****'; 
$db_pass  = '*****'; 
$db_database  = '*****'; 



$link = @mysql_connect($db_host,$db_user,$db_pass) or die('Unable to establish a DB connection'); 

mysql_query("SET NAMES 'utf8'"); 
mysql_select_db($db_database,$link); 

?> 

답변

0

왜 코멘트의 나머지를 추가하지 마십시오?

$(msg.html).hide().insertBefore('#addCommentContainer').slideDown(); 

이 사람 :이

변경

$(msg.html).hide().appendTo('#each').slideDown(); 
+0

내가 어쩌면 slidedown 효과가 어떻게 든 작동하지 않는 생각 .. 지금 제출 한 후 취소 양식을 얻을,하지만, 난 여전히 필요 댓글을 보려면 새로 고침하세요. –

+0

나는 slidedown을 삭제하고 location.reload를 넣었으므로 이제는 작동하지 않습니다;) –

+0

@AnnikaFriese 주석 마크 업을 모두 포함하지는 않았지만 여기에는'와 함께 작동하는 바이올린이 있습니다. slideDown()''each '에 추가합니다. [FIDDLE] (http://jsfiddle.net/Jd7UW/) – ethorn10