[CLOSED] [1.0] Bug in IE 8 while loading/rendering dynamic panels using eval js function

**webclouder** · Jul 12, 2010, 8:14 AM

hi,

I create a set of panels through DirectMethod call then on success I iterate through the panels and eval them one by one.
this approach work 95% in FireFox "rendering done just fine but few times its not render". in IE 8 only 10% this approach work otherwise some panels rendered and some not!!!

Please help me enhance the execution of the panels rendering "is there alternative for eval".

note: the actual code is copy-righted and can't be exposed...so i provided the major bits of it with dummy names.

/*C#*/
[DirectMethod]
        public static List<string> CreateDynamicPanels(long Id)
        {
            var resutls = new List<string>();

            var currentObj = GetCurrentObj(Id);

            foreach (var s in currentObj .Items)
            {
/*CreatePanel is static method that create new panel with url...autloload params....nothing special AND RETURN TYPE is panel*/
                    resutls.Add(CreatePanel(s.Code, s.Name, Id).ToScript(RenderMode.AddTo,
                        "pnlContainers", true));


            }

            return resutls;
        }

/*JS*/
/*Note: on success of calling the directMethod above i do the following to execute the DirectMethod Json Response*/
for (var i = 0; i < results.length; i++) {
           eval(results[i]);
}

Important Remark: in the actual code each one of the dynamic created panels after being loaded...automatically I fire blur event that cause a creation of child dynamic panels just like the ones shown above...and IE browser stuck in rendering those child panels.

example:
dynamic panel A: "Rendered fine with all children".
child dynamic panel 1.
child dynamic panel 2.
child dynamic panel 3.

dynamic panel B: "Rendered fine but WITHOUT children"
child dynamic panel 1.
child dynamic panel 2.

dynamic panel C: "Rendered fine but WITHOUT children"
child dynamic panel 1.
child dynamic panel 2.
child dynamic panel 3.
child dynamic panel 4.

in the given example it happen that even the first panel "A" children not get rendered...so why FF able to handle this complexity while IE goes nuts...

**Vladimir** · Jul 12, 2010, 10:32 AM

Hi,

Unfortunately, we need test sample which demonstrates the problem

Here is my test case which works fine

Main page

<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!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></title>

    <script runat="server">
    
        [DirectMethod]
        public static System.Collections.Generic.List<string> CreateDynamicPanels()
        {
            var resutls = new System.Collections.Generic.List<string>();

            for (int i = 0; i < 5; i++)
            {
                resutls.Add(CreatePanel(i).ToScript(RenderMode.AddTo, "pnlContainers", true));
            }

            return resutls;
        }

        private static Ext.Net.Panel CreatePanel(int i)
        {
            return new Ext.Net.Panel
            {
                Title = "Panel " + i,
                AutoLoad = { 
                    Url = "Child.aspx",
                    Mode = LoadMode.IFrame
                },
                Height=80
            };
        }
        
    </script>
    
    <script type="text/javascript">
        function parsePanels(result){
            for (var i = 0; i < result.length; i++) {
                eval(result[i]);
            }
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        
        <ext:Panel ID="pnlContainers" runat="server" Title="Container" AutoHeight="true">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Create">
                            <Listeners>
                                <Click Handler="#{DirectMethods}.CreateDynamicPanels({success : parsePanels});" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:Panel>
    </form>
</body>
</html>

AutoLoad page

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    Hi, I am Child
</body>
</html>

**webclouder** · Jul 12, 2010, 12:36 PM

thanks for trying that out.... after performing some analysis i think the main problem caused by the blur event, please try to call the 'parsePanels' by firing the blur on the page_load event inside the parent panels.

i use the following code to perform the blur.

protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {

                    //loadingScript mimic user action to raise blure event which invoke parsePanels().
                    string loadingScript =
                        String.Format("Ext.getCmp('{0}').focus(); Ext.getCmp('{1}').focus();",
                                      this.txtCode.ClientID, this.btnAddNew.ClientID);

                    ResourceManager.GetInstance(this).RegisterOnReadyScript(loadingScript);

            }

        }

if you added the above modifications you will face the same problem i explained in the example of the first post!!!

i think we need to force some sequencing/synch for the loading by introducing delay or find alternative for eval!!!

i tried to use focus(false,50); but gave me no results...

thanks,

**Vladimir** · Jul 12, 2010, 3:01 PM

Hi,

Sorry, I am not sure how i should modify the example. Can you modify my example to demonstrate the issue? Thanks

**webclouder** · Jul 12, 2010, 4:27 PM

ok, here is full code that cause the bug in IE... at least its clear now that nested blur firing is the problem!!

/*demo1.aspx*/

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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></title>

    <script runat="server">
        [DirectMethod]
        public static System.Collections.Generic.List<string> CreateDynamicPanels()
        {
            var resutls = new System.Collections.Generic.List<string>();

            for (int i = 0; i < 3; i++)
            {
                resutls.Add(CreatePanel(i).ToScript(RenderMode.AddTo, "pnlContainers", true));
            }

            return resutls;
        }

        private static Ext.Net.Panel CreatePanel(int i)
        {

            var xx = new Ext.Net.Panel
            {
                Title = "Panel " + i,
                AutoLoad = { 
                    Url = "demo2.aspx",
                    ShowMask = true,
                    MaskMsg = String.Format("Loading {0}", "Vehicle sections"),
                    Mode = LoadMode.IFrame
                },
              
                Height=280
            };
            xx.LoadMask.ShowMask = true;

            return xx;
        }
        
    </script>

    <script type="text/javascript">
        function parsePanels(result){
            for (var i = 0; i < result.length; i++) {
                eval(result[i]);
            }
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Panel ID="pnlContainers" runat="server" Title="ContainerGrand" AutoHeight="true">
        <TopBar>
            <ext:Toolbar ID="Toolbar1" runat="server">
                <Items>
                    <ext:TextField ID="txtCode" runat="server">
                        <Listeners>
                            <Blur Handler="#{DirectMethods}.CreateDynamicPanels({success : parsePanels});" />
                        </Listeners>
                    </ext:TextField>
                </Items>
            </ext:Toolbar>
        </TopBar>
    </ext:Panel>
    </form>
</body>
</html>

/*demo2.aspx*/

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.NET Example</title>

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {

                //loadingScript mimic user action to raise blure event which invoke parsePanels().
                string loadingScript =
                    String.Format("Ext.getCmp('{0}').focus(); Ext.getCmp('{1}').focus();",
                                  this.txtCode.ClientID, this.Button1.ClientID);

                ResourceManager.GetInstance(this).RegisterOnReadyScript(loadingScript);

            }

        }
        [DirectMethod]
        public static System.Collections.Generic.List<string> CreateDynamicPanels()
        {
            var resutls = new System.Collections.Generic.List<string>();

            for (int i = 0; i < 2; i++)
            {
                resutls.Add(CreatePanel(i).ToScript(RenderMode.AddTo, "pnlContainersX", true));
            }

            return resutls;
        }

        private static Ext.Net.Panel CreatePanel(int i)
        {
            return new Ext.Net.Panel
            {
                Title = "Panel " + i,
                AutoLoad =
                {
                    Url = "demo3.aspx",
                    Mode = LoadMode.IFrame
                },
                Height = 80
            };
        }
    </script>

    <script type="text/javascript">
        function parsePanels(result) {
            for (var i = 0; i < result.length; i++) {
                eval(result[i]);
            }
        }
    </script>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    Hi, I am Child and Parent
    <ext:Panel ID="pnlContainersX" runat="server" Title="ContainerParent" AutoHeight="true">
    <Items>
        <ext:Button ID="Button1" runat="server" Text="Create" />
        <ext:TextField ID="txtCode" runat="server">
            <Listeners>
                <Blur Handler="#{DirectMethods}.CreateDynamicPanels({success : parsePanels});" />
            </Listeners>
        </ext:TextField>
        
    </Items>
    </ext:Panel>
    
</body>
</html>

/*demo3.aspx*/

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    Hi, I am Child
</body>
</html>

when we run the demo1.aspx and make blur on the textbox using 'tab' key it will only load the parent panels without childs!!!! but if we made the blur using the 'mouse click' [focus inside the textbox then click by mouse outside] every thing loaded just fine...??!!

please help solve the damn thing ASAP...

thanks

**Vladimir** · Jul 12, 2010, 5:59 PM

Hi,

I think that it is not bug (atleast it is not Ext.Net bug). When you press Tab key the focus goes to the address bar. Under IE the controls cannot get the focus if the focus in the address bar. You can take it as IE bug. For example, the following sample demonstrate that bug (run the example under IE and click to the address bar, you will never get the focus)

<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<!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" />
        <ext:TextField runat="server">
            <Listeners>
                <AfterRender Handler="this.focus(false, 5000);" />
            </Listeners>
        </ext:TextField>
    </form>
</body>
</html>

Why do you call 'focus' for the controls during initial page load? As understood you want to emulate blur event, correct? May be just call direct method instead focus method

string loadingScript =
                    String.Format("Ext.net.DirectMethods.CreateDynamicPanels({{success : parsePanels}});",
                                  this.txtCode.ClientID, this.Button1.ClientID);

**webclouder** · Jul 12, 2010, 6:43 PM

thanks for clarifying that... but the bug occur even if the focus didn't goes to the address bar "add other control to the grand panel" and check it... i used the profile tool in developer tools of IE and ....figured out that the chain of blur calls won't work... so i changed that to a hidden button with click event and on the page load i fire it. know everything work fine even if i moved the focus to the address bar.

The reason why i'm doing this because i have very huge and complex business entity that invoke all kinds of custom bindings..etc. so one use case is loading the whole entity from DB "this is where i need to mimic the event" and other use case when the user choose to add child entity to the current loaded one "after entering code same code gonna be executed" which is good programming practice to not make more than one event they cause the same functionality...but sound like i had to break some rules to make my custom requirements work fine!!! anyway...thanks for the effort,

**geoffrey.mcgill** · Jul 16, 2010, 12:02 AM

Hi webclouder,

Is there still an issue here, or have the problems been solved? If [CLOSED], please post a quick summary of any fix that was required.

Thread: [CLOSED] [1.0] Bug in IE 8 while loading/rendering dynamic panels using eval js function

Thread Tools

Search Thread

Display

[CLOSED] [1.0] Bug in IE 8 while loading/rendering dynamic panels using eval js function

Similar Threads

[CLOSED] template column rendering function of treegrid does not have access to Node

[CLOSED] Async loading and re-loading of panels in a reporting portal - Suggestions?

[CLOSED] TabPanel not rendering the same for different Tabs - Scollbar for panels

[CLOSED] Height Issues when auto loading panels

Issues with dynamic IDs and tab panels

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] [1.0] Bug in IE 8 while loading/rendering dynamic panels using eval js function

[CLOSED] [1.0] Bug in IE 8 while loading/rendering dynamic panels using eval js function

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us