Asp.Net Core MVC значки данных перо отсутствуют после запуска JQuery - PullRequest
0 голосов
/ 11 июня 2019

У меня есть страница просмотра (индекс), которая отображает частичное представление (_PartialList). В списке я показываю таблицу с перьями значков для «кнопок действий». Я получил значки отсюда:

https://github.com/feathericons/feather

При первой загрузке все в порядке - значки отображаются, но когда я щелкаю по любому из элементов управления на моей странице индекса (например, «ddlSelect»), который запускает некоторый код jquery, который фильтрует таблицу (загрузка частичного просмотра ajax), все перо значки исчезают ???

Вот как я добавляю значки перьев в тело страницы макета:

<script src="~/js/feather.min.js"></script>
    <script>
        feather.replace()
    </script>

Фрагмент из моего индекса:

<div class="col-md-8 col-sm-12">
        <div class="card" id="listHeader">
            <div class="card-header">
                <h5 class="card-title">Seznam kontaktov</h5>
                <div class="row">
                    <div class="col-12 form-inline">
                        <select id="ddlSelect" asp-items="Model.Stranke" class="form-control filter"></select>

                        <input type="text" name="SearchString" placeholder="Išči" value="@ViewData["CurrentFilter"]" id="tbSearch" class="form-control filter" />

                        <input value="Išči" type="button" id="btnSearch" class="btn btn-primary ml-2" onclick="filterData(this);" />

                        <div class="text-right">
                            <a asp-controller="Kontakti" asp-action="Add" class="btn btn-primary" role="button">Dodaj</a>
                        </div>

                    </div>
                </div>
            </div>

            <div id="sectionList">
                @{await Html.RenderPartialAsync("_PartialList", Model);}
            </div>
        </div>
    </div>

<script>

        // drop down filter
        $(document).ready(function () {

            $('#mainContent').on("change click keyup", ".filter", function () {

                // drop down
                var strSelected = "";
                $('#ddlSelect option:selected').each(function () {
                    strSelected += $('#ddlSelect')[0].value;
                });

                // search text
                var search = $('#tbSearch').val();

                // url - basic
                var url = '/Kontakti/IndexPartial?idSelect=' + strSelected;
                url += '&searchString=' + search;

                // partial reload
                $('#sectionList').load(url);

            });
        });

</script>

и таблица с иконками перьев (в прошлом) из моего PartialView:

<table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>Id</th>
                <th>Kontakt</th>
                <th>Stranka</th>
                <th>Mobitel</th>
                <th>E-pošta</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var kontakt in Model.Kontakti)
            {
                <tr data-url="@Url.Action("Preview", "Kontakti", new { id = @kontakt.IdKontakt })">

                    <td>
                        @kontakt.IdKontakt
                    </td>
                    <td>
                        @kontakt.Ime @kontakt.Priimek
                    </td>

                    <td>
                        @kontakt.Stranka.SkrajsanNaziv
                    </td>
                    <td>
                        @kontakt.Mobitel
                    </td>
                    <td>
                        @kontakt.Email
                    </td>
                    <td>
                        <a href="#" data-toggle="tooltip" title="Predogled" class="preview"
                           data-url="@Url.Action("Preview", "Kontakti", new { id = @kontakt.IdKontakt })">
                            test
                        </a>

                        <a href="#" data-toggle="tooltip" title="Predogled" class="preview"
                           data-url="@Url.Action("Preview", "Kontakti", new { id = @kontakt.IdKontakt })">
                            <i class="align-middle" data-feather="search"></i>
                        </a>

                        <a href="#" data-toggle="tooltip" title="Uredi" class="edit"
                           data-url="@Url.Action("Edit", "Kontakti", new { id = @kontakt.IdKontakt })">
                            <i class="align-middle" data-feather="edit"></i>
                        </a>

                        <a href="#" data-toggle="tooltip" title="Izbriši"
                           data-url="@Url.Action("Delete", "Kontakti", new { id = @kontakt.IdKontakt })" onclick="showGenericModal();">
                            <i class="align-middle" data-feather="trash-2"></i>
                        </a>
                    </td>
                </tr>
            }
        </tbody>
    </table>

Почему значки не отображаются после запуска jquery?

РЕДАКТИРОВАТЬ: я также использую Bootstrap 4 в макете.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...