Ajax

Ajax は、サーバからリストデータを取得してレンダリングするためのdroplabプラグインです。

使用方法

DropLab.prototype.init またはDropLab.prototype.addHook 呼び出しの plugins 配列にAjax オブジェクトを追加します。

Ajax には2つの設定値、endpointmethodが必要です。

  • endpoint はリクエストエンドポイントへの URL でなければなりません。
  • methodsetData またはaddData
  • setData はドロップダウンをレスポンスデータで完全に置き換えます。
  • addData レスポンスデータを現在のドロップダウンリストに追加します。
<a href="#" id="trigger" data-dropdown-trigger="#list">Toggle</a>
<ul id="list" data-dropdown><!-- ... --><ul>
const droplab = new DropLab();

const trigger = document.getElementById('trigger');
const list = document.getElementById('list');

droplab.addHook(trigger, list, [Ajax], {
  Ajax: {
    endpoint: '/some-endpoint',
    method: 'setData',
  },
});

オプションでloadingTemplate に HTML 文字列を設定することができます。 リクエストが保留されている間、この HTML 文字列がドロップダウンリストを置き換えます。

さらに、onError を関数に設定することで、XHRエラーをキャッチすることができます。