dongyu5104 2014-09-13 21:26
浏览 54
已采纳

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

I have a MySQL database of a bible that I query via php. Right now i'm in the testing phase. Below is my test file where I display a specific Chapter of a Book in a modal. The problem is that I have no idea how to essentially 'display the next chapter (or previous chapter)' when a user clicks the left or right arrow buttons on the footer of the modal.

Currently the test file shows "Genesis 12". How can I allow the user to see Genesis 13 (inside the same modal) when the user clicks the right arrow button (at the bottom)?

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

.. Any help will be greatly appreciated!!

  • 写回答

1条回答 默认 最新

  • doulian4762 2014-09-13 22:00
    关注

    You should look into AJAX to do something like that properly, what AJAX basically does is load content after the page has finished loading. So you can get rows out of your database without reloading the page. A very basic approach would be:

    Change the href of the arrows to call the JavaScript function 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>

    Add the loadNew function to your script tag:

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

    Now all that's left is to create the PHP file (fetch.php), that would be something like:

    <?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>";
    }
} 
?>

    Then save the file and edit the path http://yoursiteurl.com/fetch.php to the correct one.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 LiBeAs的带隙等于0.997eV,计算阴离子的N和P
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 来真人，不要ai！matlab有关常微分方程的问题求解决，
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab，jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算