如何将值从数据库传递到php中的弹出窗口?

时间:2016-03-19 20:58:03

标签: javascript php jquery html

我正在研究我的最终项目并使用PHP,HTML和Jquery开发Web应用程序。我的数据库中有一些记录,首先我在主页面的div中显示每条记录的摘要。第二,当用户点击主页面中的Detail按钮时,我想创建以主页面为背景的弹出窗口。我可以使用Javascript和Jquery创建弹出窗口,但我无法将每个记录的id传递给Details按钮或弹出窗口div。这是我的代码的一部分:

<?php $count = 0; ?>
     <div class="container">
        <div class="col-md-9 join-info">
            <div id="timeline">
<?php
$campaigns = $campaign_arr;
for($i=0;$i<count($campaigns);$i++){
$aid1 = $campaigns[$i]; 
?>              <a name="camps"></a>
                <div class="timeline-item" >   


                    <div>
                        <div class="baslik">
                                <h2> <?php echo $aid1["aid_name"]; ?> </h2>
                                <section class="fave"></section>
                            </div>

                        <div class="aid_details">
                            <p>
                                <?php echo $aid1["aid_comment"]; ?>
                            </p>
                        </div>
                                                <div class="bottom">
                        </div>
<?php 
$item = new Items();
$item->openDB();
$items = $item->getItemsByAidID($aid1["id"]);
for($j=0;$j<count($items);$j++){
    $it = $items[$j];
?>
<div class="rates">
                             <p> <?php echo $it["item_name"]; ?> </p>
                             <div class="progress">
                                <div class="progress-bar progress-bar-danger" style=<?php echo "width:" . $it["fill_rate"] . "%"; ?> ></div>
                             </div><p> eksik: <?php echo $it["needed"]; echo "\n"; ?> &nbsp karşılanan: <?php echo $it["provided"]; ?> </p>
                        </div>
                        <?php } $item->closeDB();  ?>

                        <div class="col-md-3 join-link">
                            <a data-js="open" class="btn">Show Details >></a>

                        </div>

                    </div>
                </div>
                <?php $count++; } ?>
            </div> 

        </div>
     </div>
<!-- end of embedding campaigns-->
</main> <!-- cd-main-content --> <!-- in filter.php page -->
            </div> 

        </div>
</div>
 <div class="container">
        <div class="col-md-9 join-info">
            <div id="timeline">
<div class="popup">

    <div class="timeline-item">
    <div class="timeline-content">

                        <div class="aid_details">

                            <!-- I have failed this point -->
                        </div>

<button name="close">Back</button>
<button name="Katıl">Close!</button>
                    </div>
                </div>
                </div><!--popup -->
<!----></div></div></div>

我在主页面的不同div中显示数据库中的每条记录,这些div有一个Show Details按钮。问题是我无法将每条记录的aid_id值传递给弹出窗口。是否有人可以提供帮助?抱歉我的英语和我是PHP的初学者。 有一个javascript部分来创建弹出窗口:

function popupOpenClose(popup) {

    /* Add div inside popup for layout if one doesn't exist */
    if ($(".wrapper").length == 0){
        $(popup).wrapInner("<div class='wrapper' ></div>");

    }

    /* Open popup */
    $(popup).show();


    /* Close popup if user clicks on background */
    $(popup).click(function(e) {
        if ( e.target == this ) {
            if ($(popup).is(':visible')) {
                $(popup).hide();
            }
        }
    });

    /* Close popup and remove errors if user clicks on cancel or close buttons */
    $(popup).find("button[name=close]").on("click", function() {
        if ($(".formElementError").is(':visible')) {
            $(".formElementError").remove();
        }
        $(popup).hide();
    });
}

$(document).ready(function () {
    $("[data-js=open]").on("click", function() {
        popupOpenClose($(".popup"));
    });
});

1 个答案:

答案 0 :(得分:0)

一种简单的方法是为查询中的每个项目创建一个隐藏的div,并根据项目ID为其提供唯一的ID。

<div id='hidden_details_<?php echo $the_item_id; ?>' class='hidden_class'>
    put the details here
</div>

然后我会在点击特定详细信息按钮时使用jQuery打开每个隐藏的div。

请注意,如果您没有很多物品,这只会是有效的负担。如果你有超过10个或20个项目(只是猜测),我会寻找一个不同的解决方案来避免巨大的页面加载。