Vince
Vince

Reputation: 1133

Getting "Syntax Error: Unexpected Token" when calling a function from ajax

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:

Return of change_produkt function

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

Upvotes: 1

Views: 6152

Answers (2)

alpham8
alpham8

Reputation: 1362

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.

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337714

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);
}

Upvotes: 3

Related Questions