将变量传递给fancybox div

时间:2014-01-13 19:24:55

标签: php jquery variables fancybox

我有一个ul和一堆围绕lis的链接,它从数组中提取数据并输出不同的值。我希望当你点击这些链接时,它会将其中一个值传递到fancybox,就像现在它每次只是在数组中的第一个选项中,无论我点击哪个链接。

<ul>
<?php
while(list($key, $val) = each ($arrayresult))
        {                               
            echo '<a href="#inline" class="fancybox"><li style="padding: 2px; margin: 0px; list-style: none;">';
            echo '<img src="../images/profilepics/'.$charpic.'" style="float: right; padding-left: 10px; width: 40px;" />';
            echo '<h2>'.$val.' Position</h2>';
            echo '<p>Click here to apply for this position.</p>';
            echo '</li></a>';

            echo '<div id="inline" style="display:none;">';
            echo '<h1>Request Character Transfer</h1>';
            echo '<hr>';
            echo '<form id="transfer" action="TransferRequest" method="post">';
            echo '<label for="transfer_character">Character to Transfer</label>';
            echo '<select id="transfer_character" name="transfer_character">';
            echo '<option value="">Select Character</option>';

            $request_character_query = "SELECT * FROM character_database WHERE character_active ='1' AND user_id = $user_id ORDER BY character_firstname DESC";
            $request_character_result = mysqli_query($mysqli, $request_character_query);

                /*** loop over the results ***/
                foreach($request_character_result as $charrow)
                {
                    /*** create the options ***/
                    echo '<option value="'.$charrow['character_id'].'"';
                    if($charrow['character_firstname']==42)
                    {
                        echo ' selected';
                    }
                    echo '>'. $charrow['character_firstname'] . " " . $charrow['character_surname'] . '</option>'."\n";
                }
            echo '</select>';
            echo '<p>Applying for the '.$val.' position on the '.$shipname.'</p>';
            echo '<p>If this is correct, please submit below</p>';
            echo '<input type="hidden" value="'.$val.'" name="transfer_position">';
            echo '<input type="hidden" value="'.$ship_id.'" name="transfer_ship">';
            echo '<input type="hidden" value="'.$user_id.'" name="transfer_player">';
            echo '<input value="Submit Request" type="submit" class="styled">';
            echo '</form>';
            echo '</div>';
        }
    ?>
    </ul>

我已经在UL中获得了所有代码,希望这可行,但显然不行。我也试过在URL中传递变量,但是fancybox没有打开。这是fancybox代码;

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
</script>

美好而简单。

2 个答案:

答案 0 :(得分:2)

您正在为每个具有相同ID的fancybox命名,因此第一个默认情况下每次都会被拉出。不仅如此,但元素的重复ID不正确。

<div id="inline" style="display:none;">

应该是:

echo '<div id="inline'.$val.'" style="display:none;">';

假设你的$ val在每个循环中都是唯一的。否则使用其他独特的东西,即使循环计数器增加每个循环也没问题。

然后在你的链接代码中:

echo '<a href="#inline'.$val.'" class="fancybox"><li style="padding: 2px; margin: 0px; list-style: none;">';

答案 1 :(得分:0)

在您的链接中,使用data- *属性,如下所示:

<a href="..." data-recordID="123" ... >click here</a>

然后,在你的javascript中执行以下操作:

$(document).ready(function(){ 
     $(".fancybox").fancybox(
         {
            beforeLoad: function(){
                         $('#transfer_position').val($(this).data('recordID'); 
                        }
         }
     );
});

在将内容加载到fancybox之前,这应该将链接的data-recordID属性中的值加载到id为“transfer_postion”的表单字段中。