我有一个搜索页面,它从表单中获取用户输入,然后将该信息发送到一个PHP文件,该文件向外部服务器发送cURL调用。然后,PHP文件从服务器获取返回的数组,并将一些HTML回显到原始搜索页面中的"results"div。
我想做的是设置它,这样当用户单击"结果"div中的一个行项时,就会出现一个模态窗口,其中包含有关所单击的单个项的更多信息。
我知道如何创建一个jQuery脚本,将处理点击一个单一的,唯一的链接,并通过查询服务器再次生成模态窗口(通过一个单独的PHP文件,格式的模态框与额外的信息和大小正确)。我不知道的是如何处理所有这些动态创建的内容。
下面是第一个PHP文件回显的内容:
[remove at edit;见下文)
它对服务器返回的数组中的每个"清单"执行此操作。
当点击#modalLaunchdiv中的锚标记时,我发现了创建模态窗口的方法(这来自一个测试页面,我一直在用它来弄清楚如何操纵模态窗口及其内容):
[在编辑时删除,见下文]
我开始怀疑我需要完全放弃这种方法,并尝试使用"onClick"策略,但我又不知道如何在所有函数之间传递相关信息。的帮助!
编辑:我问这个问题真的很糟糕。我很抱歉。下面是我使用的代码的一个更好的表示:
PHP文件:($data是从外部服务器提取的数组。我已经删除了一堆无关的变量,所以只要假设它们映射到一些合理的东西。)
$data = unserialize($data);
$listings = $data["listings"];
echo "<ul id='listings_grid'>";
for($i=0;$i<$data["count"];$i++)
{
$url = "/listings/".$listing_id;
echo "<li>
<a href='' target='_blank' data-listing-id='".$listing_id."'>
<div class='listing_thumb_image_container'>
<img class='listing_thumb_image' src='".$mainPhoto."'/>
</div>
<div class='listing_thumb_content'>
<br>Rent: $".$rent."
<br>Bedrooms: ".($bedrooms_count==0 ? "Studio" : ($bedrooms_count=='0.5' ? "Convertible" : $bedrooms_count))."
<br>Listing ID: ".$listing_id."
</div>
</a>
</li>";
}
echo "</ul>";
搜索页面:
(再次抽出大量多余的内容)
<?php
<script>
$(document).ready(function(){
$.post($("#html-form").attr("action"),$("#html-form").serialize(),function(data){
$("#search_results").html(data);
});
});
$(document).ready(function(){
$("#html-form").on('change submit',function(){
$.post($("#html-form").attr("action"),$("#html-form").serialize(),function(data){
$("#search_results").html(data);
});
return false;
});
});
$(document).on('click','#search_results li',function(){
$('.modalDialog').css('display','block','opacity','1','pointer-events','auto');
var href = $(this).children('a').attr('href');
$('#openModalContent').load(href);
return false;
});
</script>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<div id="openModalContent"></div>
</div>
</div>
<div id="content">
<div id="search_form"><form></form></div>
<div id="search_results" style="margin:0 auto;"></div>
</div>
<?php include ('footer.php'); ?>
那么我该怎么做呢?由于某种原因,当我插入到目前为止答案所提供的选项时,我没有看到出现模态框。这可能与CSS有关:目前,模态窗口只有在受到:target伪类的影响时才会变得不透明。建议吗?
如果你想让你的动态生成的内容能够做的东西,如果你使用JQuery 1.9及以上的尝试:
$(document).on('click','#openModalContent li',function(){
var href = $(this).children('a').attr('href');
$('#yourModalBox').load(href).show(888);
return false;
});
在生成的HTML中为锚添加data-listing-id属性:
<a href='".$url."' target='_blank' data-listing-id='".$listing_id."'>
并在点击处理程序中使用该属性,如:
$('#modalLaunch a').click(function(){
$('#openModalContent').load('/listings.php', {id:$(this).data("listing-id")});
});