Question

我有表格

<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按钮。但是添加这段代码后，这个值只会被插入到数据库中一次，这就是我想要的，但逻辑是有缺陷的。如何通过使用第一段代码获得我想要的结果？

Answer 1

插入发生了两次。一次来自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();）可以解决问题。

代码插入数据库两次

1 个答案: