Question

当发现字段验证错误时，我有一个对话框打开。我已经成功捕获了jQuery对话框内的html格式文本。我在对话框中定义了3个按钮。继续（关闭对话框），显示字段（应显示fielderrors html文本）和显示详细信息（应显示错误详细信息）

这是页面中的HTML代码

<div id="dialogpresubval" title="Pre-Submit Validation Errors" style="display:none">
    <div id="fielderrors" style="display:none"> &nbsp; </div>
    <div id="errordetail" style="display:none"> &nbsp; </div>
</div>

这是Ready函数中.js文件中的代码当我按下主窗体上的Submit按钮时，我得到了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相同。

感谢您的光临。

Answer 1

您与$("#fielderrors div").html(presubfields);关系密切，这就是说找到一个id为fielderrors的另一个元素内的div元素。您的HTML中没有此类元素。

您可以改为只使用id（元素上的ID应该是唯一的），因此在打开函数中将是$("#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"> &nbsp; </div>
  <div id="errordetail" style="display:none"> &nbsp; </div>
</div>

在对话框按钮上的“ jquery”对话框中显示html格式的文本，单击

1 个答案: