Issue while updating after dynamically updating #1221
Description
Hi,
We are having some small problems with the updating of the chosen multiselect list... When we dynamically add elements to the multiselect list - chosen is rendered from - it doesn't update itself after calling the trigger"$("#form_field").trigger("liszt:updated");". I'm not sure what the reason is exactly. It might be that we are missing something obvious.
You can view the code we use below. For you information we use MVC 4 .Net, so the code includes some razor syntax.
Thank you
--Stef Coenen
Javascript
$.getJSON("@Url.Action("GetEventsAjax")/" + _this.value, function (data) {
if (data.Status == "Success") {
var items = "";
$.each(data.Events, function (index, item) {
items += "<option value='" + data.EventsId[index] + "'>" + item + "</option>";
});
$("#select1").children().remove().end();
$("#select1").html(items);
$("label[for='input01']").show();
$("#input01").show();
$("#select1_chzn").show();
$("#select1").trigger("liszt:updated");
var items = "";
var possibilities = "";
}
});Html result after the call
Instead of showing a filtered result it shows the initial elements that are loaded by default.
<select class="chzn-select chzn-done" data-placeholder="Choose event(s)..." id="select1" multiple="multiple" name="Events" style="width: 350px; display: none;">
<option value="3">Event_100m_Freestyle</option>
<option value="4">Event_100m_Backstroke</option>
<option value="5">Event_100m_Butterfly</option>
<option value="21">Event_100m_Breaststroke</option>
<option value="22">Event_4x100m_Freestyle</option>
<option value="23">Event_4x100m_Medley</option>
</select>
<div id="select1_chzn" class="chzn-container chzn-container-multi chzn-container-active" style="width: 350px; display: inline-block;" title="">
<ul class="chzn-choices">
<li class="search-field">
<input type="text" value="Choose event(s)..." class="default" autocomplete="off" style="width: 130px;">
</li>
</ul>
<div class="chzn-drop" style="left: 0px; width: 348px; top: 29px;">
<ul class="chzn-results"><li id="select1_chzn_o_0" class="active-result highlighted" style="">Event_100m</li>
<li id="select1_chzn_o_1" class="active-result" style="">Event_Long_Jump</li><li id="select1_chzn_o_2" class="active-result" style="">Event_100m_Freestyle</li>
<li id="select1_chzn_o_3" class="active-result" style="">Event_100m_Backstroke</li><li id="select1_chzn_o_4" class="active-result" style="">Event_100m_Butterfly</li>
<li id="select1_chzn_o_5" class="active-result" style="">Event_200m</li><li id="select1_chzn_o_6" class="active-result" style="">Event_400m</li>
<li id="select1_chzn_o_7" class="active-result" style="">Event_110m_Hurdle</li><li id="select1_chzn_o_8" class="active-result" style="">Event_300m_Hurdle</li>
<li id="select1_chzn_o_9" class="active-result" style="">Event_800m</li><li id="select1_chzn_o_10" class="active-result" style="">Event_1500m</li>
<li id="select1_chzn_o_11" class="active-result" style="">Event_3000m</li><li id="select1_chzn_o_12" class="active-result" style="">Event_Relay</li>
<li id="select1_chzn_o_13" class="active-result" style="">Event_High_Jump</li><li id="select1_chzn_o_14" class="active-result" style="">Event_Triple_Jump</li>
<li id="select1_chzn_o_15" class="active-result" style="">Event_Pole_Vault</li><li id="select1_chzn_o_16" class="active-result" style="">Event_Shot_Put</li>
<li id="select1_chzn_o_17" class="active-result" style="">Event_Discus_Throw</li><li id="select1_chzn_o_18" class="active-result" style="">Event_Javelin_Throw</li>
<li id="select1_chzn_o_19" class="active-result" style="">Event_100m_Hurdle</li><li id="select1_chzn_o_20" class="active-result" style="">Event_100m_Breaststroke</li>
<li id="select1_chzn_o_21" class="active-result" style="">Event_4x100m_Freestyle</li><li id="select1_chzn_o_22" class="active-result" style="">Event_4x100m_Medley</li>
</ul>
</div>
</div>