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

Processing a PHP request from an ajax-driven Fancybox element on the same page

本文关键字：Fancybox 元素 请求 PHP ajax 一页 处理      更新时间：2024-06-21

我一直在做一个涉及收集/处理搜索结果的小项目，我想你们可能会伸出援手。我有一个小脚本，它从搜索输入中获取搜索值，通过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'
        }); 
        } 
    }); 
}); 
});

上面的脚本主要基于这个后

谢谢你的想法！

fancybox API提供了许多基于事件的回调函数，用于在箱为shown或loaded之前、期间和之后与fancybox元素交互。这给了你很大的灵活性。

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

看看我放在一起的这个小提琴：Fancybox afterLoad（）回调返回一个函数

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

基本上，我们将使用fancybox的afterLoad() API函数，以便在成功加载由成功的$.ajax调用驱动的fancybox元素后返回一个函数，然后收听加载到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更新。

尝试将javascript更改为使用'click'而不是'on'。这应该是

jQuery(document).ready(function(submit) {
$('#check').click(function (e) {
e.preventDefault(); 
   $.ajax({
   ....
   }); 
 }); 
});
相关文章：