CODEWITHSUNDEEP
jqueryajaxtwitter-bootstrapmodal-dialogjquery-chosen
prog rice bowl
prog rice bowl

Reputation: 778

jQuery Chosen plugin add options dynamically on bootstrap modal

I have been trying various ways to add the dynamically from ajax but of no avail.

I have tried:

$(function(){
//var htmlstring="";
$('#createNewTags').tokenfield();
$('#myModal').on('shown.bs.modal', function () {
    //var htmlstring="";
      $('.chzn-select', this).load("/availableTags.do", function(response, status, xhr ){
          var htmlstring="";
          if(status == "success"){
              var arrayVal = $.parseJSON(response.substring(response.indexOf("["), response.indexOf("}")));
              //var htmlstring="";
              $.each(arrayVal, function( index, value ) {
                  htmlstring +="<option value="+value+">"+value+"<option>\n";
              });

          }

      });
      $('.chzn-select', this).chosen();

});

my htmlstring did populate what I wanted, which is

<option value="tagvalue">tagvalue</option>
<option value="tagvalue2">tagvalue2</option>
<option value="tagvalue3">tagvalue3</option>
<option value="tagvalue4">tagvalue4</option>

but I have no idea how to add this htmlstring to read. I have the "select" on my jsp page but append doesn't work. Any idea how I should continue from here? I have no problem pulling out the data.

Upvotes: 3

Views: 9341

Answers (2)

Michał
Michał

Reputation: 2484

There's no need to use html string. Just append your select in the loop. At last you need to update the chosen() element.

$(function(){
$('#createNewTags').tokenfield();
$('#myModal').on('shown.bs.modal', function () {
    //var htmlstring="";
      $('.chzn-select', this).load("/availableTags.do", function(response, status, xhr ){
          var htmlstring="";
          if(status == "success"){
              var arrayVal = $.parseJSON(response.substring(response.indexOf("["), response.indexOf("}")));
              //var htmlstring="";
              $.each(arrayVal, function( index, value ) {
                  $("select").append("<option value="+value+">"+value+"<option>");
              });

          }

      });
      $('.chzn-select', this).chosen().trigger("chosen:updated");

});

Take a look at Chosen documentation and look for Updating Chosen Dynamically

Upvotes: 0

Sridhar R
Sridhar R

Reputation: 20418

Try this

$('.chzn-select').append("<option value='"+value+"'>"+value+"</option>");
$('.chzn-select').chosen().trigger("chosen:updated");

Upvotes: 3

Related Questions