AJAX syntax error PHP response

Question

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!

Well first you are not echo'ing the <div>'s out properly. You are getting to the echo"100" if you want to echo out the div add the echo '<div class="comment-item">'; — Chitowns24
– Chitowns24, Commented Mar 17, 2014 at 16:11
comparing result of empty() with true is useless. empty() returns boolean. — tarmaq
– tarmaq, Commented Mar 17, 2014 at 16:12
I dont know if it's anything to do with that. but you forget space in echo"100" — OfirH
– OfirH, Commented Mar 17, 2014 at 16:12

Anthony Grist · Accepted Answer · 2014-03-17 16:17:29Z

3

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

answered Mar 17, 2014 at 16:17

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Harry Over a year ago

Pure genius! This works perfectly. I cannot thank you enough Anthony.

Collectives™ on Stack Overflow

AJAX syntax error PHP response

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related