javascript - 在同一页面上处理来自 ajax 驱动的 Fancybox 元素的 PHP 请求

Question

我一直在从事一个涉及收集/处理搜索结果的小项目，我认为你们可以提供帮助。我有一个小脚本，它从搜索输入中获取搜索值，通过 PHP 对其进行处理，然后通过 JS 收集结果并将其插入到 fancybox 中。到目前为止，一切进展顺利，但我似乎无法解决下一步问题。

我无法与精美框中的任何元素进行交互，因为它会重新加载页面(例如，上一个和下一个按钮或搜索输入)。您将如何使用 AJAX 将新内容或表单输入加载到同一页面实例上的 fancybox 中？

HTML:

<form action="search.php" method="post" name="search" id="search">
<input size="35" value="" placeholder="Search" name="search" id="result" autocomplete="off">
<button id="check" data-fancybox-type="ajax" href="search/search.php" id="check">Search</button> 

脚本:

jQuery(document).ready(function(submit) {
$('#check').on("click", function (e) {
    e.preventDefault(); 
    $.ajax({
        type: "POST",
        cache: false,
        url: "search.php",
        data: $("#result").serializeArray(), 
        success: function (data) {
        // on success, post returned data in fancybox
        $.fancybox(data, {
            // fancybox API options
            fitToView: true,
            openEffect: 'fade',
            closeEffect: 'fade'
        }); 
        } 
    }); 
}); 
}); 

上面的脚本主要是基于 this post

感谢您的想法!

Answer 1

fancybox API提供了许多基于事件的回调函数，用于在框显示或加载之前、期间和之后与 fancybox 元素进行交互。这为您提供了很大的灵 active 。

我会在 Fancybox2 API 中使用 afterLoad() 回调函数.

看看我放在一起的这个 fiddle :Fancybox afterLoad() callback to return a function

这只是我的解决方案，我仍然是 js 的学生，所以我不能说这是最好的方式，我欢迎反馈或编辑。

基本上，我们将使用 fancybox 的 afterLoad() API 函数，以便在成功加载由成功的 $.ajax 驱动的 fancybox 元素时调用 a返回函数，然后监听加载到您的 fancybox 中的元素的点击事件。

$.fancybox(echoData, {
                    // fancybox API options
                    fitToView: true,
                    openEffect: 'fade',
                    closeEffect: 'fade',
                    afterLoad: function () {
                        return fancyUpdateMyWay = function () {
                            var a = Math.random();
                            var newHtml = "<h4>UPDATED=" + a + "</h4>";
                            $("#fancyResult").html(newHtml);

                        }

                    }

                });

注意:我想您会希望从 fancybox 结果中进行进一步的 ajax 调用，这里我只演示了一个简单的 DOM 从 jquery 更新。