0
Ich versuche einen Ajax-Aufruf, der ein div ersetzt, aber meine Multiselect-Steuerelemente verlieren sein Styling.Multiselect css nicht auffrischen nach Ajax-Aufruf zurück PartialView
Ich habe eine Ansicht, die meine Teilansicht ruft:
@Html.Partial("_Languages",Model)
In dieser Ansicht Ich habe auch einen Verweis auf die unobstrusive-ajax.min.js Datei und die damit verbundene CSS:
<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
Ich habe ein Skripte Datei, die auf die Dateien jquery und jquery-ui verweist, die von meiner Layout-Seite aufgerufen werden.
In meiner Teilansicht Ich verwende Ajax.BeginForm mit seinen Optionen, um den „listofLanguages“ div zu ersetzen:
@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>
Was ich, dass meine Mehrfachauswahl Kontrollen ziehen nicht durch die CSS bin fehle?
EDIT So mit Firefox und im Konsolenprotokoll suchen, es hat nicht alles zeigen, aber unter Verwendung von Chrom bekam ich diese Fehlermeldung:
Uncaught TypeError: Cannot read property 'fn' of undefined
ich zu ahnen, bin es, weil meine Multi-select.js Die Datei wird nach dem Ajax-Aufruf nicht durchgezogen, aber ich habe keine Ahnung, wie ich sie nach dem Ajax-Aufruf einfügen soll.
Wenn ich irgendwelche Informationen auslasse, lass es mich wissen.
beziehen Sie sich auf diese Frage https://stackoverflow.com/questions/20401703/bootstrap-multiselect-update-option-list-on-flow – CuriousRK