如何正确使用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>

table 填充了 ajax （我插入了一些示例 tbl），那里有删除按钮和复选框。我想在用户点击另一个菜单-link 之前或在他关闭页面之前警告用户，如果 he/she 更改了复选框的值或者他删除了该项目。

正如我之前读到的，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.'
  }
);

但它在我的代码中不起作用。

动态的附加代码table

Servlet 加载 table

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 加载 table:

$(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 属性的复选框，而不是转到其他页面，我将不会收到弹出窗口。

解决方案总结

要接收弹出窗口，输入必须具有 name 属性。如果有一些动态创建的代码 AYS 必须重新扫描表格：$('#SummaryTableForm').trigger('rescan.areYouSure'); 如果单击按钮并且事件应触发 AYS 弹出窗口。然后，在单击按钮时，必须将 class-attr dirty 添加到表单中。 $('#SummaryTableForm').attr("class","dirty");

Answer 1

要使插件正常工作，您必须为表单控件提供 name 属性，因为它是 keeps track of changes.

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

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

如何正确使用AreYouSure？

How to use AreYouSure correctly?

forms

jquery

jsp

warnings

onbeforeunload