javascript - Dropdown for a bootstrapmodal from a ajax POST -
i have bootstrap modal view:
<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="mymodallabel">add missed tara or harvest product</h4> </div> <div class="modal-body"> <div class="form-group"> <label class="font-noraml"> select event type </label> <div class="input-group"> <select data-placeholder="select" class="form-control chosen-select" style="width:350px;" tabindex="2"> <option value="tara"> tara machine </option> <option value="harvest"> harvest product machine </option> </select> </div> </div> <div class="form-group"> <label class="font-noraml"> product list </label> <div class="input-group"> <select data-placeholder="select" class="form-control chosen-select" style="width:350px;" tabindex="2"> <option value="ajaxdata"> here ajax data </option> </select> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <button type="button" class="btn btn-primary">save changes</button> </div> </div> </div> </div>what want populate product list dropdown options returned ajax in json format, in order that, have button function when load modal:
function onaddmissedentryinfoclicked(entryid) { var currententryid = entryid; $('#mymodal').modal('show'); //this load modal view $.ajax({ type: 'post', url: "monitor/getharvestproductsdropdown", success: function(data) { $($.parsejson(data.msg)).map(function () { return $('<option>').val(this.value).text(this.label); }).appendto('#ajaxdata'); console.log(data); }, error: function(xmlhttprequest, textstatus, errorthrown) { alert(textstatus); } }); } monitor/getharvestproductsdropdown in url function returns list mysql.
this how console.log(data) looking:
and json get:
[{"name":"orz"},{"name":"orz baza"},{"name":"porumb"},{"name":"lucerna"},{"name":"rapita"},{"name":"sorghum"},{"name":"orz primavaratic"},{"name":"orz primavaratic baza"},{"name":"floarea soarelui"},{"name":"triticale"},{"name":"triticale baza"},{"name":"grau"},{"name":"grau baza"}] but how can append json list in dropdown?
ps1. error:
vm375:1 uncaught syntaxerror: unexpected token u in json @ position 0 @ json.parse () @ function.m.parsejson (https://code.jquery.com/jquery-1.11.3.min.js:5:15998) @ object.success (http://local.delta-rom.rrsolutions.ro/assets/js/my/monitor.js:244:13) @ j (https://code.jquery.com/jquery-1.11.3.min.js:2:27309) @ object.firewith [as resolvewith] (https://code.jquery.com/jquery-1.11.3.min.js:2:28122) @ x (https://code.jquery.com/jquery-1.11.3.min.js:5:22111) @ xmlhttprequest.b (https://code.jquery.com/jquery-1.11.3.min.js:5:26030)
in ajax opts, set datatype 'json' expect json data server. iterate loop , set value. try code below, , let me know status.
$.ajax({ type: 'post', datatype:'json', url: "monitor/getharvestproductsdropdown", success: function(data) { $('#ajaxdata').empty(); for(var = 0; i< data.length;i++){ $('#ajaxdata').append('<option value="'+data[i]['name']+'">'+data[i]['name']+'</option>'); } console.log(data); }, error: function(xmlhttprequest, textstatus, errorthrown) { alert(textstatus); } });
Comments
Post a Comment