Question

I’ve been reading and testing a lot about it and could not get the JQuery Autocomplete work with JSONP with a REST service I created.

Here’s my javascript:

$( "#input" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://localhost:8080/Rest/api/suggest/",
                dataType: "jsonp",
                data: {
                    jsonpCallback : "p",
                    q: request.term
                },
                success: function( data ) {

                    response( $.map( data.suggestions, function( item ) {
                        return {
                            label: item.LABEL,
                            value: item.URI
                        }
                    }));
                }
            });
        },
        minLength: 2
});

And the JSONP object would be a standard JSON object wrapped in a

p({});

callback function given via ?jsonpCallback=p to the REST API. The javascript/html code runs locally under http://localhost:8888 server.

To view data response I need to define in my javascript the “p” callback function

 function p(data){
        alert(data.toSource());
    }

If I take it off nothing works, but what I don’t understand is why the JQuery Autocomplete example code works without any callback function and above all why the drop down results form autocomplete don’t show off. What am I supposed to do with the callback function in order to make the drop down autocomplete feature works?

Thank you all,
Daniele

Answer 1

I believe jQuery will automatically append jsonCallback=? when the datatype is ‘jsonp’. It uses a random number as the callback function name, but in this case the success: function serves as the callback. Is your function p() ever called? It also should not be quoted. It’s a function reference, not a string.

I’d leave off this:

data: {
   jsonCallback : "p"

But this will mean your REST service will need to be a bit smarter and get the jsonCallback cgi parameter and use that value as the function wrapper for your json.

UPDATE @Daniele

Re: “how do I know the random name Jquery assigns to the callback function?”

That will depend on what programming language you are using for your REST Service. Here are two examples, Perl and PHP:

#!/usr/bin/perl
use CGI ":cgi";
$jsonCallback = $q->param('jsonCallback');
$json = ...
print header(
    -type => 'application/json'
);

print $jsonCallback . '(' if $jsonCallback;
print $json;
print ')' if $jsonCallback

PHP

 <?php
     $jsonCallback = $_GET['jsonCallback'];
     $json = ...
     echo $jsonCallback . '(';
     echo $json;
     echo ')';
  ?>