在同一頁面處理來自ajax驅動的Fancybox元素的PHP請求

我一直在處理一個涉及收集/處理搜索結果的小項目，我認爲你們可能能夠伸出援手。我有一個小腳本，它從搜索輸入中獲取搜索值，通過PHP處理它，然後通過JS收集結果並將其插入到fancybox中。到目前爲止，一切進展順利，但我似乎無法解決下一個問題。在同一頁面處理來自ajax驅動的Fancybox元素的PHP請求

我無法管理與花式框中的任何元素進行交互，因爲它會重新加載頁面（例如，上一個和下一個按鈕或搜索輸入）。你將如何使用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

感謝您的想法低音！

來源

2013-12-10 Imagesthataspire

「$ .ajax（）。data」結果中的HTML是什麼樣的？ – cerd

AJAX在處理字段值後收集search.php的結果。它看起來像一個標準的谷歌搜索結果。 – Imagesthataspire

的fancybox API提供了許多基於事件的回調函數期間和箱是shown或loaded之後與的fancybox元素交互，前，。這可以讓你有很大的靈活性。

我會使用Fancybox2 API內的afterLoad()回調函數。

看到這個小提琴我放在一起：Fancybox afterLoad() callback to return a function

這只是我的解決方案，我仍然非常JS的學生，所以我不能說這是best方式，我歡迎任何意見或編輯。

基本上，我們將使用的fancybox的afterLoad() API函數，以便在從你的成功$.ajax通話函數返回驅動的fancybox元素的成功加載然後聽加載到的fancybox元素的click事件。

$.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更新。

來源

2013-12-11 00:27:56 cerd

感謝您的幫助和您的工作。原則上，這似乎工作，但我還沒有得到它的功能。 – Imagesthataspire

你還有什麼部分有麻煩 - 如果需要的話，我可以告訴你一些其他代碼，我會處理關閉盒子，然後將事件推回到父窗口。這聽起來相當複雜 - 你可能想看看angular.js - 它有一條學習曲線 - 但事件/視圖驅動的東西是非常容易的。 – cerd

問題是已經創建的內容。結果看起來像Google搜索結果（搜索框後跟一列鏈接和描述以及底部的分頁）。所以我可以用你的解決方案在iframe中重新提交搜索，但我似乎無法抓住已經生成的內容（即下一頁）並重新填充iframe。我知道它的可能性，我只是沒有想出如何用JS調用它。我看看我能不能擺出小提琴向你展示。 – Imagesthataspire

嘗試改變你的JavaScript使用'點擊'，而不是'上'。這應該這樣做

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

來源

2013-12-10 23:38:44 Jeribo

如果使用jQuery 1.7+，你只是使用簡碼，但沒有別的。這並不能解決問題。 – JFK

不幸的是，肯尼迪是正確的。問題在於fancybox構建的內容。有些東西需要能夠鏈接出去，比如搜索結果，而另一些則需要將fancybox作爲一個窗口。感謝您的幫助，但。 – Imagesthataspire

在同一頁面處理來自ajax驅動的Fancybox元素的PHP請求

回答

相關問題