3

Magnific Popup バージョン 0.8.9を使用しています。

私は Ajax 経由でコンテンツをロードしており、コールバックを使用していますajaxContentAdded。このコールバックは、ポップアップに読み込まれたフォームを送信するためのイベント ハンドラーを次のように設定します。

$('.add-item-btn').magnificPopup({ 
    type: 'ajax',
    closeOnContentClick: false,
    callbacks: {
        ajaxContentAdded: HandleItemFormSubmit
    }
});

これは正常に機能し、フォームの送信は正しく処理されます。イベント ハンドラー関数はそれをサーバーに投稿し、(エラーの場合) エラー メッセージを含むフォーム全体を返します。この目的のために、ポップアップのコンテンツを返されたフォームに置き換え、送信ハンドラーを再度セットアップします。

function HandleItemFormSubmit()
{
    var popup = this;
    // Submit form using ajax
    $('form.item-form').submit(function()
    {
        var data = $(this).serialize();
        var url = $(this).attr('action');

        $.post(url, data, function(resp)
        {
            if (resp == 'OK')
            {
                // All good, close up
                popup.close();  
            }
            else
            {
                // Show HTML from response (with errors)
                popup.closeOnContentClick = false;
                popup.content.replaceWith(resp);
                popup.updateItemHTML();
                HandleItemFormSubmit();
            }
        });

        return false;
    });
}

ただし、closeOnContentClick2 つの異なる時点で false に設定されているにもかかわらず、コンテンツが置き換えられた後にコンテンツがクリックされると、ポップアップはすぐに閉じます (最初は機能します)。

ちなみに、ポップアップのコンテンツには単一のルート要素があります。

著者または他の誰かがここで助けてくれることを願っています。ここで何が問題なのかわかりません。

どうもありがとうございました！

4

2 に答える 2

1

別の解決策を見つけました：

$('html').on('submit', '#UR_FORM', function(e) {
    e.preventDefault();
    $.ajax({
        data: $(this).serialize(),
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        success: function(response) {
            var magnificPopup = $.magnificPopup.instance;
            magnificPopup.items[0].type = "inline";
            magnificPopup.items[0].src = response;
            magnificPopup.updateItemHTML();
        }
    });
});
于 2013-08-21T05:59:01.403 に答える
0

オブジェクトHandleItemFormSubmitに対してを呼び出す必要があります。popup

HandleItemFormSubmit.call(popup);

そうしないと、あなたがそうするように呼び出すと、HandleItemFormSubmit();がthisに設定されwindow、これは期待どおりに機能しません。

アップデート

これをelse句で使用します。

if (resp == 'OK')
{
    popup.close();  
}
else
{
    // Show HTML from response (with errors)
    popup.closeOnContentClick = false;
    popup.content.replaceWith(resp);
    popup.updateItemHTML();
    HandleItemFormSubmit.call(popup);
}
于 2013-06-22T12:44:30.077 に答える