2017-03-28 10 views
0

現在、4.0.3バージョンを使用しているgem rails-select2でレールにselect2を使用しています。Select2 ajaxがレールで動作しない

私はselect2のajaxバージョンを動作させることができません。データを配列として設定した静的バージョンは、ajaxバージョンでは動作しません。

エラーは発生せず、バックエンドではajaxコールがありません。

selectはselect2スタイルで空になり、入力しても何もしません。

問題のある場所をデバッグまたは理解する方法はありますか?

<select class="js-data-example-ajax" style="width:100%"> 
<option value="3620194" selected="selected">Select a value......</option> 
</select> 

JavaScriptを:ビューで

:私は次のコード例を使用してい

$(".js-data-example-ajax").select2({ 
    ajax: { 
    url: "https://api.github.com/search/repositories", 
    dataType: 'json', 
    delay: 250, 
    data: function (params) { 
     return { 
     q: params.term, // search term 
     page: params.page 
     }; 
    }, 
    processResults: function (data, params) { 
     // parse the results into the format expected by Select2 
     // since we are using custom formatting functions we do not need to 
     // alter the remote JSON data, except to indicate that infinite 
     // scrolling can be used 
     params.page = params.page || 1; 

     return { 
     results: data.items, 
     pagination: { 
      more: (params.page * 30) < data.total_count 
     } 
     }; 
    }, 
    cache: true 
    } 

}); 

これは私が得たものである: enter image description here

javascriptコンソールとすべてのエラーにエラーはありません私は配列データを使用する場合(私はselect2のインポートで問題はないと思うので)働いています。

問題がどこにあるのかを正しく理解するために、問題をよりよくデバッグする方法を見つける必要があります。

答えて

0

クロスドメインリクエストに問題がある可能性があります。ブラウザのコンソールを調べる必要があります。

0

私はこの例がなぜ機能しないのかはわかりませんが、このスニペットはselect2railsに実装するためにはうまくいくでしょう。 私はgem 'select2-rails', '4.0.3'gem 'rails', '~> 5.0.0'

これはVehicleController

で車両を検索するための方法であり、.jsファイルでこれを追加し、 html selectorurlオプション

document.addEventListener("turbolinks:load", function(){ 
    if ($(".select-vehicle")) { 
    $(".select-vehicle").select2({ 
     theme: 'bootstrap', 
     allowClear: true, 
     minimumInputLength: 1, 
     dataType: 'json', 
     ajax: { 
     url: '/admin/vehicles/search', 
     delay: 250, 
     data: function(params) { 
      return { vin: params.term } 
     }, 
     processResults: function (data, params) { 
      return { 
      results: $.map(data, function(value, index){ 
       return {id: value.id, text: value.vin}; 
      }) 
      }; 
      cache: true 
     } 
     } 
    }); 
    } 
}) 

を変更を使用

def search 
    if params[:vin].present? 
     vehicles = Vehicle.where("vin LIKE ?", "%#{params[:vin]}%") 
     render json: vehicles.map{|v| v.serializable_hash(only: [:id, :vin]) } 
    else 
     render json: [] 
    end 
    end 

これはselect2の簡単な実装です。有用かどうか教えてください。

関連する問題