I'm getting Syntax Errors when calling a php file with ajax.

Uncaught SyntaxError: Unexpected token F
Uncaught SyntaxError: Unexpected token F
Uncaught SyntaxError: Unexpected token F
Uncaught SyntaxError: Unexpected token F
Uncaught SyntaxError: Unexpected token F
Uncaught SyntaxError: Unexpected token F

The change_produkt function is called with an onclick event in a checkbox field. The output of this function is as following:

Now, I call the second function fill_optionen and pass the arrays to that function. It's doing ajax calls for each object. (6 times in this case)

Javascript:

function fill_optionen(optionen) {
     console.log("fill_optionen called.."); // Debug
     var text = "";

     $j.each(JSON.parse(optionen), function (index, value) {

        jQuery.ajax({
           url: 'include/mutation_helper.php',
           data: {func: "render_opt", option: value},
           type: 'post',
           success: function(output) {
              console.log(JSON.parse(output)); // Debug

           }
        });
     });
  }

function change_produkt() {
     console.log("change_produkt called.."); // Debug

     var id_produkt = $j("#produkt").val();
     console.log("DEBUG -- id_produkt:"+id_produkt);

     jQuery.ajax({
        url: 'include/mutation_helper.php',
        data: {func: "get_opts", produkt: id_produkt},
        type: 'post',
        success: function(output) {
           console.log(JSON.parse(output)); // Debug

           fill_optionen(output);
        }
     });
  }

PHP:

function render_opt() {
    if(!isset($_POST['option'])) {
      echo json_encode("error");
      exit;
    }

    $opt = $_POST['option'];

    $render = render($opt, $_SESSION['mutation']);

    echo json_encode("hello");
}

As soon as I remove the line which calls the render function, it works. But why is there an error? I'm not even printing out that $render variable. (The render function only returns html code in a string.)

I'm getting Syntax Errors when calling a php file with ajax.

Uncaught SyntaxError: Unexpected token F
Uncaught SyntaxError: Unexpected token F
Uncaught SyntaxError: Unexpected token F
Uncaught SyntaxError: Unexpected token F
Uncaught SyntaxError: Unexpected token F
Uncaught SyntaxError: Unexpected token F

The change_produkt function is called with an onclick event in a checkbox field. The output of this function is as following:

Now, I call the second function fill_optionen and pass the arrays to that function. It's doing ajax calls for each object. (6 times in this case)

Javascript:

function fill_optionen(optionen) {
     console.log("fill_optionen called.."); // Debug
     var text = "";

     $j.each(JSON.parse(optionen), function (index, value) {

        jQuery.ajax({
           url: 'include/mutation_helper.php',
           data: {func: "render_opt", option: value},
           type: 'post',
           success: function(output) {
              console.log(JSON.parse(output)); // Debug

           }
        });
     });
  }

function change_produkt() {
     console.log("change_produkt called.."); // Debug

     var id_produkt = $j("#produkt").val();
     console.log("DEBUG -- id_produkt:"+id_produkt);

     jQuery.ajax({
        url: 'include/mutation_helper.php',
        data: {func: "get_opts", produkt: id_produkt},
        type: 'post',
        success: function(output) {
           console.log(JSON.parse(output)); // Debug

           fill_optionen(output);
        }
     });
  }

PHP:

function render_opt() {
    if(!isset($_POST['option'])) {
      echo json_encode("error");
      exit;
    }

    $opt = $_POST['option'];

    $render = render($opt, $_SESSION['mutation']);

    echo json_encode("hello");
}

As soon as I remove the line which calls the render function, it works. But why is there an error? I'm not even printing out that $render variable. (The render function only returns html code in a string.)

• javascript
• php
• jquery
• ajax

• 1 As a side note, instead of calling multiple ajax requests in a loop, you'd have better to call only once with all values to pass and set logic server side – A. Wolff Commented Jan 26, 2015 at 11:02
• according to your code, this line $render = render($option, $_SESSION['mutation']); should be $render = render($opt, $_SESSION['mutation']); ? – Flakes Commented Jan 26, 2015 at 11:03
• @SearchAndResQ You're right. But the errors are still there. – Vince Commented Jan 26, 2015 at 12:02
• 1 If the error disappears as soon as you remove the render function call, but that function itself produces no output – then perhaps it/calling it is generating an error message/warning instead? Look at the actual response your AJAX call is getting in the network panel of your browser’s developer tools – what does that look like? – C3roe Commented Jan 26, 2015 at 12:25
• 1 Of course you do, otherwise those messages are part of the response your AJAX request gets, and invalidate the JSON. – C3roe Commented Jan 26, 2015 at 12:37

2 Answers 2

It seems that you have an PHP error inside your render function. And then PHP prints out its error, which later causes the JavaScript error. Because JSON is excepted as returned output by the ajax request and you got a string back containing the PHP error message. Please look at your browser debugger under the ajax request raw network data, what is really returned.

jQuery will automatically detect a JSON response and deserialise it for you. Calling JSON.parse on the resulting object will cause errors - as you've seen. Try this:

success: function(output) {
    console.log(output); // Debug
    fill_optionen(output);
}