web-dev-qa-db-ja.com

Select2呼び出し時に動的Ajax URLを使用する

Select2プラグイン（v 3.5.2）をAjaxで使用して、リストの要素を動的にロードします。

Select2の初期化（ajaxヘルパーでurlプロパティが設定されている）とajax呼び出しが行われる時間の間に問題があるため、このurlを変更する必要がある場合があります。

だから私はこのようなものを持っています：

$box.select2({
    containerCssClass: "form-control"
    minimumInputLength: 0,
    allowClear: true,
    ajax: {
       url: someUrl,
       dataType: 'json',
       quietMillis: 100,
...
}

いつ、どこでajax.url値を変更してから起動するのかわかりません。

Select2の助けは言う：

Select2は、jQueryの$.ajax関数を使用して、デフォルトでリモート呼び出しを実行します。代替のtransport関数をajax設定で指定するか、ajaxヘルパーを使用する代わりにカスタムquery関数を提供することにより、完全にカスタムの実装を構築できます。

しかし、私はそれを行う方法の例を見つけることができません。

助けてくれてありがとう。とても有難い。

jquery-select2jquery-select2-3
13
Pascal Luxain

いつ、どこで、どのようにajax.url値を起動する前に変更するのかわかりません。

ajax.urlオプションは、静的文字列、またはSelect2 3.5.xと4.0.0の両方で1を返すメソッドとして指定できます。

$("select").select2({
  ajax: {
    url: function () {
      return UrlHelper.RemoteAPI();
    }
  }
});

これはbase URLを変更する場合に便利です。たとえば、URLが実行時に決定されるか、別のメソッドで自動的に生成される場合などです。 クエリパラメータを変更する必要がある場合（検索用語の送信に使用されるものなど）は、ajax.dataオプションをオーバーライドする必要があります。

$("select").select2({
  ajax: {
    data: function (args) {
      // args is the search term in 3.5.x

      // args is an object containing the query parameters in 4.0.0
      // args.term is the search term in 4.0.0
      return {
        search: args.term || args;
      };
    }
  }
});

ここのデータはデフォルトでクエリパラメータとして追加され、メソッドタイプがGET（デフォルト）から他のタイプに変更された場合にリクエストの本文として送信されます。

Select2は、jQueryの$ .ajax関数を使用して、デフォルトでリモート呼び出しを実行します。代替トランスポート関数をajax設定で指定できます。または、ajaxヘルパーを使用する代わりにカスタムクエリ関数を提供することにより、完全にカスタムの実装を構築できます。

しかし、私はそれを行う方法の例を見つけることができません。

Select2では、ajax.transportオプションを変更することで、別のAJAXトランスポートを使用できます。

3.5.2では、これは$.ajax互換メソッドである必要があるため、successおよびfailureコールバックを含むオブジェクトを取得できる必要があります。

$("select").select2({
  ajax: {
    transport: function (args) {
      // args.success is a callback
      // args.failure is a callback

      // should return an object which has an `abort` method.
      return $.ajax(args);
    }
  }
});

4.0.0では、これはparamsオブジェクト（ajax.dataに渡されるものと同じもの）、successコールバック、およびfailureを受け取るメソッドである必要があります折り返し電話。

$("select").select2({
  ajax: {
    transport: function (params, success, failure) {
      var $request = $.ajax(params);

      $request.then(success);
      $request.fail(failure);

      return $request;
    }
  }
});
22
Kevin Brown

同じことを処理する非常に単純なJavascriptコードは、Suitescript（Netsuite）でも使用できます。

// prepare your dynamic URL inside this method and return
function getURL() {
     return url + params;
}

// While binding the select2 with the dropdown set url to call a anonymous function which internally calls another function.
jQuery("select.itemDropDown").select2({
    placeholder: "Select an item",
    width: "200px",
    minimumInputLength: 3,
    ajax: {
        url: function() {
            return getURL()
        },
        dataType: 'json'
    }
});
2
susant