0
divを置換するajaxコールを実行しようとしていますが、マルチセレクションコントロールのスタイリングが失われています。私は、スクリプトを持ってAjaxコールの返信後にマルチセレクションCSSがリフレッシュされないPartialView
<link href="~/SmartAdmin/scripts/Test/css/bootstrap-multiselect.css" rel="stylesheet" /> //This is a the top of my view
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> //This is at the bottom of my view
：私もunobstrusive-ajax.min.jsファイルと関連するCSSへの参照を持っている。このビューで
@Html.Partial("_Languages",Model)
：
は、私は私の部分図を呼んでいるビューを持っていますレイアウトページから呼び出されているjqueryとjquery-uiファイルを参照しているファイルです。
私の部分図では、私は「listofLanguages」のdiv置き換えるためにそのオプションとAjax.BeginFormを使用しています：私は私の複数選択コントロールは、CSSを通じて引っ張っていないことは何をしないのです
@model AccountRegistrationModel
<div id="listofLanguages">
<article class="col-sm-12 col-md-12 col-lg-6">
<!-- Widget ID (each widget will 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">
<!-- This area used as 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 a = 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>
を？
EDIT ので、Firefoxを使用して、コンソールログに見て、それが何を示していませんでしたが、クロムを使用して、私はこのエラーを得た：
Uncaught TypeError: Cannot read property 'fn' of undefined
私はマルチselect.jsので、それは疑うていますファイルは、ajax呼び出しの後に引っ張られていませんが、私はajax呼び出しの後にどのようにインクルードするのか分かりません。
私が情報を残している場合は、私に知らせてください。
この質問を参照してください。https://stackoverflow.com/questions/20401703/bootstrap-multiselect-update-option-list-on-flow – CuriousRK