jQuery token-input not processing cross-domain results

Question

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.

score 0 · Answer 1 · edited May 23 '17 at 12:04

0

As you can see in jQuery Tokeninput documentation, crossDomain must be set as true in options, if you want to it to be a jsonp request.

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

and The right JSON content type is application/json.

header('Content-type: application/json');

UPDATE:

Ok if it's not working with jsonp you should try it by enabling CORS.

Here what you will do,

$(function() {
  $("#token").tokenInput("http://localhost/token/search?callback=jsonprocess", {
    preventDuplicates: true,
    crossDomain: false, //it's also false as default.
  });
});

in PHP you must enable CORS, and you don't need to take result into the callback function. you will dump only JSON.

header("Access-Control-Allow-Origin: *");
header('Content-type: text/javascript');
echo json_encode($token_array);
exit;

edited May 23 '17 at 12:04

Community

1
1

answered Nov 28 '12 at 01:12

Okan Kocyigit

12,633
18
64
119

Good spot, I missed the crossDomain flag when copying my code across. I've amended my question. I've changed the header to `application/json` but it is still not working. It is still just triggering the callback method and not processing the results in the success callback. – xylar Nov 28 '12 at 13:43
@xylar Ok, look my updated answer. And Have you checked http://localhost/token/search, Is that a right JSON result? And have you checked console for extension, what javascript error are you getting? – Okan Kocyigit Nov 28 '12 at 14:47
yes that's right, than you should accept your own answer. It will help people who has same problem with you. – Okan Kocyigit Nov 28 '12 at 15:55

score 0 · Accepted Answer · answered Nov 28 '12 at 14:17

0

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

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

answered Nov 28 '12 at 14:17

xylar

6,537
12
48
93

score 0 · Answer 3 · answered Nov 28 '12 at 14:51

0

Dude you need callback in javascript and php like this:

javascript:

script.php?callback=?&your_parametars_here

and in php

echo $_GET['callback'].$your_data_here

answered Nov 28 '12 at 14:51

pregmatch

2,235
5
23
60

Thanks, I think my problem was that I had set a value for callback=jsonprocess and I didn't need to add it, see my answer. – xylar Nov 28 '12 at 14:58

jQuery token-input not processing cross-domain results

3 Answers3

UPDATE:

Linked