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 CSS通配符清除内外边距为什么可以覆盖默认样式？
  • ¥15 SPSS分类模型实训题步骤
  • ¥15 求解决扩散模型代码问题
  • ¥15 工创大赛太阳能电动车项目零基础要学什么
  • ¥20 limma多组间分析最终p值只有一个
  • ¥15 nopCommerce开发问题
  • ¥15 torch.multiprocessing.spawn.ProcessExitedException: process 1 terminated with signal SIGKILL
  • ¥15 QuartusⅡ15.0编译项目后，output_files中的.jdi、.sld、.sof不更新怎么解决
  • ¥15 pycharm输出和导师的一样，但是标红
  • ¥15 想问问富文本拿到的html怎么转成docx的