在模态弹出窗口中返回 Ajax 链接

Question

我正在使用下面的脚本代码根据用户单击按钮时的按钮 ID 从我的数据库中获取结果。数据库结果以我正在测试的输出形式 alert(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>

更新：这是页面上的代码，我试图根据单击的按钮的 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>s 时，您需要在创建对话框之前将它们添加到容器中。

还将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();
    });
});​

那么您不会复制任何ids 并将内容加载到已经存在的容器中。