Question

我正在使用下面的脚本代码，在用户点击按钮时，根据按钮的ID从我的数据库中获取结果。数据库结果以alert（msg）的形式返回正常我正在测试作为输出。有人可以帮助我如何在模态窗口中返回结果吗？我在使用bootstrap-modal.js的应用程序中使用bootstrap，我无法弄清楚如何集成这两个脚本。

<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>

更新：这是我尝试根据点击按钮的ID使用$ .get返回用户#userGuide的页面上的代码：

    <?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元素中，因此您需要在页面上添加新元素：

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

然后使用回调来显示使用容器的对话框（.modal()）。当您返回多个<div>时，您需要在创建对话框之前将它们添加到容器中。

还将event参数添加到click回调函数，并使用preventDefault()代替return false。

请注意

$(document).ready(function() {

和

$(function() {

做同样的事情 - the second is short hand for the first.

更新

如果您查看模态窗口的文档，您将看到标记需要

<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并将内容加载到现有容器中。

在模态弹出窗口中返回Ajax Link

1 个答案:

更新