1

Seems like I have some sort of environmental issue, but I'm not sure how to proceed debugging this.

I am using jQuery-tokeninput and all works well on localhost. However, once moved over to my production box it stops working.

I am using chromes 'Developer Tools' to trouble shoot. The JQuery call is somewhat working as the data is collected from the database and I can see it in the response. Everything looks good, but it just does not render the drop down, and it stuck on 'Searching'. No errors are being thrown in Chrome's 'Developer tools' and I see no related errors in the apache logs.

I'm pretty stuck here as no errors makes it quite hard to trouble shoot.

Any ideas/suggestions would be really appreciated !

EDIT

Although the response of this call is identical between both environments, the full list of header elements is not.

Viewing the headers here are any elements not matching.

Localhost (windows evironment):

Request URL:http://localhost/dropdown_getcontact.php?q=raq
Accept:application/json, text/javascript, */*; q=0.01
X-Requested-With:XMLHttpRequest
Query String Parametersview sourceview URL encoded
q:raq

Production Environment (linux environment):

Request URL:http://localhost/dropdown_getcontact.php?callback=jQuery110204361302594188601_1392780655198&q=raq&_=1392780655199
Accept:*/*
Query String Parametersview sourceview URL encoded
callback:jQuery110204361302594188601_1392780655198
q:raq
_:1392780655199

Cheers, ck

ChrisK
  • 127
  • 1
  • 8
  • Can you post your code? Not a lot to go on here! – Chris Feb 16 '14 at 12:23
  • Although what's the difference between your localhost/production box - are you embedding your localhost page into another? Sounds like it could be duplicate id's or something? – Chris Feb 16 '14 at 12:24
  • As far as the code goes there is no difference between localhost and the production environment. Also, I've put them both in the web root directory in order to make sure it wasn't a path issue. Localhost works, but unfortunately production no luck. – ChrisK Feb 19 '14 at 02:50
  • Using Chrome developer tools to examine results the 'Response' is exactly the same in both localhost and production as printed by: echo json_encode($data); So for some reason after this point one works and the other fails, with no errors being thrown in the production environment. I'm not even sure how to proceed to further trouble shoot at this point. – ChrisK Feb 19 '14 at 03:20
  • Ah. Have you tried hosting `dropdown_getcontact.php` on the production server as well, rather than locally? It's not something I've ever encountered, however apparently there can be cross-domain issues. See: http://loopj.com/jquery-tokeninput/#search-settings (You'd imagine if you can SEE the JSON response, that wouldn't be the issue though. =/ ) Failing that, is the header-type of your response forcing JSON type, and not just text? Not going to lie - I'm clutching at straws too though, sorry! – Chris Feb 19 '14 at 10:14
  • I am hosting dropdown_getcontact.php on both environments. I changed the javascript to reference a relative path $("#get-contacts").tokenInput("./dropdown_getcontact.php" as opposed to $("#get-contacts").tokenInput("http://localhost/dropdown_getcontact.php" and it is now working. Thank you very much for your help I was able to figure this out after your last comment. However, I still don't know why the localhost reference didn't work on production, as all the same files are located there as well. Cheers ! – ChrisK Feb 20 '14 at 15:26
  • I did a little reading up. Cross-domain AJAX calls are forbidden on security grounds - which was what was going wrong here. Glad it helped. =) – Chris Feb 20 '14 at 15:35

1 Answers1

1

A full write-up, for future Googlers:

Cross-Domain AJAX calls are not permitted. To get around this problem, you need to make use of JSONP. There's a nice example of how to do that here.

The jQuery TokenInput plugin automagically detects cross-domain calls, and automatically enables 'JSONP-mode', which is what I imagine was preventing the JSON which was returned being displayed here. I would also guess that Chrome has relaxed rules on cross-domain AJAX requests when localhost is the domain, as it's far less of a security hole. Therefore, your JSON was returned (which it wouldn't have been, had it been hosted on any third domain which was neither localhost, nor your production server.) - yet the plugin was expecting JSONP to be used, and thus couldn't deal with the standard JSON input. A potential small bug in the plugin, if other browsers behave in the same way.

As a point of reference, you can explicitly set whether to be in crossDomain mode through a set-up parameter.

crossDomain = true;

Out of curiosity, try including crossDomain = false in the initiation of your original set up, and see if that works.

Community
  • 1
  • 1
Chris
  • 5,882
  • 2
  • 32
  • 57