javascript - 使用 php/jquery 动态更新单个模态

标签 javascript php jquery html mysql

所以我有一个 sql 查询的结果表，我想让所有行都有一个链接，该链接可以根据行的 id(从查询的主键接收到的)提取带有附加信息的模式)。我在完成这项工作时遇到了多个问题。

1:当我回显 html 时，模式无法加载。它不会将背景变成灰色，也不会加载实际的模态。我在页面上的常规 html 中的 echo 之外对此进行了测试，但它也无法加载。这让我很困惑，因为它是直接从我加载的页面复制和粘贴的。 (模态有不同的 id 和 href="")

2:我的查询位于单独的 .php 文件中，并且我的 jquery 似乎没有将 ID 发布到该查询。

这是我在结果页面上的 html/php:

    <div class="container-fluid">                           <!-- Table goes here: May require a neg margin to fit on page w/o scroll -->
    <?php
    $style = "style='text-align:right;'";
    // Display search result
         if (!$count == 0) {
                echo "<h3>Search: \"$num $name $state $medicarelos $medicaidlos $totlos\" returned $count results</h3>";
                ?>

                <table id="resultTable" class="tablesorter">
                <thead> 
                <tr>
                <th>Provider Number</th>
                <th>Hospital Name</th>
        <th>Provider State</th>
                <th>Medicare Length of Stay</th>
                <th>Medicaid Length of Stay</th>
                <th>Overall Length of Stay</th>
                </tr>
                </thead>
        <tbody>
                <?php

            while ($results = $query->fetch()) {
                $id = $results['id'];
                echo "<tr>";            
                echo "<td>".$results['provnum'];
                echo "</td>";
                echo "<td><a id='$id' data-toggle='modal' href='#provmodal' class='push'>".$results['hospname'];
                echo "</a>";
                echo "</td>";
                echo "<td>".$results['state'];
                echo "</td>";
                echo "<td $style>".$results['medicarelos'];
                echo "</td>";
                echo "<td $style>".$results['medicaidlos'];
                echo "</td>";
                echo "<td $style>".$results['overalllos'];
                echo "</td>";
                echo "</tr>";
                }
                ?>
                </tbody>
                </table>

                <?php       
        } else {
            echo 'Nothing found';
        }
        exit();
        ?>
    </div>

    <!-- Modal HTML -->
    <div id="provmodal" 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>
                    <h4 class="modal-title">Additional Information</h4>
                </div>
                <div class="modal-body">
                    <p><?php echo $modalresults['id'];?></p> <!-- Relaying the ID here to test if the script is working -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
<!-- END MODAL HTML -->

这是我的 java，用于将 rowID 发送到单独的查询:

<script type="text/javascript">
    $(document).ready(function () {

    $(function(){

    $('.push').click(function(){
      var ele_id = $(this).attr('id');

       $.ajax({
          type : 'post',
           url : 'modalquery.php', 
          data :  'post_id='+ ele_id, 

       success : function(r)
           {
              // now you can show output in your modal 
              $('div#provmodal').modal('show');  // put your modal id 
             $('.modal-body').modal('show').html(r);
           }
         });


                });

        });
    });
</script>

最后这是我在 modalquery.php 页面上的 php

<?php
session_start();
require_once("link_imegme.php");
$id = $_POST['post_id'];
$modalquery = $link->prepare("SELECT * FROM imegme WHERE id = :id");
$modalquery->bindParam(':id', $id, PDO::PARAM_INT);
$modalquery->execute();
$modalresults = $modalquery->fetch());
?>

如果有人可以帮助我解决这些问题(主要是无法在页面上加载的原因)，我可能可以解决其余问题。

这是结果页面的标题，以防您认为我未能包含 java 文件或者它们的顺序可能有误？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/css/main.css" rel="stylesheet" type="text/css" />
<link href="/css/themes/blue/style.css" rel="stylesheet" type="text/css" />
    <!-- Start Java -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/jquery.tablesorter.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
    $("#resultTable").tablesorter({widgets: ['zebra']});
});
</script>
<?php
session_start();
require_once("link_imegme.php");
?>
<title>HDS: Medicare Disproportionate Share</title>
</head>

我很欣赏对此的任何见解。谢谢

:编辑:好的，模式显示的问题是我的 php 脚本在 } else { 语句之外退出。迄今为止另一个 Unresolved 问题是我的模态将显示但 $modalresults['id'];不会在模态中显示任何内容。

最佳答案

这样的东西适合你

   <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#myModal").modal('show');
    });
</script>
</head>
<body>
<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>
                <h4 class="modal-title">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes you made to document before closing?</p>
                <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

在上面的例子中为了对modal的内容进行更改 您需要选择 (modal-body) 因为它保存内容 像这样

$("#myModal .modal-body").html(ajax_var); //insert your data
$("#myModal").modal('show');

希望这有帮助

//在.html完成插入数据后使用.modal('show')作为回调函数可能会更好..像这样

$("#myModal .modal-body").html(ajax_var).promise().done(function(){
        $("#myModal").modal('show');  
    });

//编辑 我没有尝试，但请注意你的 exit();不在 Else 内{}..这可能是您的问题，因为它总是会退出:)

关于javascript - 使用 php/jquery 动态更新单个模态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29064714/

上一篇：php - MySQL仅在两个表中不存在时插入

下一篇：php - Google Cloud SQL 数据类型

相关文章：

javascript - 动态表单不提交(jQuery)

javascript - Firefox 不使用光标 : none; 隐藏光标

javascript - Highcharts 十字线不起作用

javascript - 无法使用 nodejs 获取、写入和读取字体文件

php - 意外的解析错误'*

php - 从内部连接表中获取计数

javascript - 在 jquery/javascript 中创建文本框时如何转义引号？

javascript - jquery 循环向上/向下移动

javascript - 如何在 AJAX 之后更新 Facebook/Twitter 分享按钮 URL？

javascript - 在查看另一个 div 时锁定一个 div 的滚动

©2024 IT工具网  联系我们