Dynamic content inside fancybox via get

问题

I have multiple instances of fancybox working at the same time like this:

<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>

Showing the following 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>

With this call:

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

This doesn't work for me. Fancybox says "The requested content cannot be loaded. Please try again later.". If I get rid of the ?id=1 part of the href it will show up but it won't have the content that I need. Is this that I'm trying even possible with fancybox?

EDIT: In fact, checking it with firebug I see I'm getting a 404 error. Anyone can point me out in the right direction to see how I can achieve this?

回答1:

If I understand your questions properly I think you may need to rethink your approach. I'm not sure what you are trying to achieve by adding ?id=1 to your anchor. Fancybox shows content that is already loaded on the page. Once the HTML page has been rendered and sent to the browser, PHP plays no role in what happens on the client side.

You need to render all the content for each of the boxes when the page loads and then reference them within your internal links as posted below. Fancybox only deals with content that has been loaded on to the page, so you need to figure out the content of each box during it's initial rendering.

<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>

回答2:

I was searching for a solution for this, and couldn't find one.

I am creating a to-do list and when you click edit, fancybox pops up with the fields to edit each individual to-do item.

I eventually found a really simple way to do this.

Here is my link to edit the item:

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

Look closesly at: #editItem-$id

Then here is my content which it is loading.

$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>";

And again, look here: editItem-$id on the div.

I have deleted my correct info for security purposes.

But yeah, this pulls in the content which I want it to, because they each have individual and unique IDs from the database.

回答3:

You can use jquery.load() to make a request to your server and load that content dynamically into one fancybox div.

来源：https://stackoverflow.com/questions/6213052/dynamic-content-inside-fancybox-via-get

标签

php

jquery

fancybox