web-dev-qa-db-fra.com

AJax ne fonctionne pas avec bootstrap-select

J'ai trouvé exemple flask-jquery-ajax où l'utilisateur sélectionne un élément dans le menu déroulant "Make" du véhicule, le menu déroulant "Model" du véhicule est rempli en faisant un AJAX demande d'une liste de modèles pour la marque sélectionnée.

J'ai essayé de remplacer les menus déroulants par bootstrap-select et dès que j'inclus class = "selectpicker form-control " dans le deuxième menu déroulant, il ne se remplit plus une fois que le premier menu déroulant a été choisi.

Voici le modèle 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>

Il s'agit du JavaScript code chargé de remplir les menus déroulants:

$("#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])
            );
        }
    });
});

Pourquoi class = "selectpicker form-control" from bootstrap-select faire que le deuxième menu déroulant ne soit plus rempli?

jqueryajaxflaskflask-wtformsbootstrap-select
14
user977828

Après AJAX est terminé, vous devez recharger le plugin:

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

ou

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