Question

我是网络数据库设计的新手。在我创建网站的同时，我也在研究它，并从中学习。但是现在我需要你的帮助。以下是确切的工作代码。有人可以帮我编码....

我的问题是：数据库中的所有记录都显示在分页视图中，其中$row["name"]突出显示可点击的覆盖弹出窗口。

我的问题是什么？

点击<span class="page_name"><a class="show-popup" href="#">'.$row["name"].'</a> </span>时，我需要使用$row["id"]主键在数据库中找到所选产品，然后
在DIV CLASS="OVERLAY-CONTENT"下的重叠式弹出窗口中显示它。

<?php
session_start();
$catphp = $_SESSION['catphp'];
include("sqllnk.php"); //SQL connection
?>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="overlay/custom.js"></script>
<link href='overlay/overlaypopup.css' rel='stylesheet' type='text/css'>
</head>
<?php
//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
//validate page number is really numaric
if(!is_numeric($page_number)){ die('Invalid page number!'); }
//get current starting point of records
$position = ($page_number * $item_per_page);
//Limit our results within a specified range. 
$results = mysqli_query($mysqli,"SELECT * FROM products WHERE itemcon='$catphp' ORDER BY id ASC LIMIT $position, $item_per_page");
//output results from database to a paginated window
echo '<ul class="page_result">';
while($row = mysqli_fetch_array($results)) {
// All records from database is shown in paginated view where $row["name"] is highlighted for the clickable overlay popup window. Whereas my PROBLEM is? When $row["name"] is clicked I need to use the $row["id"] primary key to locate the selected product in the database and then DISPLAY it in the overlay popup window under DIV CLASS="OVERLAY-CONTENT".
echo '<li id="item_'.$row["id"].'">'.$row["id"].'.
<span class="product-thumb"><img src="uploads/thumbs/'.$row['pic'].'"></span>
<span class="page_name"><a class="show-popup" href="#">'.$row["name"].'</a> </span><br /><br />
<span class="page_description">'.$row["description"].'</span><br /><br />
<span class="page_price">Price:'.$row["price"].'</span>
</li>';
} ?>

<div class="overlay-bg">
<div class="overlay-content">
<p>Still working on details. <br /> Please come back soon.</p>
<?php // Here it should show the prefetch record in the database table ?>
<button class="close-btn">Close</button>
</div>
</div>

<?php
echo '</ul>';
?>

这是custom.js

    $(document).ready(function(){
    // show popup when you click on the link
    $('.show-popup').click(function(event){
        event.preventDefault(); // disable normal link function so that it doesn't refresh the page
        var docHeight = $(document).height(); //grab the height of the page
        var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where you're scrolling
        $('.overlay-bg').show().css({'height' : docHeight}); //display your popup and set height to the page height
        $('.overlay-content').css({'top': scrollTop+20+'px'}); //set the content 20px from the window top
      $
    });

    // hide popup when user clicks on close button
    $('.close-btn').click(function(){
        $('.overlay-bg').hide(); // hide the overlay
    });

    // hides the popup if user clicks anywhere outside the container
    $('.overlay-bg').click(function(){
        $('.overlay-bg').hide();
    })
    // prevents the overlay from closing if user clicks inside the popup overlay
    $('.overlay-content').click(function(){
        return false;
    });

});

任何人都可以帮助我....谢谢。

Answer 1

这个问题主要与javascript有关。更具体的Ajax（一种异步调用Web服务器以获得一些结果的方法）。

检查fancybox ajax示例：http://fancybox.net/。这正是你所需要的。

您还需要一个URL（页面）作为参数（例如：http://html.net/tutorials/php/lesson10.php）接收数据库ROW的ID，您将在其中显示该特定行的所有详细信息。 ajax做什么？他以asnyc方式访问该URL（不中断您的页面）并获取结果的HTML，然后您（或fancybox）将其放入弹出窗口。

JQuery框架Ajax示例：http://www.w3schools.com/JQuery/tryit.asp?filename=tryjquery_ajax_ajax

另外，我建议您将PhP代码与HTML部分分开。重用代码或阅读和理解代码会更容易（我主要讨论的是调用数据库的PHP部分）。

在PhP中查看本教程中的MVC模式：http://www.sitepoint.com/the-mvc-pattern-and-php-1/

如何将选定的sql数据值显示到叠加弹出窗口

1 个答案: