CODEWITHSUNDEEP
javascriptphpjqueryajax
Harry
Harry

Reputation: 167

AJAX syntax error PHP response

In the console I am getting this response from my PHP script, sent through AJAX. 

Uncaught Error: Syntax error, unrecognized expression: 100this    <div class="comment-item">
  <div class="comment-post">
    <h3>Andrew D: <span>17th March 2014</span></h3>
    <p>hi</p>
  </div>
</div>

I am not sure why I am getting this though? It is stopping my success function from outputting the data properly. Below is my AJAX code: 

    $(document).ready(function(){
  var form = $('form');
  var submit = $('#submit');
  form.on('submit', function(e) {
      e.preventDefault();
      $.ajax({
          url: 'ajax_comment.php',
          type: 'POST',
          cache: false,
          data: form.serialize(),
          beforeSend: function(){
              submit.val('Posting...').attr('disabled', 'disabled');
          },
          success: function(data){
            var data_code = data.substring(0,3);
            var return_message = data.substring(3); // this is return message without code

            if(data_code == 100) { 
              var item = $(return_message).hide().fadeIn(800);
              $('.new-comment').append(item);

              form.trigger('reset');
              submit.val('Submit Comment').removeAttr('disabled');
            } else if(data_code == 200) {
              //its a fail
              alert("Error: " + return_message);
            }
         }
      });
  });
});

This gets sent to the PHP script shown below.

  if(empty($order_id) === true || empty($comment) === true) {
    echo "200comment or order id is empty";
    exit();
} else if($num_rows_reviewed> 0) {
    echo "200";
    exit();
} elseif($no_id_match == 0) {
    echo "200";
    exit();
} elseif(strlen($comment) > 499) {
   echo "200 comment cannot be bigger then 499";
    exit();
} else {
   echo"100"; // all is good
   ?>  <div class="comment-item">
         <div class="comment-post">
           <h3><?php echo $name; ?>: <span><?php echo $date; ?></span></h3>
           <p><?php echo $comment; ?></p>
         </div>
       </div>
   <?php }

I really do not know what I am doing wrong here. Please can someone help?

Many thanks in advance!

Upvotes: 3

Views: 541

Answers (1)

Anthony Grist
Anthony Grist

Reputation: 38345

It's the space between 100 and your HTML causing the jQuery code to fail. While the jQuery method is heavily overloaded to do a number of things, the version that parses a string of HTML to create new DOM elements doesn't like leading whitespace. Either remove it from your PHP file or call .trim() on return_message:

var item = $(return_message.trim()).hide().fadeIn(800);

As an aside, you'd be better off using JSON to return an object that has both data_code and return_message properties, rather than relying on splitting strings. You'd create an associative array in your PHP then use the json_encode function to echo out the JSON representation (and I just about used up all of my PHP knowledge).

Upvotes: 3

Related Questions