[英]pass back data from bootstrap modal to his parent window
有人可以帮我一些JavaScript代码吗? 我正在尝试开发一个小的Web应用程序,但是从模态到他的父窗口的简单通信遇到了麻烦:(我正在使用jquery,bootstrap,bootstrap.datetimepicker和bootstrap.validator1000hz。
我必须使用“ sendData”输入字段作为参数从父窗口调用函数,因此我需要从模态中获取“ sendData”的值。 在用户输入所需的日期之前(由于Validator插件),“提交”按钮已被正确禁用,但是当我单击它时,模态消失结束,没有任何内容打印到控制台。 提前致谢 !
这是我的情态
<!-- Modal -->
<div id="modalPrint" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Seleziona intervallo di stampa</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<div class="form-group">
<label>Indicare la data d'invio</label>
<div class='input-group date col-sm-3' id='sendData' data-date-format="DD/MM/YYYY">
<input type='text' class="form-control" required >
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="help-block with-errors"></div>
</div>
<button type="submit" id="print" class="btn btn-default btn-sm pull-right" data-dismiss="modal">
<span class="glyphicon glyphicon-print"></span>
<span style="font-size:smaller;">Stampa</span>
</button>
</div>
</form>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<script>
$('#modalPrint').validator().on('submit', function () {
console.log('ok')
});
</script>
在模态中,您可以使用:
<button id="print" onclick="SendData('+yourData +')" class="btn btn-default btn-sm pull-right" data-dismiss="modal">
<span class="glyphicon glyphicon-print"></span>
<span style="font-size:smaller;">Stampa</span>
</button>
然后像这样在您的js中定义SendData函数:
function SendData (_data){
var serialedjs = "...";
$.ajax({
type: "POST",
url: 'page.aspx/YourWebMethodName',
data: serialedjs,
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function (msg) {
//close modal here
$("div.modal-body").append(
'<img class="spinner" src="Content/ajax-loader.gif" />'
);
},
success: function (data) {
},
complete: function (data) {
}
});
}
}
更新:
jQuery ajax是一个异步HTTP(Ajax)请求。 它会发送数据,而您的页面不会将任何帖子发回到服务器。 这是一个使用jquery的ajax调用:
$.ajax({
url: 'http://yourpage_url/yourpage.html',
data: {
'yourDataKey1': 'yourDataValue1',
'yourDataKey2': 'yourDataValue2',
'yourDataKey3': 'yourDataValue3'
},
dataType: 'jsonp',
contentType: "application/json; charset=utf-8",
success: function(data) {
alert('finish');
},
type: 'GET'
});
作为另一个例子,您可以在下面看到:
$.ajax({
url: "/api/getWeather",
data: {
zipcode: 97201
},
success: function( result ) {
$( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" );
}
});
它使用查询参数zipcode = 97201调用服务器/ api / getWeather上的本地脚本,并将元素#weather-temp的html替换为返回的文本,以向页面上的用户显示状态。
如果您使用的是php,则页面上的回显将作为结果发送,如果您使用的是asp.net,则Response.Write方法将结果写入并返回给您。 请看下面的图片:
因此,在ajax调用中,在数据对象的URL参数中,您将设置将处理您的请求的页面的URL。
因此,您需要在页面顶部添加以下脚本:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
或者您可以下载jquery并将其放在您的项目文件附近并引用它们:
<script src="/libs/jquery/3.1.1/jquery.min.js"></script>
要了解有关jquery ajax的更多信息,请访问此处: https : //learn.jquery.com/ajax/key-concepts/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.