[CLOSED] Not able to access Ext controls and static DirectMethods from JavaScript during Initial Request

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Not able to access Ext controls and static DirectMethods from JavaScript during Initial Request

    Hi,

    I am not able to acces the Ext controls or static DirectMethods from javascript during the Initial Page request. This is how i am trying to access.

    A web page that hosts the user control.

    WebPage ASPX Code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="LearnExtNet.WebForm3" %>
    
    <%@ Register src="WebUserControl2.ascx" tagname="WebUserControl2" tagprefix="uc1" %>
    
    <!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 runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
           <ext:ResourceManager ID="ResourceManager1" runat="server">
           </ext:ResourceManager>
           
        </div>
        <uc1:WebUserControl2 ID="WebUserControl21" runat="server" />
        </form>
    </body>
    </html>
    Web Page Code Behind Code:

       public partial class WebForm3 : System.Web.UI.Page
       {
          protected void Page_Load(object sender, EventArgs e)
          {
    
          }
    
          [DirectMethod]
          public static void LogException(string e)
          {
             // Log the Exception
          }
    
       }
    The user control actually renders a dynamic control inside <DIV> using the javascript.

    User Control ASCX

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl2.ascx.cs"
       Inherits="LearnExtNet.WebUserControl2" %>
    <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="JScript1.js" type="text/javascript"></script>
    <script type="text/javascript">
    
       $(document).ready(function () {
          sendRequestOnDocReady();
       });
      
    </script>
    <div id="container"></div>
    <ext:Panel ID="panError" runat="server" Height="300" Title="Error" Hidden="true">
       <Content>
          An error Occured.
       </Content>
    </ext:Panel>
    User Control Code Behind:

    public partial class WebUserControl2 : System.Web.UI.UserControl
       {
          protected void Page_Load(object sender, EventArgs e)
          {
             Page.ClientScript.RegisterExpandoAttribute(container.ClientID, "panErrorId", panError.ClientID);
          }
    
          [DirectMethod]
          public static void LogException(string e)
          {
             // Log the Exception
          }
       }
    The JavaScript function called during the document ready event of the user control.

    Java Script code:

    function sendRequestOnDocReady(controlId) {
       try {
    
          // render the dynamic control in the given control
          //
          // code.....
    
          // if suppose an exception occurs here
          //
          throw "Error";
       } catch (e) {
    
          // here i want to show the error in the Ext panel that was present in the user control as hidden control. 
          // But, I am not able access this control using Ext.getCmp
          //
          var container = document.getElementById(controlId);
          var errorPan = Ext.getCmp(container.panErrorId); // I tried Ext.get() also it is not working
    
          // I want to log the exception here but the static DirectMethod is undefined here
          //
          Ext.net.DirectMethods.LogException(e);
       }
    }
    The JavaScript code describes where exactly i was facing the problem. Please read the comments in the JavaScript. Can you please let me know why i am not able to acccess the Ext Panel and static DirectMethods from this javascript method.

    Regards.
    Manoj
    Last edited by Daniil; May 23, 2011 at 1:34 PM. Reason: Repaired [CODE] tags, [CLOSED]
  2. #2
    Hi,

    Lets consider
    $(document).ready(function () {
        sendRequestOnDocReady();
    });
    and

    function sendRequestOnDocReady(controlId)
    I can't see where you pass 'controlId' argument.
  3. #3
    Hi Daniil,

    Sorry, I have not updated the User Control code. The controlId is passed from the user control like this.

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl2.ascx.cs"
       Inherits="LearnExtNet.WebUserControl2" %>
    <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="JScript1.js" type="text/javascript"></script>
    <script type="text/javascript">
    
       $(document).ready(function () {
          sendRequestOnDocReady('<% =container.ClientID %>');
       });
      
    </script>
    <div id="container" runat="server"></div>
    <ext:Panel ID="panError" runat="server" Height="300" Title="Error" Hidden="true">
       <Content>
          An error Occured.
       </Content>
    </ext:Panel>
    Regards,
    Manoj.
  4. #4
    Thanks.

    Why did you define the same DirectMethod in .aspx and .ascx? Which one do you need to access?
  5. #5
    Hi Daniil,

    Since i am not able to access the DirectMethod. I have copied this method to both ASPX and ASCX.

    The DirectMethod defined in the Page should be OK if i can access.

    Regards,
    Manoj.
  6. #6
    Well, static DirectMethod within a user control is not supported.

    Here is the working test case.

    Example .ascx
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Form.Controls.Add(LoadControl("TestUserControl.ascx"));
        }
    
        [DirectMethod]
        public static void LogException(string e)
        {
            X.Msg.Alert("LogException", e).Show();
        }
    </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 runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
        </form>
    </body>
    </html>
    Example .aspx
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            Page.ClientScript.RegisterExpandoAttribute(container.ClientID, "panErrorId", panError.ClientID);
        }
    </script>
    
    <script type="text/javascript">
        Ext.onReady(function() {
            sendRequestOnDocReady('<%=container.ClientID %>');
        });
        
        var sendRequestOnDocReady = function (controlId) {
                try {
                    throw "Error";
                } catch (e) {
                    var container = document.getElementById(controlId);
                    var errorPan = Ext.getCmp(container.panErrorId);
                    errorPan.show();
                    Ext.net.DirectMethods.LogException(e);
                }
            }   
    </script>
    
    <div id="container" runat="server"></div>
    <ext:Panel 
        ID="panError" 
        runat="server" 
        Title="Error"
        Html="An error occured" 
        Hidden="true">
    </ext:Panel>
  7. #7
    If you still want too use JQuery .ready(), a small delay is required.
    $(document).ready(function() {
        sendRequestOnDocReady.defer(10, null, ['<%=container.ClientID %>']);
    });
  8. #8
    Hi Daniil,

    The example which i have shown is a replication of a production scenario. I will not have access to add the user control as you did. The user control is dynamically rendered by a Third Party tool called Kalitte. The user control is a widget in a dashboard. So, as you have suggested I can not move the <DIV> and Error Panel to the ASPX. The Error should be shown in the user control and not in the Page. The page contains the Dashboard control and the dashboard contains widgets (UserControls).

    Regards,
    Manoj.
  9. #9
    Well, I did not move <div> in .aspx.
  10. #10
    Hi Daniil,

    The 10 ms/secs delay worked. But, I would like to know why do we need that delay.

    Regards,
    Manoj.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] DirectMethods in custom controls
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 11, 2012, 2:10 PM
  2. Call DirectMethods from Javascript
    By ginsar in forum 1.x Help
    Replies: 4
    Last Post: Jun 08, 2011, 11:59 AM
  3. Replies: 13
    Last Post: May 16, 2011, 1:26 PM
  4. [CLOSED] DirectMethods.Request+webservice
    By farisqadadeh in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 06, 2011, 7:13 AM
  5. Access Ext controls via javaScript
    By peter.campbell in forum 1.x Help
    Replies: 2
    Last Post: Jan 25, 2011, 2:32 PM

Posting Permissions