Come viene gestita l'errore con la nuova Typeahead con Bloodhound?

Question

Ho un problema in cui Typeahead semplicemente smette di funzionare quando la sessione utente federata scade. Mi piacerebbe essere in grado di eseguire un'azione quando la chiamata "remota" per Typeahead fallisce. In che modo questo è gestito in particolare da Typeahead? C'è una sorta di callback di "errore" come si troverebbe in una tipica chiamata ajax? Ecco il codice che ho attualmente:

var hints = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    remote: { 
     url: "/ProjectAssociation/CountryLookup?query=%QUERY", 
     wildcard: "%QUERY" 
    } 
}); 
$("#assocStoragesSelection").typeahead(null, { 
    name: "nations", 
    limit: 90, 
    valueKey: "ShortCode", 
    displayKey: "Name", 
    source: hints, 
    templates: { 
     empty: [ 
      "<div class='noitems'>", 
      "No Items Found", 
      "</div>" 
     ].join("\n") 
    } 
}); 

Answer 1

Typeahead'sBloodhound motore suggerimento è carente di strutture per informare l'utente quando si verifica un problema con una sorgente remota.

Invece di utilizzare Bloodhound per ottenere i suggerimenti, è possibile utilizzare l'opzione di origine sorgente di Typeahead (vedere here). Specificando qui la fonte, è possibile gestire gli errori e visualizzare un messaggio adatto all'utente.

ho creato un esempio qui:

http://jsfiddle.net/Fresh/oqL0g7jh/

La parte fondamentale della risposta è codice di opzione fonte illustrato di seguito:

$('.typeahead').typeahead(null, { 
    name: 'movies', 
    display: 'value', 
    source: function(query, syncResults, asyncResults) { 
    $.get(_url + query, function(movies) { 

     var results = $.map(movies.results, function(movie) { 
     return { 
      value: movie.original_title 
     } 
     }); 

     asyncResults(results); 
    }).fail(function() { 
     $('#error').text('Error occurred during request!'); 
     setTimeout("$('#error').text('');", 4000); 
    }); 
} 

L'opzione source sta facendo uso di get di jQuery metodo per recuperare i dati. Eventuali errori che si verificano vengono gestiti dal metodo Fail di oggetto posticipato. Con questo metodo è possibile gestire in modo appropriato eventuali errori e visualizzare un messaggio adatto all'utente. Poiché la funzione sorgente è specificato con tre parametri, questo provoca typeahead to default questa chiamata asincrona, quindi la chiamata a:

asyncResults(results); 

Answer 2

provare questo codice

var hints = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    remote: { 
     url: "/ProjectAssociation/CountryLookup?query=%QUERY", 
     wildcard: "%QUERY", 
     ajax: { 
     error: function(jqXHR) { 
      //do some thing 
     } 
    } 
    } 
}); 

Answer 3

Il modo "giusto" per gestire gli errori è l'aggiunta di un gestore di errori alla chiamata AJAX, utilizzando la funzione prepare. Se si utilizza l'opzione wildcard, notare che prepare lo sostituisce.

Ad esempio, è possibile trasformare questo:

new Bloodhound({ 
    remote: { 
     url: REMOTE_URL, 
     wildcard: '%s' 
    } 
}); 

in questo:

new Bloodhound({ 
    remote: { 
     url: REMOTE_URL, 
     prepare: function(query, settings) { 
      return $.extend(settings, { 
       url: settings.url.replace('%s', encodeURIComponent(query)), 
       error: function(jqxhr, textStatus, errorThrown) { 
        // show error message 
       }, 
       success: function(data, textStatus, jqxhr) { 
        // hide error message 
       } 
      }); 
     } 
    } 
}); 

L'oggetto restituito dal prepare è usato come un oggetto impostazioni per jQuery.ajax() in modo da poter fare riferimento a its documentation.