在处理多个记录时,使用ajax更新表不起作用

时间:2014-01-03 15:33:33

标签: javascript ajax grails

我正在开发一个用于性能评估工具的groovy grails应用程序。我目前正在制作一个表格,创建一个表格,列出员工的主管。此表的第一列中的每个记录都有一个删除按钮。单击时,表单将发布到delete操作(工作正常)。我正在尝试使用jquery制作ajax call,以便在不刷新页面的情况下完成整个过程。如果只有一个主管,则ajax调用正常,但如果有多个主管,则即使删除发生,ajax调用也会失败。

的list.gsp

<div class="form-action">
    <div id="deleteSupervisorReport">
        <g:render template="displaySupervisorsTemplate" model="[supervisorReportInstanceList: supervisorReportInstanceList]"/>
    </div>
</div>

_displaySupervisorsTemplate.gsp

<g:if test="${supervisorReportInstanceList.size() > 0}">
<table class="table table-bordered table-hover table-striped table-dataTable">
    <caption class="hide">Supervisor Reports</caption>
    <thead>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Employee Type</th>
        <th>Start Date</th>
        <th>Title</th>
    </tr>
    </thead>
    <tbody>
    <g:each var="supervisorReport" in="${supervisorReportInstanceList}">
        <tr>
            <td>
                <g:form  action="delete" class="form-horizontal" method="post">
                    <g:hiddenField name="reportId" value="${supervisorReport.reportId}"/>
                    <g:hiddenField name="supervisorId" value="${supervisorReport.supervisorId}"/>
                    <g:actionSubmit class="delete"  value="${message(code: 'default.button.delete.label', default: 'delete')}" />
                </g:form>
            </td>
            <td><pr:personLink person="${supervisorReport.supervisor}" /></td>
            <td>${fieldValue(bean: supervisorReport.supervisor, field: "employeeType")}</td>
            <td>${fieldValue(bean: supervisorReport.supervisor, field: "currentTitle.startDate")}</td>
            <td>${fieldValue(bean: supervisorReport.supervisor, field: "currentTitle.name")}</td>
        </tr>
    </g:each>
    </tbody>
</table>
</g:if>
<g:else>
    <p>You have no Reports.</p>
</g:else>

main.js

// Attach the delete supervisor submission handler
$("body").on("submit", "#deleteSupervisorReport form", function(e) {
    e.preventDefault();

    var method = this.method;
    var action = this.action;
    var data = $(this).serialize();

    $.ajax({
        type: method,
        url: action,
        data: data,
        success: function(data) {
            // Replace the table
            $("#deleteSupervisorReport").replaceWith(data);
        },
        error: function(data) {
            // this alert pops up whenever I try to delete a record when a person has more than one supervisor
            alert("javascript Error, please refresh the page");
        }
    });
});

删除操作

// Delete a specific SupervisorReport
def delete() {
    withSupervisorReport { supervisorReportInstance ->            
        supervisorReportInstance.delete(flush: true)
        withFormat {
            html {
                def list = SupervisorReport.findAllByReport(Person.get(params.reportId as Integer))
                def message = 'Supervisor report deleted'
                def messageType = "Success"

                render(template:"/supervisorReport/displaySupervisorsTemplate", model: [supervisorReportInstanceList: list, message: message, messageType: messageType])
            }
        }            
    }
}

对于过多的代码感到抱歉,但我甚至不知道问题出在哪里。

0 个答案:

没有答案