[CLOSED] [#511] Resource manager addscript in IE

[iansriley]

Hi Danil,
I calling a DirectMethod when i click on a button and inside of the DirectMethod the code has been written that is for showing up the google visualizer chart

ResourceManager1.AddScript("var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['% to Test', " + percentage + "] ]); drawVisualization('" + percentage + "', data);")

Chart being loaded fine while page load and it is resulting an error when we call the Addscript in direct method as per the selected parameters from the drop down The error from IE debugger from (webresource.axd) as


_{this.callParent(arguments);},hasId:function(){retu rn!!(this.initialConfig&&this.initialConfig.id);}, isNonContentable:function(){return this.isXType("tablepanel")||this.isXType("dataview ")||this.isXType("field")||this.isXType("draw")||t his.isXType("chart")||this.isXType("button");},des troyContentWidgets:function(checkFlag){if((this.de stroyContent||!checkFlag)&&!this.isNonContentable( )){var contentEl=this.getContentTarget();if(contentEl&&co ntentEl.dom){this.destroyFromDom(contentEl.dom);}} },beforeDestroy:function(){this.destroyContentWidg ets(true);},destroyFromDom:function(dom){if(!dom){ return;}
var children=dom.children,child,cmp,id,len,i;for(i=0,l en=children.length;i<len;i++){child=children[i];if(child){id=child.id;if(!Ext.isEmpty(id))
Unable to get property 'length' of undefined or null reference
{cmp=Ext.getCmp(id);if(cmp){cmp.destroyContent=tru e;if(!cmp.isDescendantOf(this)){cmp.destroy();}}

,However working fine in rest of the browser...

My sample code as below :

<script>
 var LoadChart = function () {
           var year=2014;
var month=4;
var week = 3;
             App.direct.ShowChart(year, month, week)
           
google.load('visualization', '1', { packages: ['gauge'] });

        function drawVisualization(percent, data1233) {
            var options111 = {
                width: 180, height: 180,
                redFrom: 0, redTo: 49,
                yellowFrom: 50, yellowTo: 89,
                greenFrom: 90, greenTo: 100,
                animation: {
                    duration: 1000,
                    easing: 'out'
                }
            };

            // Create and draw the visualization.
            new google.visualization.Gauge(document.getElementById('visualization')).
            draw(data1233, options111);

        }
</script>
 <ext:Panel Region="Center" runat="server" ID="pnlChart" Border="false" StyleSpec="text-align:center; ">
                <Content>
                    
                    <div id="divInfo" runat="server" style="font-family: sans-serif; font-size: 11px;
                        padding: 10px 0 0 0">
                    </div>
                    <div id="parentDiv" align="center" style="width: auto; border: 0px solid gray;">
                        <div runat="server" id="visualization" align="center" style="width: 170px; vertical-align: middle;
                            height: 180px; border: 0px solid gray;">
                        </div>
                    </div>
                </Content>
            </ext:Panel>

 <ext:Button runat="server" ID="btnViewChart" Text="View Chart">
                <Listeners>
                    <Click Fn="LoadChart" />
                </Listeners>
            </ext:Button>

Thanks in Advance.

[Daniil]

Hi @iansriley,

Hard to say what is going wrong. Could you, please, provide a full test case?

[iansriley]

The Test case as follows :

 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
        google.load('visualization', '1', { packages: ['gauge'] });


        function drawVisualization(percent, data1233) {
            var options111 = {
                width: 180, height: 180,
                redFrom: 0, redTo: 49,
                yellowFrom: 50, yellowTo: 89,
                greenFrom: 90, greenTo: 100,
                animation: {
                    duration: 1000,
                    easing: 'out'
                }
            };


            // Create and draw the visualization.
            new google.visualization.Gauge(document.getElementById('visualization')).
            draw(data1233, options111);


        }
       var LoadChart = function () {
            
 var month=App.cboMonth.getValue();
             App.direct.ShowChart(month);



        }
    </script>
 <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>

<ext:Panel Region="Center" runat="server" ID="pnlChart" Border="false" StyleSpec="text-align:center; ">
                <Content>
                   
                    <div id="divInfo" runat="server" style="font-family: sans-serif; font-size: 11px;
                        padding: 10px 0 0 0">
                    </div>
                    <div id="parentDiv" align="center" style="width: auto; border: 0px solid gray;">
                        <div runat="server" id="visualization" align="center" style="width: 170px; vertical-align: middle;
                            height: 180px; border: 0px solid gray;">
                        </div>
                    </div>
                </Content>
            </ext:Panel>
<ext:ComboBox ID="cboMonth" runat="server" AnchorHorizontal="100%">
              <Items>
                    <ext:ListItem Text="Jan" Value="1" />
                    <ext:ListItem Text="Feb" Value="2" />
                    <ext:ListItem Text="Mar" Value="3" />
                    <ext:ListItem Text="April" Value="4" />
                    <ext:ListItem Text="May" Value="5" />
                    <ext:ListItem Text="Junl" Value="6" />
                </Items>
            </ext:ComboBox>
   
 <ext:Button runat="server" ID="btnViewChart" Text="View Chart">
                <Listeners>
                    <Click Fn="LoadChart" />
                </Listeners>
            </ext:Button>
</form>

Server side code :

<DirectMethod()> _
    Public Function ShowChart(ByVal month As Integer)
 Dim percentage As String = 0
 If (month=1) Then
            percentage   = "20.00"
     
 ElseIf (month=2) Then
            percentage   = "40.00"
       
  ElseIf (month=3) Then
            percentage   = "60.00"
     
 Else
     percentage   = "80.00"

         ResourceManager1.AddScript("var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['% to customer ', " + percentage + "] ]); drawVisualization('" + percentage + "', data);")
 pnlChart.UpdateContent()
End Function

The above will be the test code and this is used to work in Ext.net 1.x version the problem is coming out after migrated the code from v1.x to v2.5,
Click on "View chart" button it resulted an error that i found in IE debugger ( please see in the below attached image)
Unable to get property 'length' of undefined or null reference
To test this please follow the steps in IE10 :
#1. change the month value from combobox to Jan then click on "View Chart" then chart will populate according to the value this is fine
#2. Then change the Month value to feb then again click "View Chart" (observation: nothing will be changing in IE only)
However it is working fine in another browsers apart from IE. Please help me out with a solution.
Thanks in advance.

[Daniil]

I was able to run your code with some modifications, though I cannot reproduce any error. The chart appears for me without any error.

Please clarify/do the following:

1. Specify the Ext.NET version you are using.

2. Specify the version of the browser you are testing in. Is the issue reproducible in all browsers?

3. Put all the code together to get a standalone test case which we can copy, paste and run without any changes on our side.

[iansriley]

Hi Danil,

Thanks for the reply ...

as per your reference :
1.Ext net version : Ext.net2.5.
2.Browser version : IE 10 and IE 11 only ( the problem is reproducible only in IE )
3. First time chart will loading properly and you will notice the problem( that is chart will not loading as per the dropdown selection) as when we change another value (Jan to Feb , Feb to march )
( Chart appearing first time but not moving the indicator for other selections).

Please see the attachments step1,step2,step3
Thanks and Regards.

[Daniil]

Thank you for the details. Could you, please, do the following as well?

3. Put all the code together to get a standalone test case which we can copy, paste and run without any changes on our side.

[iansriley]

Thanks Danil,

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

<script runat="server">
        [DirectMethod]
        public void ShowChart(int month)
        {
            string percentage = "0.00";
            if (month == 1)
                percentage = "20.00";
            else if (month == 2)
                percentage = "40.00";
            else if (month == 3)
                percentage = "60.00";
            else
                percentage = "80.00";
            divInfo.InnerHtml = String.Format("Goal: {0} - Actual: {1}", percentage, 0.0);
            ResourceManager1.RegisterClientScriptBlock("chartCaller",  "var data = google.visualization.arrayToDataTable([ ['Label', 'Value'],  ['% to Customer', " + percentage + "] ]); drawVisualization('" +  percentage + "', data);");
             
      pnlChart.UpdateContent();

        }

</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load('visualization', '1', { packages: ['gauge'] });

        function drawVisualization(percent, data1233) {
            var options111 = {
                width: 180, height: 180,
                redFrom: 0, redTo: 49,
                yellowFrom: 50, yellowTo: 89,
                greenFrom: 90, greenTo: 100,
                animation: {
                    duration: 1000,
                    easing: 'out'
                }
            };

            // Create and draw the visualization.
            new google.visualization.Gauge(document.getElementById('visualization')).
            draw(data1233, options111);
        }
        var LoadChart = function () {

            var month = App.cboMonth.getValue();
            App.direct.ShowChart(month);
        }
    </script>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
   
        <ext:Panel Region="Center" runat="server" ID="pnlChart" Border="false" StyleSpec="text-align:center; ">
            <Content>
                <div id="divInfo" runat="server" style="font-family: sans-serif; font-size: 11px;
                    padding: 10px 0 0 0">
                </div>
                <div id="parentDiv" align="center" style="width: auto; border: 0px solid gray;">
                    <div runat="server" id="visualization" align="center" style="width: 170px; vertical-align: middle;
                        height: 180px; border: 0px solid gray;">
                    </div>
                </div>
            </Content>
        </ext:Panel>
        
                <ext:ComboBox ID="cboMonth" runat="server" >
                    <Items>
                        <ext:ListItem Text="Jan" Value="1" />
                        <ext:ListItem Text="Feb" Value="2" />
                        <ext:ListItem Text="Mar" Value="3" />
                        <ext:ListItem Text="April" Value="4" />
                        <ext:ListItem Text="May" Value="5" />
                        <ext:ListItem Text="Junl" Value="6" />
                    </Items>
                </ext:ComboBox>
               
            </Items>
           
             <ext:Button runat="server" ID="btnViewChart" Text="View Chart">
                    <Listeners>
                        <Click Fn="LoadChart" />
                    </Listeners>
                </ext:Button>
    </form>
</body>
</html>

Copy these into your Standlone files
and run it only IE ( since it is a problem in IE10 and iE11 and it is working fine in rest of the browsers).

First time page will gets rendered without chart and will appear as it selected month from drop down and click "View Chart" button .
once it is appeared change other month in the drop down and click "View Chart" then notice the issue in IE...( So far we using IE10 and IE11).
Thanks in Advance.

[geoffrey.mcgill]

I combined your two files into one, which helps simplify the sample by removing unnecessary code.

I also changed the doctype to html5 which should be used on all projects.

[Daniil]

Please put this script into the page's <head>. It should help.

<script>
    Ext.override(Ext.AbstractComponent, {
        destroyFromDom : function (dom) {
            if (!dom || !dom.children) {
                return;
            }

            this.callParent();
        }
    });
</script>

[Daniil]

It has been fixed in the revision #5875. The fix will go to the v2.5.3 release.