2016-04-04 4 views
5

ユーザーフェデレーションセッションの有効期限が切れたときにTypeaheadが機能しなくなるという問題があります。 Typeaheadの「リモート」呼び出しが失敗したときにアクションを実行できるようにしたいと考えています。これは特にTypeaheadでどのように扱われますか?典型的なajax呼び出しで見つかるような、ある種の「エラー」コールバックがありますか?Bloodhoundで新しいTypeaheadでエラー処理がどのように行われますか?

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このコードを試してみてください。ここに私は現在持っているコードです。

Bloodhoundを使用して候補を取得する代わりに、Typeaheadのソースソースオプションを使用することもできます(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の取得を利用していますメソッドを呼び出してデータを取得します。発生したエラーは、遅延オブジェクトの失敗メソッドによって処理されます。この方法では、エラーを適切に処理し、適切なメッセージをユーザーに表示することができます。 、AJAX呼び出しにエラーハンドラを追加して

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

@ BenSmithの答えはエレガントですが、これが一番うまくいくと私は信じています。 –

+1

@AngelJosephPiscolaこの回答はBloodhoundの最新バージョンでは動作しません。 'remote'オプションには 'ajax'オプションはありません。 [ここ](https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#remote)を参照してください。 –

0

エラーを処理する「正しい」方法を:ソース関数は、3つのパラメータで指定されているように、これは、先行入力された文字が故にコールに、非同期としてこのコールをデフォルトになり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によって返されたオブジェクトが使用されている設定は、あなたがits documentationを参照することができjQuery.ajax()用として。

関連する問題