首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Bootstrap Modal + PHP + AJAX

Bootstrap Modal + PHP + AJAX
EN

Stack Overflow用户
提问于 2014-02-01 00:33:21
回答 1查看 16.2K关注 0票数 3

所以我可以证明我是个笨蛋。我正在寻找一种简单的方法,让ajax转移ID到一个模式。然后,它获取具有php的模式,并提供要显示的必要变量。

例如。

表格

代码语言:javascript
复制
===============================

[Button] | Data | Data | Data | 

===============================

单击按钮(ID) ->模式弹出窗口-> Name: Data,Email: Data,Username: Data

我不知道这是不是有帮助。我能够弄清楚如何让modal将信息添加到数据库中,但我似乎无法弄清楚如何从ID中提取数据并填充到modal中。

谢谢你能帮我的忙!

编辑:(更新)这是我的索引页面,显示所有手机库存。“视图”弹出模式,但给我随机信息,它是一个活动的ID,但不是一个当前的订单。

希望这能有所帮助。(我会接受任何帮助或批评)

代码语言:javascript
复制
    <?php
        include "../includes/db_connect.php";
        $page = "chauffeur";
        $pdo = Database::connect();
        if($_SESSION['LoggedIn'] == 1){ }
        elseif($_SESSION['LoggedIn'] == "")
        {
            header("location: http://wcl-wamp/"); 
        }
     ?>
     <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>WCL WebApp</title>
        <link href="../css/bootstrap.css" rel="stylesheet">
        <link href="../css/td/style.css" rel="stylesheet">
        <style>
            .body{margin: 0 40px; }
        </style>
    </head>
    <body>
        <?php include('../nav.php'); ?>
    <div class="body">
            <div class="row">
                <h3><b>Phone Inventory</b></h3>
            <div id="modal-results" ></div>
    <?php
          try {
                    $stmt = $pdo->prepare('SELECT * FROM phone_inventory');
                    $stmt->execute();
                    $result = $stmt->fetchAll();
                    if(count($result)) {
                            foreach($result as $row){
                        }
                    }
                } catch (Exception $e) {
                    echo 'ERROR: ' . $e->getMessage();
                } ?>
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <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>
                    <h3 class="modal-title" id="myModalLabel"><b>Phone Profile - ID <?= $row['id']; ?></b></h3>
                  </div>
                  <div class="modal-body">
                    <form class="test" role="form">
                      <div class="form-group">
                        <label for="phone_number">Phone #
                        <input type="text" class="form-control" id="phone_number" name="phone_number" value="<?= $row['phone_number']; ?>"></label>
                        <label for="device_id">Device ID
                        <input type="text" class="form-control" id="device_id" name="device_id" value="<?= $row['device_id']; ?>"></label>
                        <label for="device_manufacturer">Device Manufacturer
                        <input type="text" name="device_manufacturer" id="device_manufacturer" class="form-control" value="<?= $row['device_manufacturer']; ?>" /></label>
                        <label for="device_model">Device Model
                        <input type="text" name="device_model" id="device_model" class="form-control" value="<?= $row['device_model']; ?>"/></label>
                        <label for="phone_alias">Phone Alias
                        <input type="text" name="phone_alias" id="phone_alias" class="form-control" value="<?= $row['phone_alias']; ?>"/></label>
                        <label for="chauffeur_number">Chauffeur #
                        <input type="text" name="chauffeur_number" id="chauffeur_number" class="form-control" value="<?= $row['chauffeur_number']; ?>"/></label>
                      </div>
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="update">Check Out</button>
                  </div>
                </div>
              </div>
            </div>
<div class="row">
            <table class="table table-striped table-condensed table-hover">
                <thead>
                    <tr>
                        <th></th>
                        <th>Phone #</th>
                        <th>Device ID</th>
                        <th>Device Manufacturer</th>
                        <th>Device Model</th>
                        <th>Phone Alias</th>
                        <th>Chauffeur #</th>
                    </tr>
                </thead>
                <tbody>
                        <?php $sql = 'SELECT * FROM phone_inventory ORDER BY id ASC';
                            foreach ($pdo->query($sql) as $row) {
                                echo '<tr>';
echo '<td><a class="btn btn-xs btn-primary" data-toggle="modal" data-id="'. $row['id'] .'" href="#myModal" >View</a></td>';
                                echo '<td>'. $row['phone_number'] .'</td>';
                                echo '<td>'. $row['device_id'] .'</td>';
                                echo '<td>'. $row['device_manufacturer'] .'</td>';                                                                                              
                                echo '<td>'. $row['device_model'] .'</td>';
                                echo '<td>'. $row['phone_alias'] .'</td>';
                                echo '<td>'. $row['chauffeur_number'] .'</td>';
                                echo '</tr>';
                        }
                            Database::disconnect();
                        ?>
                </tbody>
            </table>
        </div>
    </div>  
    <?php include('../includes/js_scripts.php'); ?>
    <script>
        $(document).ready(function() {
            $('.table').dataTable( {
            "sPaginationType": "bootstrap",
            "iDisplayLength": 10
            } );
        } );
    $(".device").click(function(){
        var id = $(this).attr('data-id');
        $("#myModal").find("#id").val(id);
        $("#myModal").dialog("open");
    })


    $(".alert").delay(200).addClass("in").fadeOut(4000);

     $(function() {
//twitter bootstrap script
        $("button#update").click(function(){
                    $.ajax({
                    type: "POST",
                    url: "test.php",
                    data: $('form.test').serialize(),
                    success: function(msg){
                             $("#modal-results").html(msg)
                            $("#myModal").modal('hide');    
                         },
                error: function(){
                    alert("failure");
                    }
                      });
            });
        });
    </script>
</body>
</html>
EN

回答 1

Stack Overflow用户

发布于 2014-02-01 05:40:45

好的。我想我知道你需要什么了。您已经有了一个结果页面,并且您希望在每个结果中都有一个链接,该链接将以模式显示结果的详细信息页面。

所以让我们一步一步来。让你的链接到详细信息页面工作。一旦工作正常,我们就用AJAX劫持它,并在模式中显示页面。

Bootstrap可以轻松地执行AJAX模式,看看remote选项:

http://getbootstrap.com/javascript/#modals-usage

<a href="detail.php?id=123" data-toggle="modal" href="remote.html" data-target="#modal" data-target="#modal">Link Text</a>

让我知道它是如何进行的,对于新的东西并不感到羞耻:D

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/21485170

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档