RemoteValidation ExtraParam: Uncaught TypeError: Cannot read property 'getValue' of undefined. (Ext.NET 4.1.0)

  1. #1

    RemoteValidation ExtraParam: Uncaught TypeError: Cannot read property 'getValue' of undefined. (Ext.NET 4.1.0)

    Hello,
    I'm using remote validation and hoping the DirectEvent will not submit any form data, only ExtraParams (Type="Load") but I receive the console message: 'Cannot read property 'getValue' of undefined'. Am I doing something wrong? (using Ext.NET 4.1.0)

    The test code is taken from the example https://examples4.ext.net/#/Form/Val...te_Validation/

    Tanks in advance,


    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void CheckField(object sender, RemoteValidationEventArgs e)
        {
            string sParam1 = e.ExtraParams["Param1"];
    
            if (sParam1 == "Valid")
            {
                e.Success = true;
            }
            else
            {
                e.Success = false;
                e.ErrorMessage = "'Valid' is valid value only";
            }
        }
    
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Remote Validation - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
            <ext:FormPanel
                runat="server"
                Title="Remote Validation Form"
                BodyPadding="5"
                Frame="true"
                Width="500"
                DefaultAnchor="100%">
                <FieldDefaults>
                    <CustomConfig>
                        <ext:ConfigItem Name="LabelWidth" Value="250" Mode="Raw" />
                        <ext:ConfigItem Name="PreserveIndicatorIcon" Value="true" Mode="Raw" />
                    </CustomConfig>
                </FieldDefaults>
                <Items>
                    <ext:TextField ID="TextField1" runat="server" FieldLabel="Data 1" />
                    <ext:TextField ID="TextField2" runat="server" FieldLabel="Data 2" IsRemoteValidation="true">
                        <RemoteValidation OnValidation="CheckField" Type="Load">
                            <ExtraParams>
                                <ext:Parameter Name="Param1" Value="#{TextField1}.getValue()" Mode="Raw" Encode="true"/>
                            </ExtraParams>
                        </RemoteValidation>
                    </ext:TextField>
                </Items>
            </ext:FormPanel>
        </form>
    </body>
    </html>
  2. #2
    Hello @gefran!

    The error happens because you are trying to resolve App.TextField1 before it is actually present in the code. You actually don't want to get the value while you are creating the page, but you want to get the current value every time you submit, so it has to be interpeted at run time, not at page load time.

    Try this instead on your line 52:

    <ext:Parameter Name="Param1" Value="function() { return #{TextField1}.getValue(); }" Mode="Raw" Encode="true"/>
    I think it will do just what you want to.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabricio, thanks for your answer.

    I tried using your approach but did not get the expected results, I'm getting null values ​​in the extra parameter.

    This is a more realistic example using your approach:

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void CheckField(object sender, RemoteValidationEventArgs e)
        {
            string customerID = e.ExtraParams["customerIDParam"];
            string orderNumber = e.ExtraParams["orderNumberParam"];
    
            //Do remote validations......
            if (customerID == "A" && orderNumber == "B")
            {
                e.Success = true;
            }
            else
            {
                e.Success = false;
                e.ErrorMessage = "Order " + orderNumber + " does not belong to " + customerID;
            }
        }
    
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Remote Validation - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
            <ext:FormPanel ID="FormPanel1"
                runat="server"
                Title="Remote Validation Form"
                BodyPadding="5"
                Frame="true"
                Width="500"
                DefaultAnchor="100%">
                <FieldDefaults>
                    <CustomConfig>
                        <ext:ConfigItem Name="LabelWidth" Value="250" Mode="Raw" />
                        <ext:ConfigItem Name="PreserveIndicatorIcon" Value="true" Mode="Raw" />
                    </CustomConfig>
                </FieldDefaults>
                <Items>
                    <ext:TextField ID="customerID" runat="server" FieldLabel="Customer ID" />
                    <ext:TextField ID="orderNumber" runat="server" FieldLabel="Order number" IsRemoteValidation="true">
                        <RemoteValidation OnValidation="CheckField" Type="Load">
                            <ExtraParams>
                                <ext:Parameter Name="customerIDParam" Value="function() { return #{customerID}.getValue(); }"  Mode="Raw" Encode="true"/>
                                <ext:Parameter Name="orderNumberParam" Value="function() { return #{orderNumber}.getValue(); }"  Mode="Raw" Encode="true"/>
                            </ExtraParams>
                        </RemoteValidation>
                    </ext:TextField>
                </Items>
            </ext:FormPanel>
        </form>
    </body>
    </html>
    This is the request send to the server, as you can see the parameters take null values:

    {"config":{"__EVENTTARGET":"ResourceManager1","__EVENTARGUMENT":"orderNumber|postback|remotevalidation","extraParams":{"customerIDParam":"null","orderNumberParam":"null"},"serviceParams":"{\"id\":\"orderNumber\",\"name\":\"orderNumber\",\"value\":\"2\"}"}}
    I would appreciate you tell me if I'm doing something wrong.

    Tanks again.
  4. #4
    Hello @gefran!

    Yes, definitely encoding a "function() { ... }" code will do no good. You want to use a raw value to interpret at submission time, you can't encode it just like how you are doing.

    Instead, you have to remove the Encode="true" from the extra parameter and just set the function to return the encoded representation of the value. Something like:

    <ext:Parameter Name="orderNumberParam" Value="function() { return Ext.encode(#{orderNumber}.getValue()); }"  Mode="Raw"/>
    But now we are having a problem where ASP.Net's form validation may trigger a potentially dangerous Request.Form value was detected from the client. For which I believe only way out would be disabling ASP.NET form validation. You can find about this in other threads here if you give the forums search a go.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi Fabricio,

    It works like a charm!

    Thank you very much for your help
  6. #6
    Hello @gefran! Glad it worked for you now! We really appreciate your feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Nov 01, 2016, 2:30 PM
  2. Replies: 1
    Last Post: Dec 15, 2015, 2:18 PM
  3. Replies: 3
    Last Post: Sep 13, 2015, 8:41 AM
  4. Replies: 2
    Last Post: Aug 13, 2014, 3:01 AM
  5. Replies: 5
    Last Post: Oct 30, 2013, 1:29 PM

Tags for this Thread

Posting Permissions