Question

我必须在jsp中处理未保存场景的更改。我有一个jsp表格＆amp;两个外部js文件。

1）当我点击表格内的保存按钮时，工作正常 2）如果我将alert.js代码作为JSP的一部分作为内联脚本，正常工作 3）如果我外化alert.js并将此js作为导入的一部分包含在内，它将进入app.js中的submit_form（）函数。但是提交者并没有被提供。

1）Jsp表格

I have form with inline js click event like below

    //submit form with validation
    $('button:submit').click(function() {
        submit_form('#name', '#siteId', '${add}', '${view}', 'Site');
    });


    <form:form id="form" action="${save}" commandName="site" cssClass="form-horizontal" data-toggle="validator">
        .
        .
        .
        .
        <button type="submit" class="btn btn-primary" disabled><spring:message code="form.button.site.save"/></button>
    </form:form>

app.js

function submit_form(name, page_id, $add_url, $view_url, page_name) {
    $form.validate({
        .
        .
        submitHandler: function(form) {
            .
            .
            $.post($form.attr('action'), $form.serialize(), function(response) {
            });
        }
    });

alert.js

$(document).ready(function() {
    //unsaved alert section
    var unsaved = false;

    $(document).on('change', ':input', ':select', function() { //triggers change in all input/select fields including text type
        unsaved = true;
    });

    $('a.form-done').click(function() {
        var $this = $(this);
        if(unsaved === true) {
            var $modal = $('#unsaveModal');
            $modal.find(".modal-title").text("Unsaved Changes");
            $modal.find(".modal-body span").html("Changes have not been saved. Do you want to save changes?");
            $modal.find('.modal-footer .btn-warning').attr('href', $this.attr('href'));
            $modal.modal('show');
            return false;
        } else {
            return;
        }
    });

    $('button:submit').click(function() {
        unsaved = false;
    });

    $('#unsaveModal .modal-footer .btn-primary').click(function() {
        $('button:submit').prop('disabled', true);
        $('#form').submit();
            $('#unsaveModal').modal('hide');
        });
    });

Answer 1

function submit_form(name, page_id, $add_url, $view_url, page_name) {
    $form.validate({
        ....
        submitHandler: function(form) {
            ....
        }
    });
    ....

.validate()方法仅用于 初始化 表单上的插件，不应放在click处理程序中，并且永远不会在submit处理程序中。该插件已捕获click并中断submit事件。将它放在submit处理程序中会破坏它，因为在调用插件初始化之前已经发生了提交。

$(document).ready(function() {

    $form.validate({
        ....
        submitHandler: function(form) {
            // ajax here
            ....
        }
    });
    ....

submitHandler无法使用外部js

1 个答案: