Question

我构建了一个AJAX成员搜索，每次更新搜索过滤器时都会更新结果。它工作正常，但我需要能够从结果中弹出一个颜色框模态窗口，但我无法。

我的猜测是我可以通过jQuery来更新dom，但我不确定要使用什么。

在没有提供所有特定代码的情况下，我在主文件中构建搜索过滤器和脚本，将结果发布到辅助search.php文件，该文件根据发布到其上的选项执行查询，收集所有数组中的结果，然后在ajax div中的父页面上弹出它们。给出的每个结果都应该有一个链接，这将打开一个新的模态窗口，将该人添加为朋友。

以下是主父页面中的ajax脚本：

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction( sel )
{

var ajaxRequest;  // The variable that makes Ajax possible!

try{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
} catch (e){
    // Internet Explorer Browsers
    try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
        }
    }
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        var ajaxDisplay = document.getElementById('ajaxDiv');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }
}

if (document.getElementById('ac18').checked) {
var sex = document.getElementById('ac18').value; }
if (document.getElementById('ac19').checked) {
var sex = document.getElementById('ac19').value; }
if (document.getElementById('ac20').checked) {
var sex = document.getElementById('ac20').value; }

var cb_activities = document.getElementById('ac22').value;

var cb_interests = document.getElementById('ac24').value;

var cb_music = document.getElementById('ac26').value;

var cb_books = document.getElementById('ac28').value;

var cb_movies = document.getElementById('ac30').value;

var cb_tv = document.getElementById('ac32').value;

var age = document.getElementById('age').value;
var minage = document.getElementById('minage').value;
var maxrec = document.getElementById('maxrec').value;
var minrec = document.getElementById('minrec').value;
var vcountry = document.getElementById('country').value;
var vmilesfrom = document.getElementById('milesfrom').value;
var vstate = document.getElementById('state').value;
var vcity = document.getElementById('city').value;
var queryString = "?sex=" + sex + "&age=" + age + "&minage=" + minage + "&maxrec=" + maxrec + "&minrec=" + minrec + "&vcountry=" + vcountry + "&vmilesfrom=" + vmilesfrom + "&vstate=" + vstate + "&vcity=" + vcity + "&cb_activities=" + cb_activities + "&cb_interests=" + cb_interests + "&cb_music=" + cb_music + "&cb_books=" + cb_books + "&cb_movies=" + cb_movies + "&cb_tv=" + cb_tv;
ajaxRequest.open("GET", "/components/com_cbajaxsearch/search.php" + queryString, true);
ajaxRequest.send(null); 
}
//-->
</script>

以下是来自search.php页面的一些代码，用于构建结果：

echo '<tr><td class="resultcell">';
$display_string .= "<div class='memberresults' style='$spanstyle;'>      <center>$photo<br /><span class='memsearchusername'>$username</span><br /><span class='memsearchaddf'><a href='index.php?option=com_comprofiler&Itemid=2&act=connections&task=addConnection&connectionid=$id'></a></span>$afcolorbox<!-- $prolink --></center></div>";
echo '</tr></td>';
}

if ($num_rows == 0) {
echo '<div class="resultnum"><img class="cbasnoresults" src="components/com_cbajaxsearch/images/nomatches.png" alt="No Matches" title="No Matches" /></div>';
}
else {
echo '';
}
echo $display_string;
$display_string .= "</table>";

如果我需要，我可以发布两个文件中的完整代码，但我认为这至少可以让你知道如何在不占用大量空间的情况下构建它。关于如何让颜色框从结果中弹出的想法？

Answer 1

请告诉我们代码中颜色框的位置？

不知道，我仍然认为我知道你的问题.. 想想你的问题： - 在页面加载时，DOM已准备就绪，并且为选择器启动了colorbox，AJAX调用了一个新的页面，其中一些DOM元素位于颜色框选择器列表中，但是没有被注意到，因为它在加载到页面之后选择器被javascript读取。

现在试试这个，因为它为所有，现有和新的“a [rel ='lightbox']”观看“body #main”：

$("body #main").delegate("a[rel='lightbox']", "click", function (event) {
                    event.preventDefault();
                    $.colorbox({href: $(this).attr("href"),
                            transition: "fade",
                            innerHeight: '515px',
                            innerWidth: '579px',
                            overlayClose: true,
                            iframe: true,
                            opacity: 0.3});});

这种方式不是等待让插件监视事件，而是使用.delegate（）观察事件，并动态执行颜色框。

无法从ajax结果中的链接打开colorbox模态窗口

1 个答案: