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 乌班图ip地址配置及远程SSH
  • ¥15 怎么让点阵屏显示静态爱心，用keiluVision5写出让点阵屏显示静态爱心的代码，越快越好
  • ¥15 PSPICE制作一个加法器
  • ¥15 javaweb项目无法正常跳转
  • ¥15 VMBox虚拟机无法访问
  • ¥15 skd显示找不到头文件
  • ¥15 机器视觉中图片中长度与真实长度的关系
  • ¥15 fastreport table 怎么只让每页的最下面和最顶部有横线
  • ¥15 java 的protected权限 ，问题在注释里
  • ¥15 这个是哪里有问题啊？