jQuery Validate在jQuery UI Dialog中的远程方法只能运行一次

时间:2011-11-27 17:57:48

标签: jquery jquery-ui jquery-validate jquery-ui-dialog

我需要先使用'远程'方法检查公司名称的可用性,然后再继续插入上述公司

我目前正在使用jquery UI Dialog输入公司的数据,因为我需要在同一页面上进行,然后列出所有公司

目前我或多或少都在工作,但没有预期,因为远程方法只是第一次工作,下次我尝试打开对话框并尝试输入已存在的名称时,“远程”方法只是不再起作用了,我不知道这是什么原因。

编辑:我会试着看看能否解释一下

假设我有2家注册公司: company1 company2

  1. 第一次加载页面时我打开对话框尝试重新输入让我们说:'company2','remote'方法正常工作(The 仅当'txtName'失去焦点时才会调用WebMethod,每次更改内容时都会调用它。我想这是 正常的行为,不是吗?
  2. 如果我更改了文字,让我们说,我输入'company20', 注册公司之间不存在,这次是公司 已正确注册。
  3. 当再次尝试重新输入上一个值( company20 )时会出现问题,在这种情况下,WebMethod不再 呼叫,允许您注册'company20',再次注册 不存在,这不是真的。就好像保留了'company20' 作为有效值,从第一次打开对话框开始, 但是,如果我输入另一个值,那么确实存在,例如 company1 company2 ,'remote'方法再次正常运行。
  4. 我不知道我是否已经解释得很好,因为即使对我来说这也很令人困惑,但我希望你能理解我,并且你可以帮助我。

    以下是我使用的所有 javascript

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    
        <script type="text/javascript">
         $(document).ready(function() {     
    
                var dialogFormValidator= $("#form2").validate({
                     rules: {
                       txtName: {
                          required: true,
                          remote: function(){
                            var result={
                                type: "POST", 
                                url: "RemoteMethod.aspx/IsUnique",
                                data: "{'name': '" + $('#txtName').val() + "'}" ,
                                contentType: "application/json; charset=utf-8",  
                                dataType: "json",                              
                                dataFilter: function(data) { 
                                      var x = (JSON.parse(data)).d;
                                      return JSON.stringify(x); 
                                }  
    
                            }
                            return result;
                          }
                      },
                      txtAddress: {
                          required: true
                      }
                   },
                   messages :{
                     txtName : {       
                        remote: " That name is already taken,please enter a different one."
                     }               
    
                   }
    
                });
                $("#dialog-form").dialog({
                    autoOpen: false,
                    width: 350,
                    height: 290,
                    modal: true,
                    beforeClose: function(event, ui) { 
                        $("#txtName").val("");
                        $("#txtAddress").val("");   
                        dialogFormValidator.resetForm();                    
    
                    },
                    buttons:
                    {
                        "Add": function() {
    
                            var valid = dialogFormValidator.form(); 
                            if (valid) {
                                var name = $("#txtName").val();
                                var address = $("#txtAddress").val();
    
    
                                var params = new Object();
                                params.name = name;
                                params.address = address;
                                params = JSON.stringify(params);
    
                                $.ajax({
                                    type: 'POST',
                                    url: 'RemoteMethod.aspx/AddNewItem',
                                    data: params,
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json",
                                    success: function(msg) {
                                        if (msg.d) {
    
                                            <%=ClientScript.GetPostBackEventReference(UpdatePanel1,"") %>;
                                            $("#dialog-form").dialog("close");
    
                                        }
                                    },
                                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                                        alert(textStatus + ": " + XMLHttpRequest.responseText);
                                    }
                                });
                             } 
    
    
                            },
                            "Cancel": function() {                           
                                $(this).dialog("close");
                            }
                        }
                });
    
                $("#add").click(function(event) {
                    event.preventDefault();
                    $("#dialog-form").dialog("open");
                });
            });
    
        </script>    
    </asp:Content>
    

    正如您所看到的,一旦满足所有验证,我立即通过javascript刷新UpdatePanel的内容(我向所有现有公司展示的网格视图)。(我为了简单起见使用了UpdatePanel)

    此处还有用于检查公司名称可用性的WebMehod:

     <WebMethod()> _
        Public Shared Function IsUnique(ByVal name As String) As Boolean
            Dim count As Integer = 0
            Using cn As New SqlConnection(My.Settings.Conexion.ToString())
                Dim sql As String = "SELECT COUNT(*) FROM Companies WHERE Name=@Name"
                cn.Open()
                Dim cmd As New SqlCommand(sql, cn)
                cmd.Parameters.AddWithValue("@Name", name)
                count = Convert.ToInt32(cmd.ExecuteScalar())
                cn.Close()
            End Using
            If count Then
                Return False
            Else
                Return True
            End If
    
        End Function
    

    编辑:ASP.net标记:

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <div>
            <a href="#" id="add">Add New</a>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:GridView ID="gvSucursales" runat="server" AutoGenerateColumns="False" 
                        DataKeyNames="Id">                  
                        <Columns>
                            <asp:BoundField DataField="Id" HeaderText="Id">
                                <ItemStyle Width="50px" />
                            </asp:BoundField>
                            <asp:BoundField DataField="Nombre" HeaderText="Name">
                                <ItemStyle Width="200px" />
                            </asp:BoundField>
                            <asp:BoundField DataField="Direccion" HeaderText="Address">
                                <ItemStyle Width="300px" />
                            </asp:BoundField>
                        </Columns>                  
                    </asp:GridView>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
        <div id="dialog-form" title="Add new Company">
            <p>
                All the fields are required.</p>
            <form id="form2">
            <table>
                <tr>
                    <td>
                        <label for="txtName" id="lblName">
                            Name</label>
                    </td>
                    <td>
                        <input type="text" name="txtName" id="txtName" class="text ui-widget-content ui-corner-all" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="txtAddress" id="lblAddress">
                            Address</label>
                    </td>
                    <td>
                        <input type="text" name="txtAddress" id="txtAddress" class="text ui-widget-content ui-corner-all" />
                    </td>
                </tr>
            </table>
            </form>
        </div>
    </asp:Content>
    

    关于如何解决这个问题的任何想法都将非常感激

