当发现字段验证错误时，会打开一个对话框。我已经成功地在jQuery对话框中捕获了html格式的文本。我在对话框中定义了3个按钮。继续(关闭对话框(、显示字段(应显示字段html文本(和显示详细信息(应显示错误详细信息(
这是来自页面的HTML代码
<div id="dialogpresubval" title="Pre-Submit Validation Errors" style="display:none">
<div id="fielderrors" style="display:none"> </div>
<div id="errordetail" style="display:none"> </div>
</div>
这是Ready函数中.js文件中的代码当我按下主窗体上的Submit按钮时，我会返回presebfields和presebtail变量。我知道这部分工作正常，因为console.log行显示了正确的信息。出于测试目的，您可以使用
var presubfields = "The following fields contain errors: <br> member status <br> member since";
$(function() {
$( "#dialogpresubval").dialog({
autoOpen: false,
hide: "puff",
modal: true,
closeOnEscape: false,
height:400,
width:450,
resizable: true,
draggable: true,
title: "Pre-Submit Validation Errors",
open: function() {
console.log("4119 - On Open presubfields is: " + presubfields); // I see the presubfields variable and its text;
// $("#fielderrors div").html(presubfields);
// $("#fielderrors", {html:presubfields});
},
buttons: [
{
text: "Continue",
click: function() {
var button = $(this).prop("id");
console.log("4127 You clicked on:", button);
$(this).dialog("close");
},
},
{
text: "Show Fields",
click: function() {
var button = $(this).prop("id");
// Show the Fields requiring correction - div id = fielderrors
//var field_errors = $('#dialogpresubval').attr('note_text');
console.log("4143 - presubfields = " + presubfields); // console shows the correct information;
//$("#fielderrors").append(presubfields);
//$("#fielderrors", {html:presubfields});
$("#fielderrors").text("presubfields should be shown");
// Used this to test for generic text - $("#fielderrors").text("presubfields should be shown");
// $("#fielderrors").val(presubfields);
//$("#fielderrors").prop('display', 'block');
$("#fielderrors").css({'display':'block'});
$("#errordetail").hide();
},
},
{
text: "Show Details",
click: function() {
// Show the Details of the errors - div id = errordetail
// presubfields presubdetail
$("#errordetail").val(presubdetail);
$("#errordetail").show();
$("#fielderrors").hide();
},
}
],
position: {
my: "center center",
at: "center center"
}
});
});
我在注释掉的字段中留下了，这样你就可以看到我已经尝试过的内容。我无法在适当的分区中显示压力字段或压力尾部。
我想要的是，当按下"显示字段"按钮时，会显示presebfields html，而presebtail也是如此。
谢谢你的光临。
您接近$("#fielderrors div").html(presubfields);，但也就是说，查找位于另一个id为fielderrors的元素中的div元素。HTML中没有这样的元素。
相反，您可以只使用id(元素上的id应该是唯一的(，这样它在open函数中就会是$("#fielderrors").html(presubfields);。
现在，html已经位于适当的div中，因此下一步是在单击相应按钮时对元素执行.show((和/或.hide((操作。下面是一个例子。
var presubfields = "The following fields contain errors: <br> member status <br> member since";
var presubdetail = "I am an example of an error detail.";
$(function() {
$("#dialogpresubval").dialog({
autoOpen: false,
hide: "puff",
modal: true,
closeOnEscape: false,
resizable: true,
draggable: true,
title: "Pre-Submit Validation Errors",
open: function() {
$("#fielderrors").html(presubfields)
$("#errordetail").html(presubdetail);
},
buttons: [{
text: "Continue",
click: function() {
var button = $(this).prop("id");
console.log("4127 You clicked on:", button);
$(this).dialog("close");
},
},
{
text: "Show Fields",
click: function() {
$("#fielderrors").show();
$("#errordetail").show();
},
},
{
text: "Show Details",
click: function() {
$("#fielderrors").hide();
$("#errordetail").show();
},
}
],
position: {
my: "center center",
at: "center center"
}
});
// show the modal
$( "#dialogpresubval" ).dialog( "open" );
});<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="dialogpresubval" title="Pre-Submit Validation Errors" style="display:none">
<div id="fielderrors" style="display:none"> </div>
<div id="errordetail" style="display:none"> </div>
</div>