2016-04-04 3 views
5

У меня проблема, при которой Typeahead просто перестает работать, когда истекает срок действия пользовательской федерации. Я хотел бы иметь возможность выполнить действие, когда «удаленный» вызов для Typeahead выходит из строя. Как это обрабатывается с помощью Typeahead, в частности? Есть ли какой-то «ошибочный» обратный вызов, как в обычном аякс-вызове? Вот код, который я в настоящее время:Как обрабатывается ошибка с новым Typeahead с Bloodhound?

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") 
    } 
}); 
+0

В этом случае вам необходимо добавить данные проверки, возвращенные с сервера; – itzmukeshy7

+0

Помог ли мой ответ? –

ответ

3

Typeahead'sBloodhound предложение двигателя не хватает средств, чтобы сообщить пользователю, когда возникает проблема с удаленного источника.

Вместо использования Бладхаунда, чтобы получить предложения, вы можете вместо этого использовать источник источника Sourcea (см. here). Указав свой источник здесь, вы можете обрабатывать ошибки и отображать подходящее сообщение пользователю.

Я создал пример здесь:

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

Ключевой частью ответа является исходный код опции ниже:

$('.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); 
    }); 
} 

Опция источника делает использование ГЭТ JQuery в метод для извлечения данных. Любые ошибки, возникающие, обрабатываются методом отказа отложенного объекта. В этом методе вы можете надлежащим образом обрабатывать любые ошибки и отображать подходящее сообщение пользователю. Поскольку функция источника задается тремя параметрами, это приводит к машинописный по умолчанию этот вызов, как асинхронный, поэтому вызов:

asyncResults(results); 
0

попробуйте этот код

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 
     } 
    } 
    } 
}); 
+0

@ Ответ БенСмита очень широк, но если он работает, я считаю, что он самый краткий. –

+1

@AngelJosephPiscola Этот ответ не будет работать с последней версией Bloodhound. Опция 'remote' не имеет опции 'ajax'. См. [Здесь] (https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#remote) –

0

«правильный» способ обработки ошибок добавляет обработчик ошибок для вызова AJAX, используя функцию prepare. Если вы используете опцию wildcard, обратите внимание, что prepare переопределяет ее.

Например, вы можете превратить это:

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

в этом:

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 
       } 
      }); 
     } 
    } 
}); 

объект, возвращаемый prepare используется как объект установок для jQuery.ajax(), так что вы можете обратиться к its documentation.