Member 14713380 Ответов: 2

JS скрипты не работают в частичном представлении после его обновления

Проблема: partialview содержит js-скрипты, при первой загрузке они работают. После Второй загрузки js-скрипты перестают работать.





Описание: У меня есть частичная перезагрузка представления при изменении значения в selectbox (это вызывает эту функцию)


//этот элемент вызывает функции если пользователь изменит значение (месяц)
partialview снова загрузился

@(Html
       .DevExtreme()
       .SelectBox()
       .ID("id_sb_year")
       .DataSource(d => d
           .Mvc()
           .Controller("Ecp")
           .LoadAction("WezRok")
           .Key("Rok")
       )
       .DisplayExpr("Rok")
       .ValueExpr("Rok")
       .SearchEnabled(true)
       .OnValueChanged("pobierzTabele")
                       )



@(Html
       .DevExtreme()
       .SelectBox()
       .ID("id_sb_month")
       .DataSource(d => d
           .Mvc()
           .Controller("Ecp")
           .LoadAction("WezMiesiac")
           .Key("Miesiac")
       )
       .DisplayExpr("DescMiesiac")
       .ValueExpr("Miesiac")
       .SearchEnabled(true)
       .OnValueChanged("pobierzTabele")
                       )





Для работы функции необходимо выбрать два значения из двух полей выбора


function pobierzTabele() {

 var numerMiesiaca = $("#id_sb_month").dxSelectBox("instance").option("value")
    var numerRoku = $("#id_sb_year").dxSelectBox("instance").option("value")

    if (numerMiesiaca != null && numerRoku != null) {

        function daysInMonth(month, year) {
            return new Date(year, month, 0).getDate();
        }

        var liczbaDni = daysInMonth(numerMiesiaca, numerRoku);


        var userDate = {
             numerMiesiaca: $("#id_sb_month").dxSelectBox("instance").option("value"),
             numerRoku: $("#id_sb_year").dxSelectBox("instance").option("value"),
             liczbaDni: liczbaDni
         };

 $.ajax({

            url: "@Url.Action("PartialTabelaEcp", "Home")",
            type: "POST",
            dataType: "html",
            data: {"userDate": JSON.stringify(userDate)},
            cache: false,
            success: function (data) {

                $("#kartaEcp").html(data);


            },
            failure: function (error) {
                alert(error);

            },
            error: function (error) {
                alert(error);
            }
        });
    }

}



эффект: бросает этот partialview в это место
<div class="kartaEcp" name="kartaEcp" id="kartaEcp">
     </div>


частичное представление:

@using AppEcp.Models
@model ParentView



@using (Html.BeginForm("Save", "Home", FormMethod.Post, new { id = "tableForm" }))
{
  <table><table>
}

<script src="~/js/tabela/Arkusz.js"></script>
<script src="~/js/tabela/halfStartEnd.js"></script>
<script src="~/js/tabela/minimumEnds.js"></script>


Что я уже пробовал:

В настоящее время: Мне нужно обновить страницу, чтобы иметь возможность снова выбрать значение и снова загрузить partialview, что недопустимо

phil.o

Пробовали ли вы включить скрипт в начало самой страницы, а не в частичные представления?

2 Ответов

Рейтинг:
0

F-ES Sitecore

Вы будете использовать js для присоединения к событию компонента, такому как событие щелчка или изменения, и вы будете заменять этот компонент при обновлении вашего DOM здесь;

$("#kartaEcp").html(data);


Как все элементы в kartaEcp были уничтожены и заменены, так и компоненты, к которым вы привязали свои события, больше не существуют, поэтому ваши события больше не срабатывают. Вы должны повторно прикрепить свои события после вызова к ".html" выше или использовать делегированные обработчики событий, как описано здесь;

.on() | jQuery API документация[^]

Делегированные обработчики событий по-прежнему работают с элементами, недавно добавленными в DOM.

Member 14713380

могу я спросить вас, как использовать его в моем случае? Я вас очень прошу. Пожалуйста помочь

F-ES Sitecore

Вы не опубликовали соответствующий код, так что трудно сказать. Важный бит кода-это то, где вы прикрепляетесь к событиям на ваших элементах, например click, change и т. д., независимо от того, что вызывает вызов ajax для выполнения обновления.

Member 14713380

Я обновил код
Пожалуйста, помогите мне, потому что я уже давно устал от этого :(

F-ES Sitecore

Похоже, вы используете какой-то сторонний фреймворк, который генерирует код javascript для вас. Я действительно не знаком с этой штукой DevExtreme, возможно, было бы лучше обрабатывать это событие с помощью чистого кода jQuery, чтобы вы могли контролировать, как событие изменения запускает ваш js-код, а не заставлять DevExtreme делать это за вас.

Рейтинг:
0

as.if.i.code

Ниже приведен способ использования .on() в вашем случае.

Обновите свою функцию "успех", как показано ниже,

$("#kartaEcp").html(data);

$( "#id_sb_year" ).on( "change", function() {
    pobierzTabele();
});

$( "#id_sb_month" ).on( "change", function() {
    pobierzTabele();
});

Member 14713380

будет ли это просто работать? Мне не придется вносить никаких других изменений?

as.if.i.code

Он должен работать без каких-либо других изменений. Пожалуйста, попробуйте и дайте мне знать здесь.