单击按钮时在对话框中显示文本-附录

时间:2018-07-14 13:12:05

标签: jquery modal-dialog

在回答并起作用的原始问题中,我无法在对话框中显示可变文本。这个问题解决了。然后,我将该代码放入工作脚本中。问题继续发生。变量文本将不会显示在对话框内。我设置了一个小提琴琴,它的结构类似于我的工作代码。在这里http://jsfiddle.net/veruo05h/31/
这是我第一次尝试摆弄小提琴。所以,请忍受我。 无论如何,代码是通过选择框(您需要选择更改)和按钮来设置的。 当您选择“更改”,然后按一下“对话框”按钮时,将会发生。该对话框应具有3个按钮。按对话框中的显示字段或显示详细信息按钮应在对话框中显示其他文本。
小提琴使用“ Ready”功能进行设置,其中包含jQuery代码,就像我的工作脚本一样。但是我还没有摆弄小提琴来工作。希望能有所帮助。使它工作。谢谢。

HTML代码

<head>

<title>Sample Admin</title>
<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>

</head>

<body>


<form name="frmNewMbrAdmin" id="frmNewMbrAdmin" method="post" action="">
<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>


 <select name="selmbraction" id="selmbraction" size="1" style="background-color:#C6C7FD; text-transform:capitalize" onChange="jMbrAction=this.value">
    <option value="X" selected>Please Select</option>
    <option value="A">Add a Member</option>
    <option value="C">Change a Member</option>
    <option value="R">Remove a Member</option>
  </select>

  <input name="btnChgMbr" id="btnChgMbr" type="submit" value="Save Changes to Member" style="color:#000000; font-weight:bold;">


  </form>
</body>

jQuery代码

var presuberrors = "";
var presubfields = "";
var presubdetail = "";

$(document).ready(function() {
      $("#frmNewMbrAdmin").on("click", ":submit", function(event) {

        event.preventDefault();

        if (button == "btnChgMbr") {
          presuberrors = 2;
          presubfields = "The following fields contain errors: <br> member status <br> member since";
          presubdetail = "I am an example of an error detail.";
          if (presuberrors >= 1) {
            validationresponse = "103 - There were " + presuberrors + " Errors. Please Correct Items in Pink.";
            $('#dialogpresubval').html(validationresponse);
            $("#dialogpresubval").dialog("option", "minWidth", 335);
            $('#dialogpresubval').dialog('open');
          }
        }

      })

      $(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

      });

    })

0 个答案:

没有答案