Как отправить форму и обновить colorbox без перезагрузки страницы

Question

это продолжение до: jQuery изменить содержимое colorbox

Теперь содержимое исходного colorbox (test_2.html) представляет собой простую форму: например,

<form id="foo" action="test_3.html">
    <imput type="submit" id="formInput" value="send form">
</form>

Форма должна быть отправлена, а содержимое test_3.html должно быть загружено в тот же цветовой ящик.

Answer 1

Если вы добавите это в docReady вашей главной страницы, оно должно позаботиться обо всем:

$('form').live('submit', function(e){
    var successHref = this.action,
        errorHref = "formError.php";

    e.preventDefault();
    $('#cboxLoadingGraphic').fadeIn();
    $.ajax({
        type: "POST",
        url: "processForm.php",
        data: {someData: $("#someData").val()},
        success: function(response) {
            if(response=="ok") {
                console.log("response: "+response);
                $.colorbox({
                    open:true,
                    href: successHref   
                });
            } else {
                $.colorbox({
                    open:true,
                    href: errorHref
                });
            }
        },
        dataType: "html"
    });

    return false;
});

Этот код делает несколько предположений. Одним из них является то, что это отправляет данные в «processForm.php» (как вы можете видеть) и ожидает ответа «хорошо» (в обычном тексте, без json), когда все получится. Если вас не волнует ответ или ошибка, вы можете просто удалить блок if-else и открыть поле цвета со страницей, которую вы установили в action. В любом случае, вы, вероятно, захотите изменить это, но это даст вам представление о том, как это можно сделать.