AJax가 부트 스트랩과 함께 작동하지 않습니다.

flask-jquery-ajax example 사용자가 차량 "Make"드롭 다운 메뉴에서 항목을 선택하면 AJAX에서 모델 목록을 요청하여 차량 "Model"드롭 다운 메뉴가 채워집니다 make가 선택되었습니다. AJax가 부트 스트랩과 함께 작동하지 않습니다.

나는 의해 드롭 다운 메뉴를 교체하려고 최대한 빨리 그것을 더 이상 후 채워하지 않는 두 번째 드롭 다운 메뉴에서 클래스 = "selectpicker 양식 제어"을 포함로 부트 스트랩-선택하고 첫 번째 드롭 다운이 선택되었습니다.

이

은 HTML 템플릿입니다 :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Flask Jquery AJAX Drop Down Menu Example</title> 

    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" > 
    <link rel="stylesheet" type="text/css" href=//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css> 
    <link rel="stylesheet" href="{{ url_for('static', filename='web.css') }}"> 

    <!-- Custom styles for this template --> 
    <link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet"> 
</head> 
<body> 
    <h1>Select Vehicle</h1> 

    <form class="form-horizontal" action="/" method="POST" > 
     <div class="input-group"> 
    <span class="input-group-addon">Make:</span> 
    {{ form.make(id="make_select", class="selectpicker form-control") }} 
     </div> 

     <div class="input-group"> 
    <span class="input-group-addon">Model:</span> 
    {{ form.model(id="model_select", class="selectpicker form-control") }} 
     </div> 
     <button type="submit">Submit</button> 
    </form> 

    {% if chosen_make %} 
     <h2>You selected:</h2> 
     <ul> 
      <li>Make ID: {{ chosen_make }}</li> 
      <li>Model ID: {{ chosen_model }}</li> 
     </ul> 
    {% endif %} 

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script> 
    <script> 
    $('.selectpicker').selectpicker(); 
    </script> 
    <script src="/assets/vehicle.js"></script> 
</body> 
</html>

이 드롭 다운 메뉴를 채우기에 대한 책임 자바 스크립트 code입니다 :

$("#make_select").change(function() { 
    var make_id = $(this).find(":selected").val(); 
    var request = $.ajax({ 
     type: 'GET', 
     url: '/models/' + make_id + '/', 
    }); 
    request.done(function(data){ 
     var option_list = [["", "--- Select One ---"]].concat(data); 

     $("#model_select").empty(); 
     for (var i = 0; i < option_list.length; i++) { 
      $("#model_select").append(
       $("<option></option>").attr(
        "value", option_list[i][0]).text(option_list[i][1]) 
      ); 
     } 
    }); 
});

왜 클래스 = "selectpicker 양식 제어"을한다 부트 스트랩에서을 선택하면 두 번째 드롭 다운 메뉴가 더 이상 표시되지 않습니다. AJAX 후

출처

2014-10-04 user977828

이 완료, 당신은 플러그인을 다시로드해야 : 최대

$('#model_select').selectpicker('refresh');

또는

success: function(data) 
{ 
    $("#model_select").html(data).selectpicker('refresh'); 
}

출처

2014-10-08 23:20:24

완벽한 해답 .. 엄지 손가락! – Gags

감사합니다, Fred Wuerges! :-) – vkm

하지만 10, 11, https://stackoverflow.com/questions/28879182/bootstrap-select-drop-list-moves-downward-automatically에서 작동하지 않습니다. –

AJax가 부트 스트랩과 함께 작동하지 않습니다.

답변

관련 문제