jQuery Отправить страницу обновления

Question

Следующий код предназначен для выполнения чисто POST-запроса ajax, вместо этого он выполняет POST через ajax, а затем браузер переходит к ответу.

HTML ...

<div id="bin">
    <form class="add" method="post" action="/bin/add/">
        <p>I'm interested! Save for later.</p>
        <input type="hidden" name="product_id" value="23423">
        <input type="submit" value="Save">
    </form> 
    <form style="display:none;" class="remove" method="post" action="/bin/remove/">
        <p>I changed my mind--I'm not interested.</p>
        <input type="hidden" name="product_id" value="23423">
        <input type="submit" value="Unsave">
    </form>
</div>

JQuery ...

$('#bin form').submit(function() {
                $.post($(this).attr('action'),{
                    success: function(data) { $(this).hide().siblings('form').show() },
                    data: $(this).serialize()

                });
                return false;
            })

Насколько я понимаю, строка return false; должна означать, что независимо от того, какие-либо вызовы функции отправки или нажатия на кнопку "Отправить"Кнопка или нажатие Enter означает, что моя функция будет выполнена, и браузер не перейдет к /bin/add или /bin/remove.Но по какой-то причине браузер меняет страницы.

Есть идеи, что я здесь не так делаю?Благодаря.

Answer 1

Возможно, ваш JavaScript не работает, поэтому выполняется поведение по умолчанию.

Попробуйте изучить XHR в таком инструменте, как Firebug.

Кроме того, вы можете попробовать event.preventDefault() (где первый аргумент вашего обратного вызова события event).

Answer 2

моя ставка, это из-за $(this), попробуйте это так ...

$('#bin form').submit(function() {
    var $this = $(this);
    $.post($this.attr('action'), {
        success: function(data) {
            $this.hide().siblings('form').show()
        },
        data: $this.serialize()

    });
    return false;
});

демо _{без ошибок}

демо _{с ошибкой}

Answer 3

Используйте event.preventDefault(), чтобы предотвратить действие по умолчанию для события. Одним из преимуществ является то, что вы можете поместить это перед запросом Ajax, чтобы в случае сбоя вы все равно запретили отправку формы.

Ваш код не выполняется, поскольку значение this в вашем успешном обратном вызове является глобальным window объектом. Ваша попытка скрыть это не удалась. Вы, вероятно, хотите, чтобы this ссылался на форму, например:

$('#bin form').submit(function(ev) {
    var _this = this;
    ev.preventDefault();
    $.post($(this).attr('action'), {
        success: function() {     
           $(_this).hide().siblings('form').show();
        },
        data: $(this).serialize()
    });
})

См. рабочий пример .

Answer 4

Является ли $(...).submit(...) внутри $(document).ready(function(){ code here });?

должно быть как:

$(document).ready(function() {
    $('#bin form').submit(function() {
            $.post($(this).attr('action'), {
                success: function(data) { $(this).hide().siblings('form').show(); },
                data: $(this).serialize()
            });
            return false;
        });
});