0

我有表格

<aui:form action="<%= editURL %>" method="POST" name="fm">
    <aui:fieldset>

        <aui:input name="name" />

        <aui:input name="url" />

        <aui:input name="address" />

    </aui:fieldset>

    <aui:button-row>
        <aui:button type="submit" />

        <aui:button name="cancel" value="Cancel"/>

    </aui:button-row>
</aui:form>

这段插入数据库两次的javascript代码我不知道为什么。

<aui:script use="aui-base,aui-form-validator,aui-io-request">
    AUI().use('aui-base','aui-form-validator',function(A){
        var rules = {
            <portlet:namespace/>name: {
                required: true
            },

            <portlet:namespace/>url: {
                url: true
            },

            <portlet:namespace/>address: {
                required: true
            },
        };

        var fieldStrings = {
            <portlet:namespace/>name: {
                required: 'The Name field is required.'
            },

            <portlet:namespace/>address: {
                required: 'The Address field is required.'
            },
        };
        alert("validator");
        new A.FormValidator({
            boundingBox: '#<portlet:namespace/>fm',
            fieldStrings: fieldStrings,
            rules: rules,
            showAllMessages:true,
            on: {
                    validateField: function(event) {
                     },
                    validField: function(event) {
                   },
                    errorField: function(event) {
                    },
                    submitError: function(event) {
                        alert("submitError");
                        event.preventDefault(); //prevent form submit
                    },
                    submit: function(event) {
                        alert("Submit");

                        var A = AUI();
                        var url = '<%=editURL.toString()%>';

                        A.io.request(
                            url,
                            {
                                method: 'POST',
                                form: {id: '<portlet:namespace/>fm'},
                                on: {
                                    success: function() {
                                        alert("inside success");// not getting this alert.
                                        Liferay.Util.getOpener().refreshPortlet();
                                        Liferay.Util.getOpener().closePopup('popupId');                                     
                                    }
                                }
                            }
                        );
                   }
                }
        });
    });

</aui:script>

但是，如果我添加以下代码，这是多余的，因为它已经存在于submit block上述代码中，并且由于表单中没有任何save按钮而不会以任何方式触发，则该值仅插入一次。

<aui:script use="aui-base,aui-io-request">
    A.one('#<portlet:namespace/>save').on('click', function(event) {
        var A = AUI();
        var url = '<%=editURL.toString()%>';

        A.io.request(
            url,
            {
                method: 'POST',
                form: {id: '<portlet:namespace/>fm'},
                on: {
                    success: function() {
                        Liferay.Util.getOpener().refreshPortlet();
                        Liferay.Util.getOpener().closePopup('popupId');
                    }
                }
            }
        );

    });
</aui:script>

此代码生成Uncaught TypeError: Cannot read property 'on' of null我认为是因为表单中没有save按钮。但是添加此代码，该值仅插入数据库一次，这是我想要的，但逻辑有缺陷。如何仅通过使用第一段代码来获得我想要的结果？

4

1 回答 1

0

插入发生了两次。一次从default form submit，其他从A.io.request。添加这段代码

<aui:script use="aui-base,aui-io-request">
    A.one('#<portlet:namespace/>save').on('click', function(event) {
        var A = AUI();
        var url = '<%=editURL.toString()%>';

        A.io.request(
            url,
            {
                method: 'POST',
                form: {id: '<portlet:namespace/>fm'},
                on: {
                    success: function() {
                        Liferay.Util.getOpener().refreshPortlet();
                        Liferay.Util.getOpener().closePopup('popupId');
                    }
                }
            }
        );

    });
</aui:script>

导致只插入一次。这段代码显然没有相关性，因为表单中没有save按钮。因此，存在Uncaught TypeError: Cannot read property 'on' of null掩盖缺陷并阻止表单提交两次的方法。

删除上面的代码并阻止默认提交（通过添加onSubmit="event.preventDefault();表单标签）解决了这个问题。

于 2014-09-22T09:33:20.553 回答