英文:
jquery ajax call inside the bootstrap modal
问题
我正在使用 bootstrap 3.3.6 版本,并且我有模态对话框代码如下打开:
<div id="myModalPositions" 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">&times;</button>
<h4 class="modal-title">ACT</h4>
</div>
<div class="modal-body">
<p>加载中...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
<script type="text/javascript">
$('.openStandings').on('click', function(e){
e.preventDefault();
$('#myModalPositions').modal('show').find('.modal-body').load($(this).attr('data-href'));
});
</script>
在 myModalPositions
中,data-href
从服务器加载一个文件,我是这样做的
所以我在 data-href = url
里面添加了代码,其中我有表单和提交,并在该 data-href
文件中添加了 ajax 代码,
每次尝试提交时,它会关闭我的模态对话框
这是 data-href
url 中的代码
<form name="form1" id="form1">
<input type="text" name="name" id="name">
<button type="submit" class="btn btn-primary updateData" data-dismiss="modal">继续</button>
</form>
<script type="text/javascript" src="../jquery/jquery-2.1.0.js"></script>
<script type="text/javascript">
$("#form1").submit(function (event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
type: "POST",
url: "proceed.cfm",
data: formData
}).done(function (data) {
console.log(data);
});
});
</script>
我在这里做错了什么
英文:
I am using bootstrap 3.3.6 and i have the modal dialog code opens like this
<div id="myModalPositions" 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">&times;</button>
<h4 class="modal-title">ACT</h4>
</div>
<div class="modal-body">
<p>Loading...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<script type="text/javascript">
$('.openStandings').on('click', function(e){
e.preventDefault();
$('#myModalPositions').modal('show').find('.modal-body').load($(this).attr('data-href'));
});
</script>
inside the myModalPositions
, the data-href
loads a file from the server which i am doing
so i added a code inside the data-href = url where i have the form and submit and added the ajax code inside that data-href file,
every time i am trying to submit, it is closing my modal dialog
This is the ode inside the data-href url
<form name="form1" id="form1">
<input type="text" name="name" id="name">
<button type="submit" class="btn btn-primary updateData" data-dismiss="modal">Proceed</button>
</form>
<script type="text/javascript" src="../jquery/jquery-2.1.0.js"></script>
<script type="text/javascript">
$("#form1").submit(function (event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
type: "POST",
url: "proceed.cfm",
data: formData
}).done(function (data) {
console.log(data);
});
});
</script>
what i am doing wrong here
答案1
得分: 0
您表单中的按钮具有属性 data-dismiss="modal"
,因此它会关闭模态框。
英文:
Your button in the form has attribute data-dismiss="modal"
so it closes the modal.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<div id="myModalPositions" 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">&times;</button>
<h4 class="modal-title">ACT</h4>
</div>
<div class="modal-body">
<form name="form1" id="form1">
<input type="text" name="name" id="name">
<button type="submit" class="btn btn-primary updateData" >Proceed</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button class="openStandings">openStandings</button>
<script type="text/javascript">
$('.openStandings').on('click', function(e) {
e.preventDefault();
$('#myModalPositions').modal('show').find('.modal-body').load($(this).attr('data-href'));
});
$("#form1").submit(function(event) {
event.preventDefault();
console.log("sbumit");
var formData = $(this).serialize();
$.ajax({
type: "POST",
url: "proceed.cfm",
data: formData
}).done(function(data) {
console.log(data);
});
});
</script>
<!-- end snippet -->
答案2
得分: 0
使用 data-backdrop="static"
英文:
use data-backdrop="static"
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论