1

Проблема возникла, когда переписал контроллеры спринга на возврат статического содержимого блока vm стариницы.

@PostMapping
public @ResponseBody
ContentResponse index(ModelMap map, @ActiveUser Account Account) {
    map.addAttribute("todo", todoList.findAll());

    return contentResponseService.getContent(Account, map, "window.title", "path/to/vm_page");
}

Функция принимающая колбек сервера и формирование контента

function link(link) {
const url = link;

const cooki = cookie();
document.cookie = 'CSRF-TOKEN=' + cooki;
$.ajax({
    url: url,
    headers: {'X-CSRF-TOKEN': cooki},
    crossDomain: true,
    xhrFields: {
        withCredentials: true
    },
    type: "POST",

    beforeSend: function () {
        NProgress.start();
    },

    error: function () {
        new PNotify({
            title: 'Error',
            text: 'Превышен интервал запроса! Ожидайте 5 сек.',
            type: 'error',
            hide: false
        });
    }

}).done(function (data) {
    replaceContent(data);
});

}

function replaceContent(data) {
setTimeout(function () {
    fadeOutnojquery(hellopreloader);
    document.title = data.title;
    const content = $("div.content");
    const top_menu_block = $("div.top_menu_block");
    top_menu_block.replaceWith(data.top_menu_block);
    content.fadeOut("slow", function () {
        content.hide();
        content.replaceWith(data.content_page);
        content.fadeIn("slow");
    });

    NProgress.done();
    NProgress.remove();
}, 500);
}

При таком варианте все прекрасно работает. Но когда я пытаюсь вызвать у какой-либо формы <form class="adm_news_form" id="adm_news_form_edit"> вызвать событие submit по нажатию кнопки, получаю все сриализованные данные в адресную строку и редирект на главную страницу сайта

$("#adm_news_form_edit").submit(function () {
        const url = "/admin/news/editOk";

        const file = new FormData(document.forms.adm_vebinar_form_edit);
        file.append('file', $('input[type=file]')[0].files[0]);

        const cooki = cookie();
        document.cookie = 'CSRF-TOKEN=' + cooki;

        $.ajax({
            url: url,
            data: file,
            processData: false,
            contentType: false,
            headers: {'X-CSRF-TOKEN': cooki},
            crossDomain: true,
            xhrFields: {
                withCredentials: true
            },
            type: "POST",

            beforeSend: function () {
                NProgress.start();
            },

            complete: function () {
                NProgress.done();
                NProgress.remove();
            },

            error: function () {
                new PNotify({
                    title: 'Ошибка',
                    text: 'Превышен интервал запроса! Ожидайте 5 сек.',
                    type: 'error',
                    hide: false
                });
            }

        }).done(function (data) {
            switch (data.type) {
                case 'OK':
                    window.location = "/cp";
                    break;
                case 'ERROR':
                    new PNotify({
                        title: 'Ошибка',
                        text: data.message,
                        type: 'error',
                        hide: false
                    });
                    break;
            }
        });
        return false;
    });

Как решить проблему отправки формы на сервер? Почему селектор по ID элемента не работает?

1 ответ 1

1

Методом тыка и "танцев с бубном" было выявлено: 1) Элементы, в результате динамического обновления, не значатся в контексте DOM. 2) Чтобы избежать этой проблемы, нужно использовать не конкретный вызов события `submit, а не привязывающуюся функцию $(document).on('submit', 'seletor', function() {...}); и будет все прекрасно работать.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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