В моем весеннем проекте у меня есть файл sbmit.js, где у меня есть следующий код для отправки всех моих форм:
$('.form').submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, $(this).serialize() );
// Put the results in a div
posting.done(function( data ) {
$("#"+data).show();
$("#target").each (function(){
this.reset();
});
});
});
function md5() {
var senha = $(this).val();
$("input[name=senha").val($.md5(senha));
}
Но когда я пытаюсь представить любую форму, например, вот так:
<c:url value="/categoria/cadastra" var="cadastraCategoria"/>
<form class="form" role="form" action="${cadastraCategoria}" method="post">
<p>
<label for="nome">Nome</label>
<input type="text" name="nome" class="form-control" placeholder="Nome" autofocus>
</p>
<p>
<button type="submit" class="btn btn-lg btn-default">Cadastrar</button>
</p>
</form>
<div id="yes" class="alert alert-success">
<strong>Pronto!</strong> Categoria cadastrada com sucesso.
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
<div id="not" class="alert alert-danger">
<strong>Erro!</strong> Não foi possivel cadastrar a categoria.
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
вместо захвата ответа с сервера и использования для отображения одного из двух, приложение отображает пустую страницу с этим ответом.
Кто-нибудь может сказать мне, что я делаю неправильно?
ps.: метод на сервере, который получает заявку от клиента, имеет всю эту структуру:
@RequestMapping(value="cadastra", method=RequestMethod.POST)
@ResponseBody
@PreAuthorize("hasPermission(#user, 'cadastra_categoria')")
public String cadastra(HttpServletRequest request, HttpServletResponse response) {
if(categoria.cadastra(request, response))
return "yes";
else
return "not";
}
Итак, я наконец понял, что происходит: как я использую один уникальный метод для всех страниц, мне просто нужно изменить функцию:
$('.form').submit(function( event )
чтобы:
$(document).on('submit', '.form', function (event) {
и теперь все работает нормально.
Этот код говорит, что у вас несколько элементов с одинаковым идентификатором:
$("#target").each (function(){
this.reset();
});
Если это так, то это недопустимая разметка, поэтому вы столкнетесь с неожиданным поведением браузеров.
Решение этого - это изменение идентификаторов классаNames, таких как class='target'
и малое изменение в js selector $(".target")
.