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

Question

我一直在从事一个涉及收集/处理搜索结果的小项目，我想你们也许可以伸出援手。我有一个小脚本，它从搜索输入中获取搜索值，通过 PHP 处理它，然后通过 JS 将结果收集并插入到花式框中。到目前为止，一切进展顺利，但我似乎无法解决下一个问题。

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

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 提供了许多基于事件的回调函数，用于在 box 之前、期间和之后与 fancybox 元素交互，shown 或 loaded。这为您提供了很大的灵活性。

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

看看我整理的这个小提琴：Fancybox afterLoad() callback to return a function

这只是我的解决方案，我还是非常学习js的，所以我不能说这是best的方式，欢迎反馈或编辑。

基本上我们将使用fancybox的afterLoad() API函数，以便在成功加载由您成功的$.ajax调用驱动的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 调用，这里我只演示了一个简单的来自 jquery 的 DOM 更新。

Answer 2

尝试将您的 javascript 更改为使用“点击”而不是“打开”。应该这样做

jQuery(document).ready(function(submit) {
$('#check').click(function (e) {
e.preventDefault(); 
   $.ajax({
   ....
   }); 
 }); 
});