[CLOSED] Javascript error - why cant JS find a Ext control? "<Window> is not defined"

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Javascript error - why cant JS find a Ext control? "<Window> is not defined"

    As I posted on the normal forum, here:
    http://forums.ext.net/showthread.php...t-defined-quot

    ----------------------------------------

    I want that Javascript should hide a Window.

    In my real project, it is not working. So I thought that I make a dummy with the same code approximately so that there was something easy that someone could copy-paste to try out and test. However, the dummy works as expected and its as almost exactly the same code.

    So, my not-working page I will present here. The working version, "Test.aspx" follows below.

    NOT WORKING VERSION:


    Part of Customers.aspx:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Secure/Views/View.Master" AutoEventWireup="true" CodeBehind="Customers.aspx.cs" Inherits="WebApplicationExtNetTest.Secure.Views.Customers" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register TagPrefix="CP" TagName="Customer" Src="../UserControls/Customer.ascx" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script language="javascript" type="text/javascript">
    
        function CustomerReportCallback(success, errorMsg, customerId) {
            alert("Test: " + customerId);   // this alert shows!
            Window_CreateNewCustomer.hide();  // Here we get an error saying "Uncaught ReferenceError: Window_CreateNewCustomer is not defined"
        }
    </script>
    </asp:Content>
    // cut away some stuff
    
    <asp:Content ID="Content3" ContentPlaceHolderID="CPH_west" runat="server">
        <ext:Container ID="Container1" runat="server" Layout="Fit" Height="800" MonitorResize="true">
            <Content>
                  // Some stuff
                  
                  // Nested here somewhere I have a GridPanel and on that a button that shows the Window below as follows:
                  <ext:GridPanel
                            ID="GridPanel2" 
                            runat="server" 
                            StoreID="Store_AvailableCustomers">
                                <TopBar>
                                    <ext:Toolbar runat="server">
                                        <Items>
                                            <ext:Button ID="btnCreateNewCustomer" runat="server" Icon="Add" Text="Skapa ny kund">
                                                <DirectEvents>
                                                    <Click OnEvent="Button_ShowCreateNewCustomer_Click">
                                                        <EventMask ShowMask="true" />
                                                    </Click>
                                                </DirectEvents> 
                                            </ext:Button>
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                  // more stuff
    
                  <ext:Window 
                              ID="Window_CreateNewCustomer" 
                              runat="server" 
                              Icon="New"
                              Title="Skapa ny kund" 
                              Hidden="true"
                              Width="480"
                              Height="370"
                              Modal="true">
    
                              <Content>
                                  <CP:Customer ID="customer_create" runat="server" Title="Skapa ny kund"  />
                              </Content>
                      </ext:Window>
            </Content>
        </ext:Container>
    </asp:Content>
    The UserControl "Customer" in the Window has a button that calls a DirectMethod, and in that DirectMethod we call some stuff that eventually finds its way to the javascript on top, but fails there saying "Uncaught ReferenceError: Window_CreateNewCustomer is not defined".

    We know that the javascript function is called since we get the first alert saying "Test: "...

    The only difference I can see between the two is that above we call a code-behind method, DirectEvent, that shows the Windows:

     
    protected void Button_ShowCreateNewCustomer_Click(object sender, DirectEventArgs e)
    {
         customer_create._CustomerId = 0;
         Window_CreateNewCustomer.Show();
    }
    while below it is done like:

    <Click Handler="Window_CreateNewCustomer.show()" />
    Actually, when changing the above code to use a Listener instead of DirectEvent, the Window won't show at all:
    <ext:Button ID="btnCreateNewCustomer" runat="server" Icon="Add" Text="Skapa ny kund">
        <Listeners>
            <Click Handler="Window_CreateNewCustomer.show()" />
        </Listeners>
    </ext:Button>
    I get "Window_Legitimation is not defined" in the Javascript error console.

    Whats going on?


    WORKING VERSION:


    <%@ Page Language="C#" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <script runat="server">
        [DirectMethod]
        public void CreateNewCustomer()
        {
            X.Js.Call("CustomerReportCallback", 1, "", 123);
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Show a Hidden Window - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    
        <script language="javascript" type="text/javascript">
    
            function CustomerReportCallback(success, errorMsg, customerId) {
                alert("Test: " + customerId);
                Window_CreateNewCustomer.hide();
            }
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server">
              
            </ext:ResourceManager>
            
           <ext:Button 
                    ID="Button3" 
                    runat="server" 
                    Text="Click Listener">
                    <Listeners>
                        <Click Handler="Window_CreateNewCustomer.show()" />
                    </Listeners>
                </ext:Button>
    
                <ext:Window 
            ID="Window_CreateNewCustomer" 
            runat="server" 
            Icon="New"
            Title="Skapa ny kund" 
            Hidden="true">
    
            <Content>
                <ext:FormPanel ID="FormPanel2" runat="server" Height="330"  Width="460" Title="Kundinformation" Padding="5" MonitorResize="true">
                    <BottomBar runat="server">
                        <ext:Toolbar ID="Toolbar2" runat="server">
                            <Items>
                                <ext:ToolbarFill ID="ToolbarFill2" runat="server" />
                                <ext:Button ID="Button2" Icon="Disk" Text="Spara" runat="server" >
                                 <Listeners>
                                    <Click Handler="Ext.net.DirectMethods.CreateNewCustomer()" />
                                </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </BottomBar>
                    <Content>
                        <ext:FieldSet ID="FieldSet1"
                        runat="server"
                        Title="Grunddata"
                        AutoHeight="true"
                        Layout="Form">
                            <Items>
                                <ext:CompositeField ID="CompositeField9" runat="server" FieldLabel="Personnr" AnchorHorizontal="100%">
                                    <Items>
                                        <ext:TextField ID="TextField1" runat="server" Width="220" />
                                    </Items>
                                </ext:CompositeField>
                            </Items>
                        </ext:FieldSet>
                    </Content>
                </ext:FormPanel>
            </Content>
        </ext:Window>
        </form>
    </body>
    </html>
    Last edited by Daniil; Apr 09, 2011 at 12:43 PM. Reason: Marked as [CLOSED]. No more information was provided.
  2. #2
    Hi,

    MasterPage is INamingContainer therefore ID != ClientID (we use ClientID on the client side)
    Try the following code
    <Click Handler="#{Window_CreateNewCustomer}.show()" />
    or set IDMode="Explicit" for the window (in this case, be careful because window's children controls must have unique ids)
  3. #3
    Thanks for that, it worked =)

    I thought I tried playing around with that kind of code (#'s and {}) but obviously not. Thanks =)


    What about the javascript code at the top?:

    <script language="javascript" type="text/javascript">
     
        function CustomerReportCallback(success, errorMsg, customerId) {
            alert("Test: " + customerId);   // this alert shows!
            Window_CreateNewCustomer.hide();  // Here we get an error saying "Uncaught ReferenceError: Window_CreateNewCustomer is not defined"
        }
    </script>
    I changed the IDMode="Explicit" but that means changing all the auto-generated names in my UserControl which is a mess. So meanwhile, can the Javascript be changed to work without IDMode="Explicit"?
  4. #4
    Hi,

    You can wrap your script tags by XScript control and use #{} syntax inside
    Please see XScript using
    https://examples1.ext.net/#/GridPane...Header/Filter/
  5. #5
    Thanks, I will look into that in a bit.

    But one question arises: why did the "working version" above work? I did not use IDMode there? Is it because in that code there wasnt UserControls/nested controls somehow?

    Take this as en example:

    https://examples1.ext.net/#/Form/Dat...From-To_Range/

    That example works without any IDMode="Explicit"

    But when I have almost the same markup in my project, it doesnt work at all. Im guessing it's the same problem.

                          <ext:DateField ID="DateField_StartDate" runat="server" Width="170" Vtype="daterange">
                                <CustomConfig>
                                    <ext:ConfigItem Name="endDateField" Value="#{DateField_EndDate}" Mode="Value" />
                                </CustomConfig>      
                            </ext:DateField>
                            <ext:DisplayField ID="DisplayField1" runat="server" Text="Till&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" />
                            <ext:DateField ID="DateField_EndDate" runat="server" Width="170" Vtype="daterange">
                                <CustomConfig>
                                    <ext:ConfigItem Name="startDateField" Value="#{DateField_StartDate}" Mode="Value" />
                                </CustomConfig>                           
                            </ext:DateField>
    The above code does not work. I know for a fact that there are no other Controls anywhere in the project that is called "DateField_StartDate" as I have searched (CTRL + F) all over - it does not exist. yet, when I add IDMode="Explicit" the the DateFields, I get this:

    System.ArgumentException: A Control with an ID of "DateField_StartDate" has already been initialized.
    Any thoughts on that?
  6. #6
    Hi,

    But one question arises: why did the "working version" above work? I did not use IDMode there? Is it because in that code there wasnt UserControls/nested controls somehow?
    In working sample there is no INamingContainer therefore ID == ClientID

    The above code does not work. I know for a fact that there are no other Controls anywhere in the project that is called "DateField_StartDate" as I have searched (CTRL + F) all over - it does not exist. yet, when I add IDMode="Explicit" the the DateFields, I get this:

    System.ArgumentException: A Control with an ID of "DateField_StartDate" has already been initialized.
    Any thoughts on that?
    Did you place DateField inside user control and use the user control several times in the page?
  7. #7
    I will read up n INamingContainer.

    Did you place DateField inside user control and use the user control several times in the page?
    Hmm, so another UserControl (Customer) is placed twice on a Page. That UserControl (Customer) has one instance of the UserControl "Leg", so the answer to your question is probably yes since the UserControl "Leg" is out there in two instances via the Customer Control.

    So what would I have to do to get the DateField-things to work if i dont want to use IDMode="Explicit"?
  8. #8
    Quote Originally Posted by wagger View Post
    So what would I have to do to get the DateField-things to work if i dont want to use IDMode="Explicit"?
    In this case the client id will be like this:
    UserControl1_DateField1.getValue();
    UserControl2_DateField1.getValue();
    The UserControl1 and UserControl2 are the IDs of two user controls.
  9. #9
    Thanks, but Im not following.

    The DateFields are both in the same control as above and the class name of the UserControl is "Leg" (for example).

    The IDs of the DateFields are DateField_StartDate and DateField_EndDate and the references in the ext:ConfigItem are exactly those IDs.

    How do you mean I should change the ConfigItem:s? I mean, they are in the same UserControl so writing "UserControl1_DateField_StartDate" and "UserControl2_DateField_EndDate" doesnt really make sense...
  10. #10
    Well, if there are more user controls levels (I mean that a one user control is on another one) or MasterPage, the client ids can be different.

    Please follow the link to know how client ids are generated.
    http://forums.ext.net/showthread.php?12957
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] How does "MaskCls" work for "AutoLoad" mask in panel control
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 19, 2012, 12:09 PM
  2. Replies: 3
    Last Post: Mar 22, 2012, 7:46 AM
  3. [CLOSED] "True is not defined" javascript error
    By coleg123 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 11, 2011, 6:51 PM
  4. Replies: 0
    Last Post: Mar 29, 2011, 5:32 PM
  5. Replies: 0
    Last Post: Mar 29, 2011, 3:59 PM

Tags for this Thread

Posting Permissions