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 linux驱动，linux应用，多线程
  • ¥20 我要一个分身加定位两个功能的安卓app
  • ¥15 基于FOC驱动器，如何实现卡丁车下坡无阻力的遛坡的效果
  • ¥15 IAR程序莫名变量多重定义
  • ¥15 (标签-UDP|关键词-client)
  • ¥15 关于库卡officelite无法与虚拟机通讯的问题
  • ¥15 目标检测项目无法读取视频
  • ¥15 GEO datasets中基因芯片数据仅仅提供了normalized signal如何进行差异分析
  • ¥100 求采集电商背景音乐的方法
  • ¥15 数学建模竞赛求指导帮助