How to render data in a drop down using JQuery and Ajax in Backbone.Marionette -
i'm using backbone , marionette web app, i'm trying populate drop down menu json after option has been selection.
so user selects account type, ajax request fired , data returned.
however i'm stuck @ populating relevant drop downs returned data.
this ajax request triggered after user selects account:
accountselect: function () { var accountcode = $("select#accountcombo").val().tostring(); var jsonurl = "webapp/json?accountcode=" + accountcode; $.ajax({ url: jsonurl, type: "post", data: { accountcode: $("select#accountcombo").val() }, datatype: "text", success:function(data) { return { states: _.pluck(data.states, 'state'), products: _.pluck(data.products, 'product') }; $('#select#statecombo').selectpicker('render'); $('#select#productcombo').selectpicker('render'); // this.render(); }, }); }
so looking @ console see request works, data returned, success:function
element isn't working. drop downs populated default on load work fine , not sure i'm missing.
this html states i'm trying populate (held in template):
<div id ="states"><h2>states</h4> <% _.each(states, function(item){ %> <li value="<%= item %>"><%= item %></li> <% });%> </div>
the json in following format if helps:
{ "states": [ { "state": "al", "products": [ { "product": "phone", "types": [ { "type": "smarta1", "typerelease": [ 2013, 2014 ] } ] } ] } ] }
sorry, i'v made mistake
try
// data response var states = _.pluck(data.states, 'state'); var products = _.pluck(data.products, 'product'); // create select inner html var statescontent = _.map(states, function(val){ return '<option>'+val + '</option>';}).join(); var productscontent = _.map(products, function(val){ return '<option>'+val + '</option>';}).join(); // rerender select $('select#statecombo').html(statescontent).selectpicker('render'); $('select#productcombo').html(productscontent).selectpicker('render');
Comments
Post a Comment