Search code examples
phpjavascriptgoogle-chrome-extensioncross-domainjquery-tokeninput

jQuery token-input not processing cross-domain results


I'm creating a chrome extension which uses http://loopj.com/jquery-tokeninput/ to add tokens, see previous question.

I am confused as to how to get results from my server to be processed by tokenInput. The following article, What is JSONP?, suggests that I need to add a callback query param to get cross-domain jsonp working:

$(function() {
  $("#token").tokenInput("http://localhost/token/search?callback=jsonprocess", {
    preventDuplicates: true,
    crossDomain: true,
  });
});

This is used to wrap the response in my php code:

header('Content-type: text/javascript');
echo $this->request->query('callback') . '(' . json_encode($token_array) . ')';
exit;

Which then calls the jsonprocess() method in my javascript. However this is out of context of the tokenInput instance so I can't populate the results. Is this the correct functionality? Or is there a way to make the jQuery tokeninput plugin process the jsonp directly?

The success callback in tokeninput:

ajax_params.success = function(results) {
    cache.add(cache_key, $(input).data("settings").jsonContainer ? results[$(input).data("settings").jsonContainer] : results);
    if($.isFunction($(input).data("settings").onResult)) {
        results = $(input).data("settings").onResult.call(hidden_input, results);
    }
};

...is never called.


Solution

  • Easier than I thought; don't need ?callback=jsonprocess in the search url

    $(function() {
      $("#token").tokenInput("http://localhost/token/search", {
        preventDuplicates: true,
        crossDomain: true,
      });
    });