Форма, отправленная дважды в Chrome/Safari
Я стремлюсь выполнить сообщение канонической формы, но следующее отправляет серверу дважды в Chrome и Safari (но ведет себя как ожидалось в Firefox):
<form id="create-deck-form" action="/decks/create" method="post">
<fieldset>
<legend>Create new deck</legend>
<label for="deck-name-field">Name</label>
<input id="deck-name-field" name="deck-name-field" type="text" value="" maxlength="140" />
<label for="tag-field">Tags</label>
<input id="tag-field" name="tag-field" type="text" value="" maxlength="140" />
<input class="add-button" type="submit" value="Create" />
</fieldset>
</form>
Я хотел бы использовать onsubmit атрибут для выполнения проверки на полях перед представлением, но везде, где возвращаемое значение true, форма отправлена дважды.
Я стремился связать обработчик jQuery с формой, но здесь также, где поведение по умолчанию не предотвращено, форма отправлена дважды, например:
<script type="text/javascript">
$(document).ready(function() {
$("#create-deck-form").submit(function(event){
if($("#deck-name-field").val() == "") {
event.preventDefault();
alert("deck name required");
}
});
});
</script>
В то время как я предполагаю, что существует что-то ослепляюще очевидная несправедливость здесь к новой паре глаз, я глубоко смущен, почему представление, с или без проверки, делает дублирующееся сообщение к серверу в Chrome и Safari. Я был бы благодарен за любое понимание.
4 ответа
Эта проблема на самом деле связана с Facebox ( http://defunkt.github.com/facebox/ ). Инициализация Facebox вызывает второй набор запросов после загрузки вашей страницы. Итак, если вы отправите сообщение в / myaction / create , Facebox запустит второй набор запросов с базовым URL, установленным на / myaction / create . Исправление заключается в перенаправлении на URL-адрес, который обрабатывает запросы на получение после публикации, чтобы вы не выполняли публикацию дважды. Большое спасибо за вашу помощь.
Я не уверен на 100%, но попробуйте следующее:
<script type="text/javascript">
$(document).ready(function() {
$("#create-deck-form").submit(function(event){
if(!$("#deck-name-field").val().length) {
return false;
}
});
});
</script>
если это не сработает, посмотрите
for(e in $("#create-deck-form").data('events'))
alert(e);
Это предупредит вас обо всех связанных событиях на вашу форму . Может есть еще обработчики событий? В противном случае также на всякий случай также alert / log
$("#create-deck-form").attr('onclick')
и
$("#create-deck-form").attr('onsubmit')
.
Можете ли вы попробовать return false; после вашего предупреждения и удалить event.preventDefault();. Возможно, вам также нужно return true; в вашем else-клаузе. Я полагаю, что у меня это где-то работает.
Хорошо, не уверен, насколько это поможет, но попробуйте удалить ввод для отправки и отправить форму через javascript. Так, например,
<input id="submit-button" class="add-button" type="button" value="Create" />
Тогда вместо того, чтобы слушать onsubmit, вы можете попробовать
$('#submit-button').click(function(evt) {
if(validationSuccess(...)) {
$("#create-deck-form").submit();
} else {
//display whatever
}
});
Теперь вы тоже должны работать ... но таким образом вы можете отлаживать там, где у вас проблема .... Это должно только отправить один раз ... удачи!