通过 get 在 fancybox 中的动态内容答案

【问题标题】：Dynamic content inside fancybox via get通过 get 在 fancybox 中的动态内容
【发布时间】：2012-10-01 23:14:11
【问题描述】：

我有多个像这样同时工作的 fancybox 实例：

<a class="grupito" href="?id=1#various1">Group 1</a>
<a class="grupito" href="?id=2#various1">Group 2</a>
<a class="grupito" href="?id=3#various1">Group 3</a>

显示如下 div：

<div style="display: none;">
   <div id="various1">
       //Select that shows the people from the group here depending on the id 
       //of the link with a $_GET['id'] variable (from database)
   </div>
</div>

有了这个电话：

$("a.grupito").fancybox({
            'titlePosition'     : 'inside',
            'transitionIn'      : 'none',
            'transitionOut'     : 'none'
        });
});

这对我不起作用。 Fancybox 提示“无法加载请求的内容。请稍后再试。”。如果我去掉 ?id=1 的 href 部分，它会显示出来，但它不会有我需要的内容。我正在尝试使用 fancybox 吗？

编辑：事实上，用萤火虫检查它我发现我收到了 404 错误。任何人都可以指出我正确的方向，看看我如何实现这一目标？

【问题讨论】：

标签： php jquery fancybox

【解决方案1】：

我正在寻找解决方案，但找不到。

我正在创建一个待办事项列表，当您单击编辑时，fancybox 会弹出，其中包含用于编辑每个待办事项的字段。

我最终找到了一种非常简单的方法。

这是我编辑该项目的链接：

<div class='edit' id='$id'>
    <a href='#editItem-$id' class='editLink'>edit</a>
</div>

仔细看：#editItem-$id

然后这是我正在加载的内容。

$getItemId = mysql_query("SELECT * FROM the_items");
$num_rows = mysql_num_rows($getItemId);

while($row = mysql_fetch_array($getItemId)) {
$this_is_the_id= $row['this_is_the_id'];
$this_is_the_title= $row['this_is_the_title'];
$iteminfo= $row['iteminfo'];
$highlow= $row['highlow'];
$whoto= $row['whoto'];
$finished= $row['finished'];
$date= $row['date'];

    echo "<div style='display: none'>
              <div id='editItem-$id'>
                  <div class='item'>
                      <div class='itembg'>
                          <div class='title'>
                              <input type='text' id='title' name='title' value='$this_is_the_title' />
                          </div>
                          <div class='controls'>
                              <div class='edit' id='$id'>
                                  <a href='#editItem-$id'>edit</a>
                              </div> 
                              <div class='delete' id='$id'>
                                  <a href='?act=delete&id=$id'>delete</a>
                              </div>
                          </div>
                          <div class='item_desc' style='margin-top: 10px;'>
                              <div class='description'>
                                  <textarea id='description'>$iteminfo</textarea>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>";

再一次，看这里：editItem-$id 在 div 上。

出于安全考虑，我删除了正确的信息。

但是，是的，这会提取我想要的内容，因为它们每个都有来自数据库的单独且唯一的 ID。

【讨论】：

【解决方案2】：

如果我正确理解您的问题，我认为您可能需要重新考虑您的方法。我不确定通过将 ?id=1 添加到您的锚点来达到什么目的。 Fancybox 显示页面上已经加载的内容。一旦 HTML 页面被渲染并发送到浏览器，PHP 就不再参与客户端发生的事情。

您需要在页面加载时呈现每个框的所有内容，然后在您的内部链接中引用它们，如下所示。 Fancybox 仅处理已加载到页面上的内容，因此您需要在初始渲染期间弄清楚每个框的内容。

<a class="grupito" href="#various1">Group 1</a>
<a class="grupito" href="#various2">Group 2</a>
<a class="grupito" href="#various3">Group 3</a>

<div style="display: none;">
   <div id="various1">
       //The content from group 1
   </div>
   <div id="various2">
       //The content from group 2
   </div>
   <div id="various3">
       //The content from group 3
   </div>
</div>

【讨论】：

我怀疑这一点，但感谢您确认。我想做的解决方案是使用 fancybox 来调用 iframe 而不是内联内容。这样我打开了一个可以处理 get 变量的新页面。

【解决方案3】：

您可以使用jquery.load() 向您的服务器发出请求并将该内容动态加载到一个fancybox div 中。

【讨论】：