我正在使用一个Bootstrap Modal，它通过点击我的jobs.php页面上的按钮加载，如下所示<a class="btn default btn-block" id="jobsearch" data-toggle="modal">Search <i class="fa fa-search"></i></a>然后通过以下内容加载
<div id="searchmodal" class="modal container fade" tabindex="-1" data-width="860" data-replace="true">
我的jQuery就是这样
var Search_Modal = function () {
return {
init: function () {
$.fn.modal.defaults.spinner = $.fn.modalmanager.defaults.spinner =
'<div class="page-loading page-loading-boxed">' +
'<img src="img/loading-spinner-blue.gif" alt="" class="loading">' +
'<span> Loading...</span>'+
'</div>';
$.fn.modalmanager.defaults.resize = true;
var $modal = $('#searchmodal');
$('#jobsearch').on('click', function(){
$('body').modalmanager('loading');
setTimeout(function(){
$modal.load('includes/jobdetailssearch.php', '', function(){
$modal.modal();
});
}, 1000);
});
$modal.on('click', '.update', function(){
$modal.modal('loading');
setTimeout(function(){
$modal
.modal('loading')
.find('.modal-body')
.prepend('<div class="alert alert-info fade in">' +
'Updated!<button type="button" class="close" data-dismiss="alert">×</button>' +
'</div>');
}, 1000);
});
}
};
}();
jQuery将一个表单拉入到Modal中，这看起来像我想要它。我的问题是我已将表单中的所有代码连接到数据库并返回在表单上的INPUT框中选择的值。测试表单页面本身会返回它应该做的所有事情。
<?php
require '../core/cnn.php';
if(isset($_POST['submitsearchprojno'])) {
$searchprojno = $_POST["searchprojno"];
}
if(isset($_POST['submitsearchadd'])) {
$searchaddress = $_POST["searchaddress"];
}
if(isset($_POST['submitsearchpc'])) {
$searchpostcode = $_POST["searchpostcode"];
}
$searchpostcode = mysql_real_escape_string($searchpostcode);
$searchaddress = mysql_real_escape_string($searchaddress);
$searchprojno = mysql_real_escape_string($searchprojno);
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Search Projects</h4>
</div>
<div class="modal-body">
<form class="modal-form" id="searchform" name="searchform" action="" method="post">
<div class="form-group">
<label class="col-md-4 control-label">Project Number</label>
<div class="col-md-6">
<input type="text" class="form-control input-inline input-medium" name="searchprojno" id="searchprojno" placeholder="Enter Project Number">
</div>
<button type="submit" class="btn blue" id="submitsearchprojno" name="submitsearchprojno" >Search <i class="m-icon-swapright m-icon-white"></i></button>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Address</label>
<div class="col-md-6">
<input type="text" class="form-control input-inline input-medium" name="searchaddress" id="searchaddress" placeholder="Enter Address">
</div>
<button type="submit" class="btn blue" id="submitsearchadd" name="submitsearchadd" >Search <i class="m-icon-swapright m-icon-white"></i></button>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Postcode</label>
<div class="col-md-6">
<input type="text" class="form-control input-inline input-medium" name="searchpostcode" id="searchpostcode" placeholder="Enter Postcode">
</div>
<button type="submit" class="btn blue" id="submitsearchpc" name="submitsearchpc" >Search <i class="m-icon-swapright m-icon-white"></i></button>
</div>
</form>
<div class="form-group">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-striped table-bordered table-advance table-hover">
<thead>
<tr>
<th width="100px"><i class="fa fa-list-alt"></i> Address</th>
<th width="50px"></th>
</tr>
</thead>
<tbody>
<tr>
<?php $searchrs = mysql_query("SELECT ProjectNo, CONCAT(COALESCE(HouseNoName, ''), ' ', COALESCE(StreetName, ''), ' ',
COALESCE(TownOrCity, ''), ' ', COALESCE(Postcode, '')) AS Display, PropID, AreaID, AWGMember, Householder, HouseNoName,
StreetName, TownOrCity, Postcode, ContactTelephone, AlternatePhone, Email, PropertyTenure, PropertyNotes
FROM prop_property
WHERE IsActive = 1
AND (Postcode = '".$searchpostcode."'
OR StreetName = '".$searchaddress."'
OR ProjectNo = '".$searchprojno."')
") or die(mysql_error());
$checkrs = mysql_query("SELECT * FROM prop_property WHERE IsActive = 0");
if(!mysql_num_rows($checkrs) > 0) {
echo '<td> No record found!</td><td></td>';
}
else {
while ($results = mysql_fetch_array($searchrs)) {
echo '
<td id="displayadd">'.$results['Display'].'</td>
<td>
<form action="../jobdetails.php" method="post">
<input type="hidden" name="searchhouse" value=" '.$results['HouseNoName'].'" >
<input type="hidden" name="searchstreet" value=" '.$results['StreetName'].'" >
<input type="hidden" name="searchtown" value=" '.$results['TownOrCity'].'" >
<input type="hidden" name="searchpostcode" value=" '.$results['Postcode'].'" >
<input type="hidden" name="searchpropid" value=" '.$results['PropID'].'" >
<input type="hidden" name="searchprojectno" value=" '.$results['ProjectNo'].'" >
<button type="submit" class="btn default btn-xs blue-stripe" name="viewsearch">View Address</button>
</form>
</td>';
}
}?>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer right">
<button type="button" data-dismiss="modal" class="btn default">Cancel</button>
</div>
</div>
我的问题是这些作为单独的页面运行时应该正常工作，但是当我在INPUT中添加某些内容并点击BUTTON以搜索所有发生的事情时，它们会被放在一起就会关闭模态并返回jobs.php页面。
进一步调查我在使用INPUT后得到了这个，我在这里得到了jQuery，它在表单中收集POST，因为我使用了一个警告来测试它INPUT字段。然后我看着它将数据返回到表中，这是我想要做的。但是当我在代码运行后查看控制台日志时，所有发生的事情都是它返回我写的所有代码
<script type="text/javascript">
$(function(){
$('#searchform').on('submit', function(e){
e.preventDefault();
//alert($('#searchpostcode').val())
$.post('includes/jobdetailssearch.php',
$('#searchform').serialize(),
function(data, status, xhr){
$('.table-responsive #displayadd').html(data.Display);
console.log(data);
});
});
});
</script>
如何在Modal中更新表单并在表格中显示结果？