Question

我有一个圣经的MySQL数据库，我通过php查询。现在我正处于测试阶段。下面是我的测试文件，其中我以模态显示书的特定章节。问题是我不知道如何基本上显示下一章（或前一章）＆＃39;当用户单击模态页脚上的左箭头或右箭头按钮时。

目前，测试文件显示＆＃34; Genesis 12＆＃34;。当用户单击右箭头按钮（在底部）时，如何允许用户查看Genesis 13（在同一模态内）？

<!DOCTYPE html>
<html>
<head>
   <?php require "config.php"; ?>
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
   <link rel='stylesheet' type='text/css' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'/>
   <script>
      $(document).ready(function() {
         $('.btn').click(function() {
            $("#myModal").modal('show');
         });
      });
   </script>
   <style>
       p, span, div { font-family:"Helvetica Neue",Verdana,Helvetica,Arial,sans-serif;font-size:1.3rem;line-height:1.8;}
       .selverse { border-bottom:1px dotted blue;}
   </style>
</head>
<body>
     <button type='button' class='btn btn-success'>Click</button>

     <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

        <?php
            $book = "Genesis";
            $chapter = "12";
            $verse = "5";
            $v_under = "<span style='text-decoration:underline;'>";
            $v_end = "</span>";

            echo "<h4 class='modal-title'>".$book." ".$chapter."</h4>";
            echo "</div><div class='modal-body'>";

            $result = $db->prepare("SELECT * FROM `asv` WHERE Book = :book AND Chapter = :chapter");
            $result->BindParam(':book',$book);
            $result->BindParam(':chapter',$chapter);
            $result->execute();
                $y = 0;
                while ($row = $result->fetch(PDO::FETCH_ASSOC)){
                    $bookx = $row['Book'];
                    $chapterx = $row['Chapter'];
                    $versex = $row['Verse'];
                    $versetext=$row["VerseText"];

                    if ($versex == $verse) {
                        echo "<span style='color:rgb(57, 128, 57);font-weight:bold;'><sup style='padding-left:0.5em;'>".$versex."</sup></span><span class='selverse' id='v".$versex."'>".$versetext."</span>";
                    } else {
                        echo "<span style='color:rgb(57, 128, 57);font-weight:bold;'><sup style='padding-left:0.5em;'>".$versex."</sup></span><span id='v".$versex."'>".$versetext."</span>";
                    }
                } 
        ?>
            </div>
            <div class="modal-footer" style='text-align:center;'>
                <a href='javascript:;'><i  style='float:left;margin-left:1em;' class='fa fa-angle-left fa-2x'></i></a>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                <a href='javascript:;'><i style='float:right;margin-right:1em;' class='fa fa-angle-right fa-2x'></i></a>
            </div>
          </div>
        </div>
      </div>

</body>
</html>

..非常感谢任何帮助!!

Answer 1

你应该调查AJAX来做正确的事情，AJAX基本上做的是在页面加载完成后加载内容。因此，您可以从数据库中获取行而无需重新加载页面。一个非常基本的方法是：

更改箭头的href以调用JavaScript函数loadNew();

<div class="modal-footer" style='text-align:center;'>
    <a href='javascript:loadNew('previous');'><i style='float:left;margin-left:1em;' class='fa fa-angle-left fa-2x'></i></a>
    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
    <a href='javascript:loadNew('next');'><i style='float:right;margin-right:1em;' class='fa fa-angle-right fa-2x'></i></a>
</div>

将loadNew函数添加到脚本标记中：

<script>
$(document).ready(function() {
    $('.btn').click(function() {
        $("#myModal").modal('show');
    });
});

function loadNew(type){
    //We pass the type (previous or next row) and the current ID of the row as GET variables to the fetch.php script
    $.get("http://yoursiteurl.com/fetch.php?type="+type, function(data){
        $(".modal-header").html(data);
    });
}
</script>

现在剩下的就是创建PHP文件（fetch.php），类似于：

<?php
session_start();

if(!isset($_SESSION['book'])){
    $_SESSION['book'] = "Genesis";
    $_SESSION['chapter'] = 12;
    $_SESSION['verse'] = 5;
}

if($_GET['type'] == 'next'){
    //Select the next verse, you are probably going to want to add a check to see if the chapter is available, if not go to the first chapter or something like that
    $_SESSION['chapter'] = $_SESSION['chapter'] + 1;
} else{
    $_SESSION['chapter'] = $_SESSION['chapter'] - 1;
}

$book = $_SESSION['book'];
$chapter = $_SESSION['chapter'];
$verse = $_SESSION['verse'];
$v_under = "<span style='text-decoration:underline;'>";
$v_end = "</span>";

echo "<h4 class='modal-title'>".$book." ".$chapter."</h4>";
echo "</div><div class='modal-body'>";

$result = $db->prepare("SELECT * FROM `asv` WHERE Book = :book AND Chapter = :chapter");
$result->BindParam(':book',$book);
$result->BindParam(':chapter',$chapter);
$result->execute();
$y = 0;

while ($row = $result->fetch(PDO::FETCH_ASSOC)){
    $bookx = $row['Book'];
    $chapterx = $row['Chapter'];
    $versex = $row['Verse'];
    $versetext=$row["VerseText"];

    if ($versex == $verse) {
        echo "<span style='color:rgb(57, 128, 57);font-weight:bold;'><sup style='padding-left:0.5em;'>".$versex."</sup></span><span class='selverse' id='v".$versex."'>".$versetext."</span>";
    } else {
        echo "<span style='color:rgb(57, 128, 57);font-weight:bold;'><sup style='padding-left:0.5em;'>".$versex."</sup></span><span id='v".$versex."'>".$versetext."</span>";
    }
} 
?>

然后保存文件并将路径http://yoursiteurl.com/fetch.php编辑为正确的路径。

在模态PHP，jQuery中渲染模态的新数据

1 个答案: