点击两次即可:
这是我的代码:
$(document).ready(function(){
$(".submit").click(function(){ editor.post(); }); // for post on TinyMCE
$('#modal').modal({ show: false });
});
$("#reviewbutton").click(function(e) {
e.preventDefault();
form = $('#update');
editor.post();
$.ajax({
type: "POST",
url: "update-preview.php",
contentType: 'application/x-www-form-urlencoded',
data: form.serialize(),
cache: false,
dataType: 'html',
success: function(data){
console.log(data);
$('#modal .modal-body').html(data);
$('#modal').modal('show');
},
error: function (xhr, status, error) {
console.log(xhr.status);
console.log(xhr.responseText);
console.log(error);
},
complete: function (xhr, status) {
// do nothing
}
});
return false;
});
这是模态窗口代码(隐藏在页面加载上):
<style> #modal .modal-dialog { width: 80%; } </style>
<div id="modal" 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">×</button>
<h4 class="modal-title">Preview of your job at Job Hunter</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
表格如下:
<form action="/UpdateListing/<?php echo $id; ?>" method="post" enctype="multipart/form-data" role="form" name="update" id="update">
此处有更多表单元素......
<div class="col-md-3">
<button class='btn btn-primary submit' type='submit' id='reviewbutton' name='reviewbutton'>REVIEW</button>
</div>
<div class="col-md-3">
<input type="hidden" name="jid" value="<?php echo $jid; ?>">
<button class='btn btn-green submit' type='submit' id='updatebutton' name='updatebutton'>SAVE UPDATES</button>
</div>
审核按钮应该调用ajax将表单数据发送到页面,然后在模态窗口中加载它。
该程序是我必须单击“reviewbutton”按钮两次,然后在第二次单击后打开窗口,但是html页面的副本会加载到窗口中。
我的代码在另一个页面上工作,唯一的区别是表单操作是一个简单的URL,例如动作 - “/ someurl”而不是在这个页面上是action =“/ someurl / id”。这就是为什么我使用隐藏字段,因为第二个按钮提交表单'updatebutton'进行验证等。
我无法弄清楚问题是什么?