comment system jQuery/ajax php mysql

Question

im currently working on a comment system but I don't know how to fix this bug.. When I write something into the text area and press submit, then nothing happens. The link to the file is correctly! When I dont enter anything into the textarea, then it shows the given error.

Here is the comment.php file

<script type="text/javascript">
    function toggle_comment(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

    $(function() {

$(".submit").click(function() {

    var comment = $("#comment").val();
    var dataString = 'comment=' + comment;

    if(comment=='')
     {
    alert('Please Give Valide Details');
     }
    else
    {
    $("#flash").show();
    $("#flash").fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle">&nbsp;<span class="loading">Loading Comment...</span>');
$.ajax({
        type: "POST",
  url: "index.php?s=comment",
   data: dataString,
  cache: false,
  success: function(html){

  $("#flash").hide();

  }
 });
}
return false;
    });



});
</SCRIPT>


<a class="sitelinksblue" onclick="toggle_comment('commentfield');" style="font-family: Verdana, Geneva, sans-serif;font-size:12px;font-weight:bolder;">+ Kommentar abgeben für Englisch Für Anfänger</a>
<?php
if($_POST) {
$sqlCmd = "INSERT INTO topmovies.comments 
        (username,comment,date) 
        VALUES 
        ('".mysql_real_escape_string($_SESSION['user_username'])."','".mysql_real_escape_string($_POST["comment"])."','".$sqlZeit."')";
$sqlQry = mysql_query($sqlCmd,$sqlHp);
if (!$sqlQry) {
    die('Invalid query: ' . mysql_error());
}else { echo'Comment Added!';}
}
?>

<div id="commentfield" style="display:none">
    <form method="POST" action="#">
        <p>Dein Name: <?PHP echo $_SESSION['user_username']; ?></p>
        <textarea class="interfaceforms" name="comment" id="comment" rows="5" cols="20" maxlength="1555" value=""></textarea><br />
        <input type="submit" class="submit" value="Submit" />
    </form>
</div>
<?php
$sql=mysql_query("select * from topmovies.comments ORDER BY date DESC");
while($row=mysql_fetch_array($sql))
{
$username=$row['username'];
$comment=$row['comment'];
$date=$row['date'];
$name=$row['name'];
?>

<div id="comments" name="comments">
<div class="comments" style="padding-top:5px;">
        <BR>
    <table width="746px" style="display:inline;" border="0" cellspacing="0" cellpadding="0">
        <tr>
        <td rowspan="4" valign="top" width="154px" style="padding-right:19px;"><img style="display: block; padding-top:10px;" src="http://img.movie4k.to/img/user_top.gif" height="8px"/>
        <span class="test"><?php echo $username; ?><br />
        <br />
        <font size=1><?PHP echo date("d-m-Y", strtotime($date))?></br>
        <?PHP echo date("H:i", strtotime($date))?></font></span>
        <img style="display: block; background-color: #AFAFAF; padding-left:10px; padding-right:10px;" src="http://img.movie4k.to/userpics/476090.gif" width=40 height=50/>
        <img style="display: block;" src="http://img.movie4k.to/img/user_bottom.gif" height="8px"/></td>
        <td colspan="2" valign="bottom" height="8px"><img style="display: block; padding-top:10px;" src="http://img.movie4k.to/img/comment_top2.gif" height="8px"/></td>
        </tr>
        <tr>
        <td rowspan="2" width="522px" class="comment" valign="top" bgcolor="#E3E3E3" style="padding-left:10px; padding-right:17px;">
        <?php echo $comment; ?>
        </td>
        <td width="85px" valign="top" bgcolor="#E3E3E3" style="font-size:19px;">
        </td>
        </tr>
        <tr>
        <td bgcolor="#E3E3E3" valign="bottom"></td>
        </tr>
        <tr>
        <td colspan="2" valign="top" height="8px"><img style="display: block;" src="http://img.movie4k.to/img/comment_bottom2.gif" height="8px"/></td>
        </tr>
    </table>
</div>
</div>
<BR />
<?php
}
?>

Hope someone knows whats wrong! And maybe can give me some tipps for security/better performance etc.

Answer 1

try to add error event into your ajax call so that if there is the error into your ajax request then it will shows the error. do something like:

 $.ajax({
     type: "POST",
     url: "index.php?s=comment",
     data: dataString,
     cache: false,
     success: function(html){
         $("#flash").hide(); // no DOM found with id flash this is also the error 
     },
     error: function(e){
         alert("something wrong with ajax "+ e); // OR
         console.log(e)
     }
 });

Answer 2

Your error can be generated by various causes, but at least your code is supposed to have a div with id named flash .

 <div id='flash'>...</div>`

There aren't such div on your HTML parts.