2012-10-30 9 views
8

tarihinde Ajax isteğine Özel Başlıkları geçme: - Biz angularjs kullananBiz 2'yi Seç Ajax Uzaktan veri yükleme uygulamak için çalışıyoruz Select2

$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 }; 

      } 
     } 
    }; 

. Her bir Http isteği ile, Authtoken'ı başlık olarak almak için varsayılan ayarını yaptık. Ama bir şekilde Select2 Ajax isteği ile birlikte çalışmıyor. Yukarıdaki kodda, yorumlanan kod benim başarısız girişimlerimdir.

+0

kabul cevap 2012 yılında tek seçenek olabilirdi, ama bugün [Bu cevap] (http://stackoverflow.com/a/28793936/ 971557) herkes için çalışmalı. –

cevap

5

Taken:

Select2 jQuery'nin $ .ajax işlevine ajax nesnesinde herhangi seçenekleri veya taşıma işlevini size geçecek belirtin.

JQuery 2+ kullanarak OAuth 2.0 ve Content-Type üstbilgilerini başarıyla ayarlayabildim.

ajax: { 
    headers: { 
     "Authorization" : "Bearer "+Cookies.get('accessToken'), 
     "Content-Type" : "application/json", 
    }, 
} 
3

Özel taşıma yöntemi sağlayarak yukarıdaki sorunumu çözdüm. Sonra tıklatıldıktan sonra seçili olmayan fare imleci & açılan öğesinde seçilemeyen açılan öğeyle sıkışmıştım. Hata ayıklamadan sonra geri döndü json nesnesinde olması gereken "id" proeprty'yi buldum.

Aşağıda benim kodudur: - Ben Yetkilendirme jetonu gönderme sabit nasıl

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 
}; 
14

budur. Sadece bunu Select2 ajax param olarak ekleyin;

transport: function(params){ 
    params.beforeSend = function(request){ 
     request.setRequestHeader("Authorization", 'OAuth ' + api_access_token); 
    }; 
    return $.ajax(params); 
}, 
+0

teşekkürler. Bu çok yararlı :) – thangchung

+2

teşekkürler, bu benim için çalışan tek çözüm! – Rob

+0

Hiçbir değişiklik olmadan çalıştı. – itzmukeshy7

5

başka bir seçenek: Select2 demo sayfasından

ajax: { 
    url: '/api/Part', 
    params: { headers: { "Authorization": "XXX" } }, 
    ... 
} 
0

Böyle yapabilirsiniz:

transport: function (params, success, failure) { 

    params.beforeSend = function (request) { 
     request.setRequestHeader("Authorization-Token", http.defaults.headers.common['Authorization-Token']); 
    }; 
    var $request = $.ajax(params); 

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

    return $request; 
}