12

Select2にAjaxRemoteデータの読み込みを実装しようとしています：-

 $scope.configPartSelect2 =  {
        minimumInputLength: 3,
        ajax: {
            url: "/api/Part",
           // beforeSend: function (xhr) { xhr.setRequestHeader('Authorization-Token', http.defaults.headers.common['Authorization-Token']); },
          //  headers: {'Authorization-Token': http.defaults.headers.common['Authorization-Token']},
            data: function (term, page) {
                return {isStockable: true};
            },
            results: function (data, page) {
                // parse the results into the format expected by Select2.
                // since we are using custom formatting functions we do not need to alter remote JSON data
                  return { results: data };

            }
        }
    };

AngularJSを使用しています。Httpリクエストごとに、Authtokenをヘッダーとして使用するようにデフォルトで設定しました。しかし、どういうわけか、Select2Ajaxリクエストと組み合わせて機能していません。上記のコードで、コメントされたコードは私の失敗した試みです。

4

6 に答える 6

16

これは、認証トークンの送信を修正した方法です。これを Select2 ajax param として追加するだけです。

transport: function(params){
    params.beforeSend = function(request){
        request.setRequestHeader("Authorization", 'OAuth ' + api_access_token);
    };
    return $.ajax(params);
},
于 2014-05-19T11:25:28.637 に答える
15

select2 のデモページから取得:

Select2 は、ajax オブジェクトのすべてのオプションを jQuery の $.ajax 関数、または指定したトランスポート関数に渡します。

JQuery 2+ を使用して、OAuth 2.0 と Content-Type ヘッダーを正常に設定できました。

ajax: {
    headers: {
        "Authorization" : "Bearer "+Cookies.get('accessToken'),
        "Content-Type" : "application/json",
    },
}
于 2015-03-01T13:11:54.280 に答える
7

別のオプション：

ajax: {
    url: '/api/Part',
    params: { headers: { "Authorization": "XXX" } },
    ...
}
于 2014-08-20T14:17:32.693 に答える
3

カスタムトランスポートメソッドを提供することで上記の問題を解決しました..次に、マウスホバーでドロップダウンアイテムが選択されず、クリック後にドロップダウンアイテムが選択されないという問題が発生しました。デバッグ後、返されたjsonオブジェクトにはプロパティ「id」が必要であることがわかりました。

以下は私のコードです： -

    var fetchPart = function (queryParams) {

        var result = http.get(queryParams.url, queryParams.data).success(queryParams.success);

    result.abort = function() {
        return null;
    };
    return result;
};

var partFormatResult = function (part) {
    return "<div><h4>" + part.PartNumber + "</h4><p>"+ part.PartDescription + "</p></div>";
};

var partFormatSelection = function (part, container) {
    console.log(part.Id + "number - " + part.PartNumber);
    return part.PartNumber;
//    return part.PartNumber;
    //return part.Id;
};

$scope.configPartSelect2 =  {
    minimumInputLength: 3,
    ajax: {
        url: "/api/Part",
        data: function (term, page) {
            return { params: { isStockable: true, query: term, pageNo: page } };
        },
        transport: fetchPart,
        results: function (data, page) {
            console.log("result is called by select2");
            var more = (page * 10) <= data.length; // whether or not there are more results available
            return { results: data, more: more };
        }
    },
    formatResult: partFormatResult,
    formatSelection: partFormatSelection,
    dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller
};
于 2012-10-30T14:53:07.800 に答える