问题描述
我在我的 razor 视图页面中使用了第三方的 Iframe 进行付款处理，我想使用页面底部的 javascript 实现“重新开始”和“完成”按钮。提交 init 表单的脚本标签需要保持原样，否则 Iframe 将不会加载。所有必要的库都包含在布局页面中。
@{
ViewData["Title"] = "Payment Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@model MyModel
<p></p>
<div class="row ">
<div class="col-md-12">
<div class="panel panel-primary panel-title">
<div class="panel-heading text-bold">Embedded UI Component</div>
<div class="panel-body">
<iframe name="client" style="width:100%;height:600px;position:center;left:0;top:0;border:thick"></iframe>
<form action="@Model.IframeUrl" id="initForm" target="client" method="POST" style="display:none">
<input name="X-BEARER-TOKEN" value="@Model.AgentAccesstoken">
<input name="X-REFRESH-TOKEN" value="@Model.AgentRefreshToken">
</form>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-12">
<div class="panel panel-primary panel-title">
<div class="panel-heading text-bold">Payment Section Bottom</div>
<div class="panel-body" style="width:100%;height:150px;position:center;left:0;top:0;border:thick">
<h6 style="font-style:italic;color:red">[Populate here.]</h6>
@Html.Hidden("sessionGuid","@Model.SessionGuid.ToString()")
<form>
<button id="start" class="btn btn-info" onclick="StartOver()">Start Over</button>
<button id="finish" class="btn btn-primary" onclick="FinishUp()">Finish Up</button>
</form>
</div>
</div>
</div>
</div>
<script>
document.getElementById("initForm").submit();
</script>
<script>
debugger;
function StartOver() {
//e.preventDefault();
/* if (confirm("Are you sure you want to start over the Payment Process?")) {
console.log("pressed yes");
}
else {
console.log("pressed no");
}*/
bootBox.confirm({
message: "Are you sure you want to start over the Payment Process?",buttons: {
confirm: {
label: 'Yes',className: 'btn-success'
},cancel: {
label: 'No',className: 'btn-danger'
}
},callback: function (result) {
var email = @Model.Email;
debugger;
if (result)
{
if (result) {
var request = $.ajax({
url: 'MyController/StartOverSession',type: 'GET',data: { Email = email },contentType: 'application/json; charset=utf-8'
});
}
}
}
});
}
function FinishUp() {
bootBox.confirm({
message: "Are you sure you want to finish the Payment Process?",buttons: {
confirm: {
label: 'Yes',className: 'btn-success'
},cancel: {
label: 'No',className: 'btn-danger'
}
},callback: function (result) {
if (result) {
window.location.href = "/Thankyou.cshtml";
}
}
});
}
</script>
当我单击“重新开始”按钮时，我收到“HTMLButtonElement.onclick 中未定义 StartOver()”。脚本标签位于 HTML 标签内。我已经检查了此错误的其他相关问题，但它们没有帮助，因为它们中的大多数要么是语法错误，要么与 jsfiddle 设置相关。评论中的 confirm() 方法有效。
解决方法
type 元素的默认 <button> 值为“提交”，因此您的“重新开始”按钮会触发表单提交。
JavaScript confirm() 函数将生成一个对话框，该对话框将阻止页面（以及表单提交）处理，直到它被关闭。 Bootbox 的功能无法做到这一点 - 它真正做的只是即时生成 Bootstrap 模态。 Bootstrap modals 只是定位 <div> 元素，所以没有页面阻塞（也不可能有）。我们确实在文档的 Known Limitations 部分介绍了这一点。
两个选项，基于您的代码：
- 将两个按钮的 type 属性设置为“button”。
<form>
<button type="button" id="start" class="btn btn-info" onclick="StartOver()">Start Over</button>
<button type="button" id="finish" class="btn btn-primary" onclick="FinishUp()">Finish Up</button>
</form>
- 使用您当前在代码中注释掉的 preventDefault() 函数。您只需要添加
e作为参数即可工作。
debugger;
function StartOver(e) {
// prevent the button's default action (submit,in this case)
e.preventDefault();
bootbox.confirm({
message: "Are you sure you want to start over the Payment Process?",buttons: {
confirm: {
label: 'Yes',className: 'btn-success'
},cancel: {
label: 'No',className: 'btn-danger'
}
},callback: function (result) {
var email = '@Model.Email';
debugger;
if (result) {
var request = $.ajax({
url: 'MyController/StartOverSession',type: 'GET',data: { Email = email },contentType: 'application/json; charset=utf-8'
})
.done(function(response,status,jqxhr){
// do something when a successful (status code 200) response is received
})
.fail(function(jqxhr,error){
// do something when an error (status code other than 200,including 30x redirects) response is received
});
}
}
});
}