如何正确使用AreYouSure？

Question

更新

我试图在离开网页之前警告用户未保存的更改。我发现使用jquery插件AreYouSure.js应该很容易。

但是，由于它还没有对我起作用，我想知道我做错了什么：

​

$(function() {
  $('#SummaryTableForm').areYouSure({
    message: 'It looks like you have been editing something. ' +
      'If you leave before saving, your changes will be lost.'
  });
});

function RemoveTableRowfunctionOfSummary(e) {
  $(e).parent().parent().remove();

}

<spring:url value="/resources/scripts/SummaryTableScript.js" var="SummaryTableScript" />
<script src="${SummaryTableScript}"></script>
<spring:url value="/resources/scripts/jquery.are-you-sure.js" var="AYS" />
<script src="${AYS}"></script>
<spring:url value="/resources/scripts/ays-beforeunload-shim.js" var="AYSbeforeunload" />
<script src="${AYSbeforeunload}"></script>
<form id="SummaryTableForm" name="SummaryTableForm" method="post" action="">
  <h1>
    <label id="SummaryTableHeadLineLabel">Summary</label>
  </h1>
  <div id="SumHeaderButton">

    <input type="submit" id="SumSaveBtn" value='Save'></input>
    <input type="button" id="SumCancelBtn" value='Cancel'></input>
  </div>
  <div id="SumActionButtons">
    <input type="button" id="SumDeleteBtn" value='Delete' />
    <input type="button" id="SumAddBtn" value='Add'></input>
  </div>
  <div id="SumTableDiv">
    <table id="SumTable">
      <thead>
        <tr>
          <td><label id="SummaryTableSelect">Select</label></td>
          <td><label id="SummaryTableActvate">Activate</label></td>
          <td><label id="SummaryTableId">ID</label></td>
          <td><label id="SummaryTableEdit">Edit</label></td>
          <td><label id="SummaryTableDelete">Delete</label></td>
        </tr>
        <tr>
          <td>
            <select id="SummaryTableSelectAll" onchange="changeSelectAll()">
              <option value="-1"></option>
              <option value="yes">Yes</option>
              <option value="no">No</option>
            </select>
          </td>
          <td>
            <select id="SummaryTableSelectActivate" onchange="changeActivation()">
              <option value="-1"></option>
              <option value="yes">Yes</option>
              <option value="no">No</option>
            </select>
          </td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </thead>
      <tbody id="sumTbody">
        <tr>
          <td><input type="checkbox"></td>
          <td><input type="checkbox"></td>
          <td>1</td>
          <td><input type="button" id="SumDeleteBtn" value='Edit' /></td>
          <td><input type="button" id="SumDeleteBtn" value='Delete' onclick="RemoveTableRowfunctionOfSummary(this)" /></td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td><input type="checkbox" checked></td>
          <td>2</td>
          <td><input type="button" id="SumDeleteBtn" value='Edit' /></td>
          <td><input type="button" id="SumDeleteBtn" value='Delete' onclick="RemoveTableRowfunctionOfSummary(this)" /></td>
        </tr>
      </tbody>
    </table>
    <nav class="limit-per-page" aria-label="Page Navigation">
      <ul class="pagination">
      </ul>
      <ul class="limit-per-page">
        <li><a href="javascript:void(0)" onclick="changeTo10()">10
				</a></li>
        <li><a href="javascript:void(0)" onclick="changeTo50()">50
				</a></li>
        <li><a href="javascript:void(0)" onclick="changeTo100()">100
				</a></li>
      </ul>
    </nav>
  </div>

​

表中填充了ajax (我已经插入了一些示例tbl)，这里有删除按钮和复选框。我想警告用户，如果他/她更改了复选框的值，或者他已经删除了该项目，他可以在单击其他menue-链接之前，或者在他关闭页面之前警告他/她。

正如我之前所读到的，Are-you-sure.js应该很容易地用以下方法实现：

$('#SummaryTableForm').areYouSure(
  {
    message: 'It looks like you have been editing something. '
       + 'If you leave before saving, your changes will be lost.'
  }
);

但在我的代码里不起作用。

用于动态表的附加代码

加载表的Servlet

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");
    PrintWriter out = response.getWriter();

    String createTableRows = "";

    List<TableRowModel> tableRowModelList= GetExamnTable();
    int paramIndex = 0;

    for (TableRowModel item : tableRowModelList)
    {
        String checked="";
        if(item.getActive()) {
            checked="checked";
        }
        createTableRows += "<tr id=\"SelectTableRowNumber"+paramIndex+"\" class=\"table-row  found-row\">"
            + "<td>"
            + "<input type=\"checkbox\" id=\"SummaryTableSelect"+paramIndex+"\" class=\"sum-table-select\"/>"
            + "</td>"
            + "<td>"
            + "<input type=\"checkbox\" name=\"SummaryTableActvateCheckbox\" id=\"SummaryTableActvate"+paramIndex+"\" "+checked+"  class=\"sum-table-activate\"  onchange=\"setChangedFlag()\"/>"
            + "</td>"
            + "<td class=\"sum-table-id\">"
            + "<label id=\"SummaryTableId"+paramIndex+"\" >"+item.getId()+"</label>"
            + "</td>"
            + "<td>"
            + "<input type=\"button\" value=\""+Utilities.getGeneralResourceMessages("button.Edit")+"\" onclick=\"EditTableRowfunction(this)\""
            + "</td>"
            + "<td>"
            + "<input type=\"button\" name=\"SummaryTableDeleteRow\" value=\""+Utilities.getGeneralResourceMessages("button.Delete")+"\" onclick=\"RemoveTableRowfunctionOfSummary(this)\""
            + "</td></tr>";

        paramIndex++;
    }

    out.print("{");
    out.print("'summaryTable':'" + createTableRows + "'");
    out.print("}");
}

用于加载表的Ajax：

$(document).ready(function() {
 $("#SummaryTableSelectAll").val("-1");
 $("#SummaryTableSelectActivate").val("-1");
//On Page-Ready load Datatable
$(function() {
    $("#SumTable tbody > tr").remove();
    var url = "Summary";
    var form = $('#SummaryTableForm')[0];
    var data = new FormData(form);
    $.ajax({
            type : "POST",
            url : url,
            data : data,
            processData: false,
            success : function(msg) {
                var objJSON = eval("(function(){return " + msg+ ";})()");
                $("#SumTable  tbody").append(objJSON.summaryTable);
                limitPerPage=3;
                startingPage=1;
                nextPageBlock = blockLimit;
                setPagination(limitPerPage);
                }
    });
});
});

如果我选中或取消选中带有name-attribute的复选框，而不是移动到另一个页面，则不会收到Pop-Up。

解决方案摘要

要接收弹出窗口，一旦输入必须有一个name-Attribute。如果有一些动态创建的代码，则has必须重新设置表单：$('#SummaryTableForm').trigger('rescan.areYouSure');，如果单击按钮，则事件应该触发has弹出。然后，在单击按钮时，必须向表单中添加class-attr dirty。$('#SummaryTableForm').attr("class","dirty");

Answer 1

要使插件正常工作，必须将name属性赋予窗体控件，因为它是跟踪变化的方式。

由于表单字段是在areYouSure初始化时收集的，因此在添加新行作为success回调的一部分之后，必须手动触发表单的重新扫描：

$('#SummaryTableForm').trigger('rescan.areYouSure');