Рендеринг новых данных модальных внутри модальных PHP, jQuery

У меня есть база данных MySQL библии, которую я запрашиваю через php. Сейчас я на стадии тестирования. Ниже мой тестовый файл, где я показываю конкретную главу книги в модальном виде. Проблема в том, что я понятия не имею, как существенно «отобразить следующую главу (или предыдущую главу)», когда пользователь нажимает кнопки со стрелками влево или вправо на нижнем колонтитуле модального.Рендеринг новых данных модальных внутри модальных PHP, jQuery

В настоящее время тестовый файл показывает «Бытие 12». Как я могу позволить пользователю видеть 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>

.. Любая помощь будет принята с благодарностью!

источник

2014-09-13 Sanya

Вы должны заглянуть в 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 до нужного.

источник

2014-09-13 22:00:53

Это прекрасно! Одно из лучших, наиболее полных объяснений, которые я видел на SO! – Sanya

На самом деле есть одна небольшая проблема. Строка: '$ (". Modal-header "). Html (data);' помещает все стихи в модальный заголовок, а не в модальное тело. Как разместить стих в модальном теле? – Sanya

Что вы можете сделать, это заменить все html в модальном диалоговом окне вместо модального тела или модального заголовка и отредактировать файл fetch.php, чтобы также включить div модального заголовка и модального нижнего колонтитула. –

Рендеринг новых данных модальных внутри модальных PHP, jQuery

ответ

Смежные вопросы