Take the 2-minute tour ×

When using the YUI3 Autocomplete widget with a URL source which returns JSON data, is there a simple way to detect HTTP error responses?


Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
    resultHighlighter : 'phraseMatch',
    source : "http://example.com/api/item/search/?q={query}",

(For example, if the user hasn't authenticated on that server, the Autocomplete widget receives a 401 response and fails silently but logs the error to the console.)

I've searched but haven't found documentation specific to this issue - source diving didn't help, either. I think I'll have to roll my own datasource object so I can issue the request and detect the error.

Or is there a simpler way to pass an error event handler to the YUI3 Autocomplete widget for this type of data source?

Edit: See my follow-up answer for a simple solution using Y.on('io:failure').

share|improve this question

2 Answers 2

I think Y.DataSource is the simple way to pass an error handler. You should be able to do something like:

var ds = new Y.DataSource.IO({
  source: 'http://example.com/api/item/search/'

ds.set('ioConfig', {
    on: {
        failure: function (transactionID, ioResponseObj, args) {

  requestTemplate: '?q={query}',
  source: ds

This is from looking at the 'apply' function call at the end of the failureHandler.

Of course note that Same Origin policies apply.

share|improve this answer
That worked perfectly! Thanks. –  Inactivist Apr 6 '12 at 14:25
Erm... well, it works, but using the DataSource.IO method can introduce other complexities and problems... so, while the above method does indeed work, I've been looking for simpler solutions if all I want to do is log or display an error indication. –  Inactivist May 2 '12 at 4:46
up vote 1 down vote accepted

A simple solution: use a global IO failure event handler. It works without the complexity of the DataSource.IO object as described in this answer.

While I would rather handle the error locally in the AutoComplete widget event handlers, alas, I've not found a simple way to do that.

Using Y.on('io:failure') event handling may be a much more direct approach if all you need to do is display info about comms errors.

// Handle IO failure event
function ioFailureFunction(transaction, xhrObject) {
    errCode = xhrObject.status;
    // Insert the current error status into an HTML element...
Y.on('io:failure', ioFailureFunction);

Rationale: I've found that using the DataSource.IO method outlined in this answer may introduce significant complexity, so if you have simple needs, this method is expedient and works with simple AutoComplete configurations -- thus you can keep your AutoComplete config simple and still handle IO errors...

share|improve this answer
Good note. Thanks for the follow up. –  mjhm May 2 '12 at 18:07

Your Answer


