带有ajax模态对话框表单的grails - 重复

时间:2016-09-29 14:58:43

标签: jquery ajax grails modal-dialog

使用Grails 2.3.5。
我在gsp页面中有一个表单。在这个页面中,我有一个按钮来打开一个带有自己表单的模式对话框。使用ajax,用户单击按钮,调用控制器方法以在对话框中使用表单呈现gsp模板。用户将表单提交给控制器以处理数据。一切都很好。当打开并多次提交相同的对话框表单时,问题就开始了。表单上的已发布数据元素将相乘并附加到先前提交的数据中。因此,如果我有一个输入字段inputField01,则第一次发布表单时,它会被序列化为& inputField01 = test01。第二次发布表单时,它被序列化为& inputField01 = test01& inputField01 = test02等等...
任何人都看过这个或类似的问题,任何修复或替代?

以下是对话框的按钮和脚本:

<input type="button" value="Add Sales Account" id="addSalesAccountsButton" class="btn btn-primary">


<script type="text/javascript">

$(document).ready(function() {  

var Win = {};

Win.Popup = function (a_title, a_url, a_forward, a_EmployeeId) {

    var properties = {
        autoOpen: false,
        title: a_title,
        modal: true,
        width: 625,
        height: 'auto',
        resizable: false,
        position: ['center', 15]
    };
    var element = $('<div/>').dialog( properties );

    this.addProperty = function(property, value) {
    element.dialog('option', property, value);
    };

    this.changeTheme = function(){      
    ($(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error"))            
    }

        this.show = function(event) {
            $('#saSpinner').css({'display' : 'inline'});
            if ( ((a_EmployeeId == null) || (a_EmployeeId.length == 0 ))){
            element.dialog('open').load(a_url, {id: event.currentTarget.id, forward: a_forward},
            function() {
            $('#saSpinner').css({'display' : 'none'})
             $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-note")          
            }
             );
            }else{
            element.dialog('open').load(a_url, {id: event.currentTarget.id, employeeHrId: a_EmployeeId , forward: a_forward},
          function() {
            $('#saSpinner').css({'display' : 'none'})
            $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-note")       
          }
        );
            }

        };
    };


    Win.AddSalesAccounts = {
    openDialog: function(event) {
        var strEmployeeHrId = document.getElementById('employeeHrId').value;

        var AddAccount = new Win.Popup('Sales Account Form', '/RateClassChange/remote/showSalesAccountForm', $('.referer').attr('id'), strEmployeeHrId);
        AddAccount.addProperty('buttons', {
            "Add Sales Account": 
        function() {    
        $('#saSpinner').css({'display' : 'block'})

        $.post("/RateClassChange/remote/addSalesAccount", $("#salesAccountForm").serialize(),
                function(responsePage) {
                $("#addSalesAccountResults").html(responsePage);
                }
        );

                $(this).dialog("close");
                $('#saSpinner').css({'display' : 'none'});
            },
            "Cancel": function() {
             $(this).dialog("close");
             $(this).html("");
            }
        });
        AddAccount.show(event);
    },

    init: function() {
        $("#addSalesAccountsButton").click( this.openDialog );
    }
    };

    Win.AddSalesAccounts.init();  

});
</script>

这是gsp模板,其中包含在对话框中呈现的表单:                       

<table>
      <tr>
          <td>
         <label for="commissionPlan" style="padding: 0px 20px 0px 0px">Commission Plans:</label>
             <g:select class="dropDown form-control " style="width:auto; height:30px;padding:0px 0px 0px 10px" name="commissionPlan"  from="${session.commissionPlansList}" optionValue="planNameDisplay" optionKey="planName" value="${params.commissionPlan}" noSelection="['':'-- Select Plan --']" />

         </td>
         <td>
             <label for="commissionRate" style="padding: 0px 20px 0px 0px">Commission Rate:</label>
             <g:textField class="form-control" style="width:125px;padding:0px 3px 0px 5px;height:30px;" name="commissionRate" value="${params?.commissionRate}" /><label>%</label>

         </td>
       </tr>
</table>

</form>

0 个答案:

没有答案