The problem arose when I rewrote the spring controllers to return the static contents of the vm old block.

 @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"); }

The host server function and content generation

 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); }

With this option, everything works fine. But when I try to call any form <form class="adm_news_form" id="adm_news_form_edit"> trigger a submit event at the touch of a button, I get all the implemented data in the address bar and redirect to the main page of the site

 $("#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; });

How to solve the problem of sending a form to the server? Why is the selector on item ID not working?

    1 answer 1

    The method of poking and "dancing with a tambourine" revealed: 1) Elements, as a result of dynamic updating, are not listed in the context of the DOM. 2) To avoid this problem, you need to use not a specific call to the `submit event, but not the binding function $ (document) .on ('submit', 'seletor', function () {...}); and everything will work fine.