twitter-bootstrap Bootstrap 模态 + PHP + AJAX
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21485170/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Modal + PHP + AJAX
提问by Allen
So I can attest that I am an idiot/newb/. I am looking for a simple way to have ajax transfer an ID to a modal. Which then takes that modal that has php and provides the necessary variables to be shown.
所以我可以证明我是一个白痴/新手/。我正在寻找一种简单的方法来让 ajax 将 ID 传输到模态。然后采用具有 php 的模式并提供要显示的必要变量。
Ex.
前任。
Table
桌子
===============================
[Button] | Data | Data | Data |
===============================
[Click Button(ID)] -> Modal Pops up -> Name: Data , Email: Data, Username: Data
[Click Button(ID)] -> Modal Pops up -> Name: Data , Email: Data, Username: Data
I don't know if this kinda helps out. I was able to figure out how to have the modal add information to a database but I can't seem to figure out how to pull data from the ID to modal and populate it.
不知道这样有没有帮助 我能够弄清楚如何将模态添加信息到数据库，但我似乎无法弄清楚如何从 ID 中提取数据到模态并填充它。
Thanks for any help I can get!
感谢我能得到的任何帮助！
EDIT: (UPDATE) This is my index page that displays all phone inventory. The "View" pops up the modal but gives me random information, it is an active ID but not the one that is current to the order.
编辑：（更新）这是我的索引页面，显示所有电话库存。“视图”弹出模态但给我随机信息，它是一个活动 ID，但不是当前订单的 ID。
Hope this helps. ( I'll take any help or criticism )
希望这可以帮助。（我会接受任何帮助或批评）
<?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">×</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>
回答by emptywalls
Alright. I think I understand what you need. You've got a results page, and you want to have a link in each of the results, that will bring up the detail page of the result in a modal.
好吧。我想我明白你需要什么。您有一个结果页面，并且您希望在每个结果中都有一个链接，这将在模式中显示结果的详细信息页面。
So let's take it one step at a time. Get your link to the detail page working. Once that works correctly, we hiHyman it with AJAX, and display the page in the modal.
所以让我们一步一步来。获取指向详细信息页面的链接。一旦它正常工作，我们就用 AJAX 劫持它，并在模态中显示页面。
Bootstrap does AJAX modals easily, look at the remoteoption:
Bootstrap 做 AJAX modals 很容易，看remote选项：
http://getbootstrap.com/javascript/#modals-usage
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>
<a href="detail.php?id=123" data-toggle="modal" href="remote.html" data-target="#modal" data-target="#modal">Link Text</a>
Let me know how it goes, no shame in being new to something :D
让我知道它是怎么回事，对新事物并不感到羞耻：D
回答by Kaushik Kothiya
Alright. I think I understand what you need. You've got a results page, and you want to have a link in each of the results, that will bring up the detail form in edit in use a single model open and field in the row edit data.
好吧。我想我明白你需要什么。您有一个结果页面，并且您希望在每个结果中都有一个链接，这将在使用单个模型打开和行编辑数据中的字段中显示编辑中的详细信息表单。
please follow this script to Edit(Update)data in a single model.
请按照此脚本在单个模型中编辑（更新）数据。
<script type="text/javascript">
/* if double click on table row then open model and fill all data in form */
$('#table-id tbody').on('dblclick', 'tr', function() {
var table = $('#table-id').DataTable();
var data = table.row(this).data();
$("#phone_number").val(data.phone_number);
$("#device_manufacturer").val(data.device_manufacturer);
$("#device_model").val(data.device_model);
$("#phone_alias").val(data.phone_alias);
$("#chauffeur_number").val(data.chauffeur_number);
$("#device_model").val(data.device_model);
$("#modal-resultsl").modal('show');
});
/* if model close then all field is blank in open model in form */
$('#con-close-modal').on('hidden.bs.modal',function() {
/*Clear all input type="text" box*/
$('#Form-id input[type="text"]').val('');
/*Clear all input type="number" box*/
$('#Form-id input[type="number"]').val('');
});
</script>
