• 使用方法

Ajax

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

使用方法

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

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

• endpoint はリクエストエンドポイントへの URL でなければなりません。
• method はsetData または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エラーをキャッチすることができます。