0

Добрый день. Не могу справиться с задачкой в MVC. Есть четыре списка и их нужно связать. То есть выбрав в первом списке что-то, формируем второй и так далее. Схема "Страна-город-район-улица". Использовала схему в ajax запросом и частичными представлениями. Связку двух первых списков выполняем, но как только второй список сформирован, и выбрав из него чтото третий список не формирует.

$('#state').change(function()
{
   // получаем выбранный id
    var id = $(this).val();
    $.ajax({
        type: 'GET',
        url: '@Url.Action("GetItems44")/' + id, 
        success: function (data) {
            // заменяем содержимое присланным частичным представлением
            $('#city').replaceWith(data);
        }
    });
});

$('#city').change(function () {
    var id = $(this).val();
    $.ajax({
        type: 'GET',
        url: '@Url.Action("GetItemsTopic")/' + id,
        success: function (data) {
            $('#punkt').replaceWith(data);
        }
    });
});

$('#punkt').change(function () {
        var id = $(this).val();
        $.ajax({
            type: 'GET',
            url: '@Url.Action("GetItemsTopic2")/' + id,
            success: function (data) {
                $('#street').replaceWith(data);
            }
        });
    });

В нем в первый get заходит, а во второй уже нет.

5
  • Согласно документации, The .replaceWith() method removes all data and event handlers associated with the removed nodes. Вот тут-то собака и порылась.
    – Yaant
    6 июн 2016 в 13:36
  • Можно мне разъяснить, ибо там я была и немного не улавливаю что сделать?? Чем можно заменить .replaceWith() или как можно донести список полученного до след. списка???
    – Ирина
    6 июн 2016 в 13:39
  • при вызове $('#city').replaceWith(data); установленный ранее обработчик события onchange сбрасывается. Соответственно, надо или использовать какой-либо иной способ заполнения нужного элемента полученными данными, либо устанавливать обработчик непосредственно после вызова replaceWith()
    – Yaant
    6 июн 2016 в 13:44
  • А какие элементы вы можете посоветовать? Я не сильна в скриптах. Заранее очень благодарна, но можно как то примером показать что и как? :)
    – Ирина
    6 июн 2016 в 13:47
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 7 июн 2016 в 5:56

2 ответа 2

1

Навскидку, если изменить код примерно так, то должно заработать:

$('#state').change(function()
{
    // получаем выбранный id
    var id = $(this).val();
    $.ajax({
        type: 'GET',
        url: '@Url.Action("GetItems44")/' + id, 
        success: function (data) {
            // заменяем содержимое присланным частичным представлением
            $('#city').replaceWith(data);
            $('#city').change(function () {
                var id = $(this).val();
                $.ajax({
                    type: 'GET',
                    url: '@Url.Action("GetItemsTopic")/' + id,
                    success: function (data) {
                        $('#punkt').replaceWith(data);
                        $('#punkt').change(function () {
                            var id = $(this).val();
                            $.ajax({
                                type: 'GET',
                                url: '@Url.Action("GetItemsTopic2")/' + id,
                                success: function (data) {
                                    $('#street').replaceWith(data);
                                }
                            });
                        });
                    }
                });
            });
        }
    });
});

Однако предупреждаю, что с JQuery я дела практически не имел, так что возможны нюансы. :)

В целом же проблема заключается в том, что Вы сначала устанавливаете обработчики событий на элементы city и punkt, а после этого при изменении 'state' отрабатывает вызов $('#city').replaceWith(data);, который полностью заменяет элемент city, сбрасывая установленный ранее обработчик. Соответственно, один из вариантов (см. предложенный вариант кода) — это сделать так, чтобы обработчики устанавливались после вызова replaceWith(). Тут, само собой, предполагается, что в data возвращается элемент с id="city", иначе ничего работать не будет. :)

Ну и еще этот вариант кода предполагает, что селекты изменяются строго поочередно, и нельзя пропустить выбор state, начав сразу с city.

2
  • Все заработало!!! Вы не представляете, как меня спасли =)) Огромное вам спасибо!
    – Ирина
    6 июн 2016 в 14:30
  • Добрый вечер, возникла небольшая проблема. Выбрала я все списки, в post в контроллере передаются id выбранных из списка пунктов, но как только сохранило все, страница обновилась и все что было внесено остается в заполненных полях, все кроме тех полей к которому я применила эту связку. Как быть?? Как вывести то что выбрано в списка с связкой?
    – Ирина
    7 июн 2016 в 13:57
0

Повесьте обработчик события на весь документ - тогда события на элементах изменяемых аяксом будут отрабатывать как надо, например:

$(document).on('событие', 'селектор', function () {
//Код
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.