jquery - AJax does not work with bootstrap-select -
jquery - AJax does not work with bootstrap-select -
i found flask-jquery-ajax example user selects item vehicle "make" drop downwards menu, vehicle "model" drop downwards menu populated making ajax request list of models create selected.
i tried replace drop-down menus bootstrap-select , include class="selectpicker form-control" in sec drop-down menu not more populated after first drop-down has been chosen.
this html template:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>flask jquery ajax drop downwards 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 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>
this javascript code responsible populating drop-down menus:
$("#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 1 ---"]].concat(data); $("#model_select").empty(); (var = 0; < option_list.length; i++) { $("#model_select").append( $("<option></option>").attr( "value", option_list[i][0]).text(option_list[i][1]) ); } }); });
why class="selectpicker form-control" bootstrap-select cause sec drop-down menu not anymore populated?
after ajax done, need reload plugin:
$('#model_select').selectpicker('refresh');
jquery ajax flask flask-wtforms bootstrap-select
Comments
Post a Comment