[英]show html formatted text inside jquery dialog box on dialog button click
当发现字段验证错误时,我有一个打开的对话框。 我已经成功捕获了jQuery对话框内的html格式文本。 我在对话框中定义了3个按钮。 继续(关闭对话框),显示字段(应显示fielderrors 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>
这是当我按下Main Form上的Submit按钮时,Ready函数中.js文件中的代码,我取回presubfields和presubdetail变量。 我知道该部分正在工作,因为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"
}
});
});
我留在了注释掉的字段中,以便您可以看到我已经尝试过的内容。 我无法在适当的div中显示presubfields或presubdetail。
我想要的是,当按下“显示字段”按钮时,会显示presubfields html,并且对于presubdetail也是一样的。
感谢您的光临。
您已经与$("#fielderrors div").html(presubfields);
但这就是说,在另一个ID为fielderrors
元素内找到一个div元素。 您的HTML中没有此类元素。
相反,您可以仅使用ID(元素上的ID应该是唯一的),因此它将是$("#fielderrors").html(presubfields);
在打开功能。
现在,您已经在适当的div中有了html,因此下一步是单击相应按钮时将.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.