Возвратите ссылку Ajax в модальном всплывающем окне

Question

Я использую приведенный ниже код сценария для получения результатов из моей базы данных на основе идентификатора кнопки, когда пользователь нажимает ее. Результаты базы данных возвращаются нормально в виде оповещения (msg), который я тестирую как вывод. Может кто-нибудь помочь, пожалуйста, как я мог бы вернуть результаты в модальном окне вместо этого? Я использую загрузчик для моего приложения, которое использует bootstrap-modal.js , я не могу понять, как я мог бы объединить два сценария.

<script type="text/javascript">
   $(document).ready(function() {
     $(function() {
       $('.ajax-link').click( function() {
        $.get( $(this).attr('href'), function(msg) {
          alert(msg);
        });
        return false; // don't follow the link!
      });
    });
  });
</script>

Пример модального вызова начальной загрузки:

<script>
  $(function() {
    $('#userGuide').modal({
    backdrop: true;
  });
});
</script>

ОБНОВЛЕНИЕ: это код на странице, которую я пытаюсь вернуть пользователю #userGuide от использования $ .get на основе идентификатора нажатой кнопки:

    <?php

    //MySQL Database Connect
    require 'config.php';

    $id = $_GET["id"];
    $stmt = $dbh->prepare('CALL sp_get_recipe_items(:id)');
    $stmt->bindParam(':id',$id,PDO::PARAM_INT,4000);
    $res = $stmt->execute();

    if ($res){
        while( $row = $stmt->fetchObject() ){
            echo "<div id='userGuide' class='modal hide fade'><div class='modal-body'>".$row->Ingredient."&nbsp;".$row->Quantity."&nbsp;".$row->UoM."&nbsp;</div></div>";
            }

    }else{
    $arr = $sth->errorInfo();
    echo "Execution failed with MYSQL: " . $arr[0] . "\n";
    die();
    }                      

?>

Answer 1

Попробуйте

$(document).ready(function() {
    $('.ajax-link').click(function(event) {
        $('#container').load($(this).attr('href'), function() {
            $('#container').modal({
                backdrop: true
            });
        });
        event.preventDefault();
    });
});​

При этом используется метод .load () для загрузки содержимого в элемент container, поэтому вам необходимо добавить новый элемент на странице: *Затем 1007 *

<div id="container" style="display:none"></div>

использует функцию обратного вызова для отображения диалога (.modal()) с использованием контейнера.Поскольку вы возвращаете несколько <div> s, вам необходимо добавить их в контейнер перед тем, как сделать это диалоговое окно.

Также добавлен параметр event в функцию обратного вызова click и использование protectDefault () вместо return false.

Обратите внимание, что

$(document).ready(function() {

и

$(function() {

делают то же самое - вторая короткая рукадля первого.

Обновление

Если вы посмотрите документы для модального окна, вы увидите, что разметка должна быть

<div class="modal" id="myModal">
  <div class="modal-body">
   <div>Butter & nbsp; 45 & nbsp; grams & nbsp;</div>
   <div>Flour & nbsp; 12 & nbsp; grams & nbsp;</div>
  </div>
</div>

, тогда вы используете$('#myModal').modal(options), чтобы показать окно ....

Так что я предлагаю вам попробовать это, сначала отредактируйте ваш цикл PHP:

echo "<div class='modal-body'>";
while( $row = $stmt->fetchObject() ){
   echo "<div>".$row->Ingredient."&nbsp;".$row->Quantity."&nbsp;".$row->UoM."&nbsp;</div>";
}
echo "</div>";

это создаст тело окна ...тогда уже на вашей странице есть это:

<div id="modal-container" class="modal"></div>

и, наконец, ваш JavaScript:

$(document).ready(function() {
    $('.ajax-link').click(function(event) {
        $('#modal-container').load($(this).attr('href'), function() {
            $('#modal-container').modal({
                backdrop: true
            });
        });
        event.preventDefault();
    });
});​

Тогда вы не дублируете id s и не загружаете содержимое в уже существующий контейнер.