我正在尝试创建一个修改项弹出窗口。当我单击修改项链接时，它会在数据库中显示与该项相关的数据我的itemID，但它不会在bootstrap模式中打开。我需要添加或更改我的ajax和控制器代码，以便将数据加载到我的模态而不是随机弹出窗口。谢谢你的帮助。
控制器：
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Search extends CI_Controller {
public function __construct(){
parent::__construct();
$this->load->helper('url');
$this->load->helper('form');
$this->load->model('searchModel');
$this->load->model('itemModal');
}
public function displayItem(){
$id=$this->uri->segment(3);
$data1['results1'] = $this->itemModal->get_item_by_id($id);
echo json_encode($data1);
}
public function updateItem(){
$id=$this->input->post('rfid');
$data = array(
'masterCode' => $this->input->post('masterCode'),
'itemName' => $this->input->post('itemName'),
'colorName' => $this->input->post('colorName'),
'location' => $this->input->post('location'),
'itemCategory' => $this->input->post('itemCategory'),
'materialDescription' => $this->input->post('materialDescription'),
'supplier' => $this->input->post('supplier'),
'checkoutAllowed' => $this->input->post('checkoutAllowed'),
'itemDescription' => $this->input->post('itemDescription'),
'comments' => $this->input->post('comments'),
'itemCode' => $this->input->post('itemCode'),
'colorCode' => $this->input->post('colorCode'),
'locationMade' => $this->input->post('makelocation')
);
$this->searchModel->form_update($data, $id);
//load the header
$this->load->view('base.php',$data);
//load the page
redirect('execute_search');
}
}
型号：
<?php
class ItemModal extends CI_Model {
function __construct(){
parent::__construct();
}
function get_item_by_id($id){
$this->db->select('*');
$this->db->where('inventoryID =',$id);
// Execute the query.
$query = $this->db->get('inventory');
// Return the results.
return $query->result_array();
}
}
?>
查看：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="<?php echo base_url('assets/jquery/jquery-2.1.4.min.js')?>"></script>
<script src="<?php echo base_url('assets/bootstrap/js/bootstrap.min.js')?>"></script>
<script src="<?php echo base_url('assets/datatables/js/jquery.dataTables.min.js')?>"></script>
<script src="<?php echo base_url('assets/datatables/js/dataTables.bootstrap.js')?>"></script>
<script src="<?php echo base_url('assets/bootstrap-datepicker/js/bootstrap-datepicker.min.js')?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/results.css">
<title>Results</title>
<style>
table {
width: 100%;
}
th, td {
padding: 15px;
text-align: auto;
height: 50px;
border-bottom: 1px solid #ddd;
}
th {
background-color: lightgrey;
color: black;
}
tr:hover {background-color: #f5f5f5}
</style>
</head>
<body>
<h1><center>Item List</center></h1>
<hr>
<div class="container">
<form method="post" action="<?php echo site_url('itemView/viewItems'); ?>">
<table>
<tr>
<th><center><input type="radio" name="id"></center></th>
<th>Inventory ID</th>
<th>Master Code</th>
<th><center>Item Name</center></th>
<th>Color Name</th>
<th><center>Location</center></th>
<th><center>Checkout Allowed</center></th>
</tr>
<?php foreach($results as $rows):?>
<tr>
<td><a data-toggle="modal" href="<?php echo site_url('Search/displayItem/'.$rows['inventoryID']); ?>" data-target="#modifyItem">Modify Item</a></td>
<td><a href="<?php echo site_url('itemView/viewItems/'.$rows['inventoryID']); ?>"><?php echo $rows['inventoryID'] ?></a></td>
<td><?php echo $rows['masterCode'] ?></td>
<td><?php echo $rows['itemName'] ?></td>
<td><?php echo $rows['colorName'] ?></td>
<td><?php echo $rows['location'] ?></td>
<td><input type="checkbox" <?php if($rows['checkoutAllowed'] == 'Yes') echo " checked='checked' "; ?>></td>
</tr>
<?php endforeach; ?>
</table>
</form>
<!-- Modify an Item Modal -->
<div id="modifyItem" class="modal fade">
<div class="modal-dialog">
<form action="<?php echo site_url("Search/updateItem"); ?>" method='POST'>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modify an Item</h4>
</div>
<div class="modal-body">
<table>
<tr>
<td><input type="text" name="rfid" readonly/></td>
<td><input type="text" name="itemCode"/></td>
<td><input type="text" name="masterCode"/></td>
</tr>
<tr>
<td><input type="text" name="itemName"/></td>
<td><input type="text" name="colorCode"/></td>
<td><input type="text" name="colorName"/></td>
</tr>
<tr>
<td><input type="text" name="location"/></td>
<td><input type="text" name="makelocation"/></td>
<td><input type="text" name="itemCategory"/></td>
</tr>
<tr>
<td><input type="text" name="materialDescription"/></td>
<td><input type="text" name="supplier"/></td>
<td><input type="text" name="checkoutAllowed"/></td>
</tr>
</table>
<div class="row personal-info">
<div class="col-sm-4">
<div class="form-group">
<textarea name="itemDescription"></textarea>
<textarea name="Comments"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer" style="text-align:center;">
<input type="submit" class="btn btn-primary" name="modifyItem" value="Modify Item">
</div>
</div>
</form>
</div>
</div>
<!-- Modify an Item Modal -->
</div><br><br>
</body>
<script>
function updateItem(){
$.ajax({
url: "<?php echo site_url('Search/displayItem');?>",
type: "POST",
dataType: "JSON",
success: function($data1){
$('[name="rfid"]').val($data1.inventoryID);
$('[name="masterCode"]').val($data1.masterCode);
$('[name="masterCode"]').val($data1.itemCode);
$('[name="itemName"]').val($data1.itemName);
$('[name="colorName"]').val($data1.colorCode);
$('[name="colorName"]').val($data1.colorName);
$('[name="location"]').val($data1.location);
$('[name="itemCategory"]').val($data1.itemCategory);
$('[name="materialDescription"]').val($data1.materialDescription);
$('[name="supplier"]').val($data1.supplier);
$('[name="checkoutAllowed"]').val($data1.checkoutAllowed);
$('[name="itemDescription"]').val($data1.itemDescription);
$('[name="Comments"]').val($data1.comment);
$('#modifyItem').modal('show'); // show bootstrap modal when complete loaded
},
error: function (jqXHR, textStatus, errorThrown){
alert('Error get data from ajax');
}
});
}
</script>
</html>
答案 0 :(得分：1)
我可以建议你把你的模态体放在另一个视图文件中，同时使用Ajax从数据库中检索数据生成视图并加载到模态体中。