2 个答案:

答案 0 :(得分:2)

我怀疑这个插件似乎缓存了这个值,并且发现了一点点我发现我可以使用removeData("previousValue")手动使缓存失效,而这正是我所做的:

$("#txtName").change(function () {
    $("#txtName").removeData("previousValue");
});

猜猜是什么......? 有效!

答案 1 :(得分:1)

首先,我有一个问题:您的AddNewItem页面方法是否被点击?

我根据你的代码创建了一个小项目。 对我来说,IsUnique的电话一直都没问题。 我在调用AddNewItem页面方法时遇到了麻烦,但总是返回Internal 500 Error

params对象传递给AddNewItem方法的方式不正确。您的代码将生成如下的json字符串:

var params = new Object();
params.name = name;
params.address = address;
params = JSON.stringify(params);

// params => '{"name": "xxx", "address": "ndndnd"}'

但是asp.net期望这样:'{"params": {"name": "xxx", "address": "ndndnd"}}'(假设AddNewItem的参数被称为“params”。

var oParams = new Object();
oParams.name = name;
oParams.address = address;

var oData = { 'params' : oParams };

$.ajax({
   ...
   data: JSON.stringify(oData),
   ...
});

更改后,我的项目按预期工作,我可以添加新项目,IsUnique会考虑添加的项目。

希望这是你问题的解决方案...... 告诉它是否不符合您的需求


使用远程验证规则和.form()

“添加”按钮处理程序中也存在可能的缺陷。你这样做:

 var valid = dialogFormValidator.form(); 
 if (valid) {

问题是远程规则需要一段时间才能执行,并且在完全执行之前,该字段将被视为有效。

在远程规则执行结束之前,if (valid)true,并且如果它实际上使该字段无效,则为时已晚。

我发现了一篇关于此问题的文章:https://stackoverflow.com/...jquery-validation-waiting-for-remote-check-to-complete

我对文章中提出的while()解决方案并不满意,但它可以为您提供想法。