jquery - Chosen Plug-in DropDownList Not Updating -
i'm using chosen ddl plug-in , creating ddl based on other items chosen.
the first ddl populated on load list of items user choose from. once user chooses item list, display second ddl them choose item type. populates third ddl. third ddl not doing chosen update.
the select items follows:
<table style="width: 100%;"> <tbody> <tr style=""> <td style="width: 33%;"> <select id="ddlone"> <option value="placeholder">-- select --</option> @for (int n = 0; n < model.count; n++) { <option value="@model[n]">@model[n]</option> } </select> </td> <td style="width: 33%; display:none;" id="tddbitemtype"> <select id="ddlitemtype"> <option value="placeholder">-- select --</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </td> <td style="width: 33%; display:none;" id="tddbitemname"> <select id="ddlitemname" style="width:33%;"></select> </td> </tr> </tbody> </table> i create these chosen ddl's this:
$('#ddlitemtype').chosen({ no_results_text: "oops, nothing found!", width: "95%", search_contains: true // allows user contains search }); $('#ddlone').chosen({ no_results_text: "oops, nothing found!", width: "95%", search_contains: true // allows user contains search }); $('#ddlitemname').chosen({ // if remove this, can use select, without utilizing chosen features/styling no_results_text: "oops, nothing found!", width: "95%", search_contains: true // allows user contains search }); these above chosen.change() sections in script
on change event of ddlitemtype this:
$('#ddlitemtype').chosen().change(function () { $('.waiting').show(); // spinning wheel gif var objselecteditemtype = $('#ddlitemtype').find('option:selected'); var sselecteditemtype = objselecteditemtype[0].innertext; sitemtype = sselecteditemtype; loaditemlist(sselecteditemtype); $('.waiting').hide(); //$('#ddlitemname').chosen().trigger('chosen:updated'); // $(...).chosen not function }); and inside loaditemlist()
$.ajax({ type: "get", url: "/database/getdatabaseitemlist/", data: { "": id }, success: function (response) { var shtml = ''; $('#ddldatabaseitemname').empty(); shtml = '<option value="placeholder">' + '-- select item --' + '</option>'; try { (var n = 0; n < response.length; n++) { shtml += '<option value="' + response[n] + '">' + response[n] + '</option>'; } $('#ddlitemname').html(shtml); $('#tddbitemname').show(); } catch (e) { alert("error in ajax: " + e); return false; } { $('#ddlitemname').trigger('chosen:updated'); console.log('loaditemlist worked well'); } } }); when inspect original select item after ajax call, options have been added select item unable update chosen ddl.
all of resides outside of $(document).ready();
i'm using jquery 3.2.1 , i've tried both 1.8.2 , 1.7.0 versions of chosen.
edit: added html markup , chosen().change() triggers ajax call
edit2: final answer combo of master yoda's answer below , there being reference jquery in _layout,cshmtl page. once implemented master yoda's approach , removed last jquery reference, began working wonderfully.
error might occurring within callback of ajax request:
$('#ddlitemtype').chosen({ no_results_text: "oops, nothing found!", width: "95%", search_contains: true // allows user contains search }); $('#ddlone').chosen({ no_results_text: "oops, nothing found!", width: "95%", search_contains: true // allows user contains search }); $('#ddlitemname').chosen({ no_results_text: "oops, nothing found!", width: "95%", search_contains: true // allows user contains search }); $('#ddlitemtype').chosen().change(function() { $('.waiting').show(); // spinning wheel gif var objselecteditemtype = $('#ddlitemtype').find('option:selected'); var sselecteditemtype = objselecteditemtype[0].innertext; sitemtype = sselecteditemtype; loaditemlist(sselecteditemtype); $('.waiting').hide(); }); //used in place of ajax call function loaditemlist(id) { $.ajax({ type: "get", url: "/database/getdatabaseitemlist/", data: { "": id }, success: function (response) { //this fail here //added logic error method instead }, error: function(response) { try { //use empty instead of .html('') $('#ddlitemname').empty(); //build list of items (var n = 1; n <= 10; n++) { $('#ddlitemname').append('<option> item name ' + n + '</option'); } //call in success callback method $("#ddlitemname").chosen().trigger("chosen:updated"); } catch (err) { alert("error caught"); } } }); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.min.css" rel="stylesheet" /> <table style="width: 100%;"> <tbody> <tr style=""> <td style="width: 33%;"> <select id="ddlone"> <option value="placeholder">--select --</option> </select> </td> <td style="width: 33%;" id="tddbitemtype"> <select id="ddlitemtype"> <option value="placeholder">-- select --</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </td> <td style="width: 33%;" id="tddbitemname"> <select id="ddlitemname" style="width:33%;"></select> </td> </tr> </tbody> </table>
Comments
Post a Comment