[jQuery]Uncaught SyntaxError: Unexpected token {

Question

I have searched through all the similar topics here, but can't find information that leads the solving of my specific problem. I get a

Uncaught SyntaxError: unexpected token {.

By taking away sections of code at a time, I found the following function to cause the problem:

add_action( 'wp_footer', 'render_edu_hook_javascript' );

function render_edu_hook_javascript() { ?>
    <script type="text/javascript">
    var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";

    $("#edu_institute").focusOut(function () {
        var data = {
            'action': 'render_edu_hook',
            'institute': $('#edu_institute').val()
        };

        jQuery.post(ajaxurl, data, response){
            console.log(response);
            $( "#edu_programme" ).autocomplete({
                response
            });
        };
    });
    </script> <?php
};

Answer 1

jQuery.post(ajaxurl, data, response){

This is wrong. I don't know what it should be, but it's wrong. Fix that.

Answer 2

Your jQuery.post call does not seem that correct:

jQuery.post(ajaxurl, data, response){
    console.log(response);
    $( "#edu_programme" ).autocomplete({
        response
    });
};

Shouldn't that be

jQuery.post(ajaxurl, data, function (response) {
    console.log(response);
    $( "#edu_programme" ).autocomplete({
        response
    });
});

Please see the documentation of jQuery.post for further information.

Btw, you can also use the newer API:

jQuery.post(ajaxurl, data).done(function (response) {
    console.log(response);
    $( "#edu_programme" ).autocomplete({
        response
    });
});

Answer 3

Try change jquery post into this form, response is returned value from success callback i guess, then you should wrapped it inside function block :

jQuery.post(ajaxurl, data, function(response){
   console.log(response);
   $( "#edu_programme" ).autocomplete({
       response
    });
});