CODEWITHSUNDEEP
phpjqueryajax
Craig Howell
Craig Howell

Reputation: 1194

AJAX calls unexpectedly running twice in Chrome

I am new to AJAX and just learning the ropes. My problem is that all of my AJAX calls are running twice. Below is all of the code and images:

Javascript

function loadComments() {
    var custid = $('#custid').val();
    $.ajax({
      type: 'POST',
      url: 'php/loadComments.php',
      // async: false,
      data: {
        custid: custid
      },
      success: function(response){
        $('#comments-feed').html(response);
      }
    });
  }

  function saveComments() {
    var custid = $('#custid').val();
    var comment = $('#comment').val();
    var username = $('#username').val();
    $.ajax({
      type: 'POST',
      url: 'php/saveComment.php',
      data: 'custid='+custid+'&username='+username+'&comment='+comment
    }).done(function() {
      loadComments();
      $('#comment').val('');
    });
  }

  $(document.body).on('click touchstart','#comment-submit',function() {
    saveComments();
  });

HTML/PHP

<section id="section-underline-5" class="">
  <div class="row">
    <div class="col-md-12 comments-feed" id="comments-feed">
      <?php 
        if ($comments != 0) {
          for ($r=0;$r<$comLength;$r++) {
            echo '<div class="panel panel-default comment"><div class="panel-heading">'.$comments[$r][0].'<div class="pull-right"><small>'.$comments[$r][1].'</small></div></div><div class="panel-wrapper collapse in" aria-expanded="true"><div class="panel-body"><p>'.$comments[$r][2].'</p></div></div></div>';
           }
         }
       ?>
     </div>
   </div>
   <div class="row comment-input">
     <div class="col-md-12">
       <form id="comment-form" name="comment-form">
         <div class="input-group">
           <input type="hidden" class="form-control" value="<?php echo htmlspecialchars($username); ?>" id="username" name="username">
           <input type="text" class="form-control input-lg" placeholder="Post Comment" id="comment" name="comment"> 
           <span class="input-group-btn">
             <button class="btn btn-success btn-lg" type="button" id="comment-submit" name="comment-submit">Post</button>
           </span>
         </div>
       </form>
     </div>
   </div>
 </section>

loadComments.php

<?php
include('connection.php');
$custid = $_POST['custid'];

    $sqlUpdate = "SELECT comdate, comuser, comment FROM commentstbl WHERE custid='".$custid."' ORDER BY comdate DESC";
  $qryUpdate = mysqli_query($db,$sqlUpdate);

  $comCntsql = "SELECT COUNT(comuser) AS totalcom FROM commentstbl WHERE custid='".$custid."'";
  $comCntresult = mysqli_query($db,$comCntsql);
  $comCount = mysqli_fetch_array($comCntresult,MYSQLI_ASSOC);
  if ($comCount['totalcom'] > 0) {
    while ($row = mysqli_fetch_array($qryUpdate)) {
      $date = $row["comdate"];
      $date = date("n/j/Y", strtotime($date));
      $user = $row["comuser"];
      $comment = $row["comment"];

      $comments[] = array($user,$date,$comment);
    }
  } else {
    $comments = 0;
  }
  $comLength = count($comments);
    if ($comments != 0) {
        for ($r=0;$r<$comLength;$r++) {
          echo '<div class="panel panel-default comment"><div class="panel-heading">'.$comments[$r][0].'<div class="pull-right"><small>'.$comments[$r][1].'</small></div></div><div class="panel-wrapper collapse in" aria-expanded="true"><div class="panel-body"><p>'.$comments[$r][2].'</p></div></div></div>';
        }
      }
?>

saveComment.php

<?php
include('connection.php');

$custid = mysqli_real_escape_string($db, $_POST['custid']);
$postdate = date('Y-m-d H:i:s');
$poster = $_POST['username'];
$comment = mysqli_real_escape_string($db, $_POST['comment']);


$statement = $db->prepare("INSERT INTO commentstbl (custid, comdate, comuser, comment) VALUES (?,?,?,?)");
$statement->bind_param('isss', $custid, $postdate, $poster, $comment);
$statement->execute();

?>

Here is an image of the Chrome developer tool showing that it is calling the php files twice when I click the #comment-submit button:

enter image description here

I am at a loss for this problem. What can I try next?

Upvotes: 2

Views: 124

Answers (1)

Imanuel
Imanuel

Reputation: 3667

You trigger the function twice because you bind both click and touchstart ;)

Upvotes: 3

Related Questions