Multiselect css not refreshing after Ajax call returning PartialView -
i trying doing ajax call replaces div, multiselect controls losing styling.
i have view calling partial view:
@html.partial("_languages",model) in view have reference unobstrusive-ajax.min.js file , related css:
<link href="~/smartadmin/scripts/test/css/bootstrap-multiselect.css" rel="stylesheet" /> //this top of view <script src="~/scripts/jquery.unobtrusive-ajax.min.js"></script> //this @ bottom of view i have scripts file referencing jquery , jquery-ui files being called layout page.
in partial view using ajax.beginform options replace "listoflanguages" div:
@model accountregistrationmodel <div id="listoflanguages"> <article class="col-sm-12 col-md-12 col-lg-6"> <!-- widget id (each widget need unique id)--> <div class="jarviswidget jarviswidget-color-darken" id="wid-id-0" data-widget-editbutton="false" data-widget-deletebutton="false" data-widget-togglebutton="false"> <!-- widget options: usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false"> data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-collapsed="true" data-widget-sortable="false" --> <header> <span class="widget-icon"> <i class="fa fa-table"></i> </span> <h2>languages </h2> </header> <!-- widget div--> <div> <!-- widget edit box --> <div class="jarviswidget-editbox"> <!-- area used dropdown edit box --> </div> <!-- end widget edit box --> <!-- widget content --> <div class="widget-body no-padding"> <div class="widget-body no-padding"> @{ var options = new ajaxoptions() { //loadingelementid = "loadingdisplay", httpmethod = "post", insertionmode = insertionmode.replacewith, updatetargetid = "listoflanguages" //onbegin = "changebuttontext" }; } @using (ajax.beginform("savelanguage", "account", options, new { @id = "ppl", @class = "smart-form" })) { @html.hiddenfor(m => m.userid) @html.hiddenfor(m => m.email) tempdata["email"] = model.email; <fieldset> <div class="row"> <section class="col col-6"> <div class="form-group"> <select id="language" name="language" style="width:100%" class="select2" value="@model.language"> @foreach (var languagemetro in @model.languagemetroslist) { <optgroup label="@languagemetro.languagemetroname"> @foreach (var language in model.languagelist) { if (@languagemetro.pkilanguagemetroid == @language.fkilanguagemetroid) { if (@language.language == model.language) { <option value="@language.language" selected="selected">@language.language</option> } else { <option value="@language.language">@language.language</option> } } } </optgroup> } </select> </div> </section> <section class="col col-6"> <select id="ddlreadwritespeak" name="selectedreadwritespeak" multiple="multiple"> <option value="read">read</option> <option value="write">write</option> <option value="speak">speak</option> </select> <br /> <br /> <button type="submit" class="btn btn-success btn-xs pull-right"> save language </button> @*<div class="pull-right"> @html.actionlink("save language", "savelanguage", "account", new { useremail = model.email, ilanguageid = $('languages').val() }, new { @class = "btn btn-success btn-xs" }) </div>*@ </section> </div> </fieldset> } </div> <table id="dt_basic" class="table table-striped table-bordered table-hover" width="100%"> <thead> <tr> <th style="width:5%"></th> <th data-class="expand"><i class="text-muted hidden-md hidden-sm hidden-xs"></i> language</th> <th data-hide="phone" style="text-align:center"><i class="text-muted hidden-md hidden-sm hidden-xs"></i> read</th> <th data-hide="phone,tablet" style="text-align:center"><i class="txt-color-blue hidden-md hidden-sm hidden-xs"></i> write</th> <th data-hide="phone,tablet" style="text-align:center"><i class="txt-color-blue hidden-md hidden-sm hidden-xs"></i> speak</th> <th></th> </tr> </thead> <tbody> @{ int = 0; foreach (var item in model.languagesviewmodellist.orderby(x => x.prioritylevel)) { a++; <tr> <td> @if (a == model.languagesviewmodellist.count()) { <a href="@url.action("languagepriorityup", new { pkires_languageid=item.res_languageid })"> <span class="fa fa-toggle-up"></span> </a> } else if (item.prioritylevel > 1) { <a href="@url.action("languagepriorityup", new { pkires_languageid=item.res_languageid })"> <span class="fa fa-toggle-up"></span> </a> <a href="@url.action("languageprioritydown", new { pkires_languageid=item.res_languageid })"> <span class="fa fa-toggle-down"></span> </a> } else if (item.prioritylevel == 1) { <a href="@url.action("languageprioritydown", new { pkires_languageid=item.res_languageid })"> <span class="fa fa-toggle-down"></span> </a> } </td> <td>@item.language</td> <td style="text-align:center"> @if (item.read == "yes") { <span class="fa fa-check"></span> } else { <span class="fa fa-close"></span> } </td> <td style="text-align:center"> @if (item.write == "yes") { <span class="fa fa-check"></span> } else { <span class="fa fa-close"></span> } </td> <td style="text-align:center"> @if (item.speak == "yes") { <span class="fa fa-check"></span> } else { <span class="fa fa-close"></span> } </td> <td> @*<a href="#" id="dialog_link" class="btn btn-danger btn-xs"> <span class="fa fa-trash-o"></span> </a>*@ <a href="@url.action("deletelanguage", new { pkires_languageid = item.res_languageid })"> <span class="fa fa-trash-o"></span> </a> @*@html.actionlink("delete","delete", new { employmentid = item.pkiemploymentdetailid, userid = model.fkiuserid })*@ @*<button type="submit" onclick="deleteemployment('@item.pkiemploymentdetailid')" class="btn btn-xs btn-danger text-center"> <span class="fa fa-trash-o"></span> </button>*@ </td> </tr> } } </tbody> </table> </div> <!-- end widget content --> </div> <!-- end widget div --> </div> <!-- end widget --> </article> </div> what missing multiselect controls not pulling through css ?
edit using firefox , looking in console log, didnt show anything, using chrome got error :
uncaught typeerror: cannot read property 'fn' of undefined i suspecting because multi-select.js file not being pulled through after ajax call, have no idea how include after ajax call ?
if leaving out information, please let me know.
so couldnt find solution specific issue, multiselects never refreshed. tried destroy attribute, nothing worked.
what ended doing leaving mutiselects in view , partial view contained table , refreshed table in partial view.
Comments
Post a Comment