[FIXED] [#1493] [4.3.0] double loads

Z · May 26, 2017, 7:34 PM

I cant prove with a standalone case yet but this consistently double loads the URL. i know since i get see it in fiddler. this didnt happen in v3.
/Z

var loadActiveTabWithNewUrl = function (url, title) {
    var tp = getTabPanelMain();
    var activeTab = tp.getActiveTab();
    if (title != null && title.length > 0) {
        activeTab.setTitle(title);
    }
    activeTab.load({ url: url });
};

Z · May 26, 2017, 7:54 PM

I currently use this code to reload a tab URL. How can i do this properly in v4?
/Z

**fabricio.murta** · May 27, 2017, 3:08 AM

Hello @Z!

I believe most dynamic tab loading scenarios are covered by this example, please check it up: Ajax loading tabs.

This and the other examples around may just help you coming up with a test case reproducing the double-load so we can try and help you with the matter -- if the examples themselves don't help you after all.

Hope this helps!

Z · Jun 04, 2017, 4:40 AM

So i have verified this is in fact a bug. however, i cant yet prove it in a testcase. i am working on it.

I can see that this is the cause of it the problem and it is a critical problem since the double load causes our codebehind to fire twice and generates a deadlock in the DB (due to the double call).

I can see it fire once in fiddler for this

 window.frames[target.iframe.dom.name].location.replace(url);

and once for this:

target.iframe.dom.src = url; // #936

if you review URL: https://stackoverflow.com/questions/...ace-and-iframe, you will see that .replace does load the page without history. but setting the src does also!!!

why do you have both??
/Z

        } else {
            target.iframe.dom.src = Ext.String.format("java{0}", "script:false");


            try { // IE9 refresh iframe with pdf issue: http://forums.ext.net/showthread.php?24690
                window.frames[target.iframe.dom.name].location.replace(url);
            } catch (e) { }


            target.iframe.dom.src = url; // #936


            this.beforeIFrameLoad(options);

Z · Jun 04, 2017, 4:46 AM

..................

Z · Jun 04, 2017, 5:03 AM

This is the best i can do for a test case. I added a debugger in the javascript. from there, step into the debugger. when you get to loadFrame, do through it line by line. When you get the part that i posted (above), you will see 1 load for the replace and 1 load for the .src assignment (in fiddler).

If you dont debug, the double load cant be reproduced. it just so happens, in our code base, it happens alot on v4, never on v3 though.

i think this is our last issue before upgrading.

to run the case, load the page. then click the "TESTSET" button to create a new tab. Then choose anything from the dropdown to reload that tab.

thanks,
/Z

<%@ Page Language="C#" %>
<%@ Register src="~/Views/Support/controls.ascx" tagname="controls" tagprefix="uc3" %>


<!DOCTYPE html>


<html>
<head id="Head1" runat="server">
    <title>Fixed Height TabPanel with options - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />


    <script type="text/javascript">


        var testme = function () {
            addNewTab(App.TabPanel1, { title: 'Test Tab', url: '/ta/Support/ajax' });
        }


        var loadActiveTabWithNewUrl = function (url, title) {
            var tp = App.TabPanel1;
            var activeTab = tp.getActiveTab();
            if (title != null && title.length > 0) {
                activeTab.setTitle(title);
            }
            debugger;
            activeTab.load({ url: url });
        };


        var hashCode = function (str) {
            var hash = new Date().getTime();


            for (var i = 0; i < str.length; i++) {
                hash ^= ((hash << 5) + str.charCodeAt(i) + (hash >> 2));
            }


            return 'Z' + (hash & 0x7FFFFFFF);
        };


        var addNewTab = function (tp, config) {
            if (Ext.isEmpty(config.url, false)) {
                return;
            }
            var id = this.hashCode(config.url);
            var tab = tp.getComponent(id);
            if (!tab) {
                tab = tp.addTab({
                    id: id.toString(),
                    itemId: id.toString(),
                    title: config.title,
                    iconCls: config.icon || 'icon-applicationdouble',
                    closable: true,
                    loader: {
                        showMask: true,
                        renderer: 'frame',
                        params: { 'sourceContext': config.sourceContext || 'none', 'ruleId': config.ruleId || '0', 'itemId': config.itemId || '0', 'ids': config.ids || '' },
                        noCache: true,
                        url: config.url,
                        loadMask : {
                            showMask : true,
                            msg      : "Loading '" + config.title + "'..."
                        },
                        scripts: true,
                        passParentSize: config.passParentSize
                    }
                });
            } else {
                tp.setActiveTab(tab);
                Ext.get(tab.el).frame();
            }


            return tab;
        }
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />


        <div>
            <h1>Fixed Height TabPanel with options</h1>
            <p>Tabs with no tab strip and a fixed height that scroll the content.</p>
        </div>


        <div>
            <ext:Button ID="fff" runat="server" Text="TESTSET">
                <Listeners>
                    <Click Fn="testme" />
                </Listeners>
            </ext:Button>
            <ext:ComboBox ID="Tesets" runat="server" EmptyText="Select a view" Editable="false" ForceSelection="true" >
                <SelectedItems>
                    <ext:ListItem Index="1" />
                </SelectedItems>
                <Items>
                    <ext:ListItem Text="1 day view" Value="1" />
                    <ext:ListItem Text="7 day view" Value="7" />
                    <ext:ListItem Text="14 day view" Value="14" />
                    <ext:ListItem Text="28 day view" Value="28" />
                    <ext:ListItem Text="42 day view" Value="42" />
                </Items>
                <Listeners>
                    <Select Handler="App.WindowChooseCC7.show();/*  loadActiveTabWithNewUrl('/ta/Support/ajax?periodDays=' + App.Tesets.getValue());*/" />
                </Listeners>
            </ext:ComboBox>


            <ext:TabPanel
                ID="TabPanel1"
                runat="server"
                ActiveTabIndex="0"
                Width="600"
                Height="250"
                Plain="true">
                <Items>
                    <ext:Panel
                        ID="Tab1"
                        runat="server"
                        Title="Normal Tab"
                        Html="My content was added with the Html Property."
                        BodyPadding="6"
                        AutoScroll="true"
                        />
                    <ext:Panel
                        ID="Tab2"
                        runat="server"
                        Title="Closable Tab"
                        Html="You can close this Tab."
                        BodyPadding="6"
                        Closable="true"
                        />
                    <ext:Panel
                        ID="Tab3"
                        runat="server"
                        Title="Ajax Tab"
                        BodyPadding="6"
                        AutoScroll="true">
                        <Loader ID="Loader1" runat="server" Url="ajax.aspx">
                            <LoadMask ShowMask="true" />
                        </Loader>
                    </ext:Panel>
                    <ext:Panel
                        ID="Tab4"
                        runat="server"
                        Title="Event Tab"
                        Html="I am tab 3's content. I also have an event listener attached."
                        BodyPadding="6"
                        AutoScroll="true">
                        <Listeners>
                            <Activate Handler="Ext.Msg.alert('Event', this.title + ' was activated.');" Delay="1" />
                        </Listeners>
                    </ext:Panel>
                    <ext:Panel
                        ID="Tab5"
                        runat="server"
                        Title="Disabled Tab"
                        Disabled="true"
                        Html="Can't see me cause I'm disabled"
                        AutoScroll="true"
                        />
                </Items>
            </ext:TabPanel>
        </div>


        <uc3:controls ID="eee" runat="server" />


    </form>
</body>
</html>

ajax.aspx

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


<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2000);
    }
</script>


<style>
    div.sourcecode {
        margin  : 12px 0;
        font    : normal 12px monospace;
        padding : 1em 1.5em;
        border  : 1px solid #2f6fab;
        color   : #3f747f;
        border-left      : 4px solid #2f6fab;
        background-color : #f9f9f9;
        overflow-y : hidden;
        overflow-x : auto;
    }
</style>


<div>
    <p>I am content loaded via Ajax. I was purposely delayed 2 seconds so you could see the Ajax loading indicator.</p>


    <div class="sourcecode">
        <div style="font-family: Courier New; font-size: 10pt; color: black;">
        <pre style="margin: 0px;"><span style="color: blue;">&lt;</span><span style="color: #a31515;">script</span> <span style="color: red;">runat</span><span style="color: blue;">="server"&gt;</span></pre>
        <pre style="margin: 0px;">&nbsp;&nbsp;&nbsp; <span style="color: blue;">protected</span> <span style="color: blue;">void</span> Page_Load(<span style="color: blue;">object</span> sender, <span style="color: #2b91af;">EventArgs</span> e)</pre>
        <pre style="margin: 0px;">&nbsp;&nbsp;&nbsp; {</pre>
        <pre style="margin: 0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; System.Threading.<span style="color: #2b91af;">Thread</span>.Sleep(2000);</pre>
        <pre style="margin: 0px;">&nbsp;&nbsp;&nbsp; }</pre>
        <pre style="margin: 0px;"><span style="color: blue;">&lt;/</span><span style="color: #a31515;">script</span><span style="color: blue;">&gt;</span></pre>
        </div>
    </div>


    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.</p>
</div>

controls.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="controls.ascx.cs" Inherits="Crystal.Views.Support.controls" %>




<ext:Window 
    ID="WindowChooseCC7" 
    runat="server" 
    Icon="ApplicationFormAdd" 
    Width="400" 
    AutoHeight="true"
    Hidden="true" 
    Modal="true"
    Title="Select..."
    Constrain="true">
    <Items>
        <ext:FormPanel
            ID="FormPanelChooseCC7" 
            runat="server" 
            Layout="FormLayout"
            BodyPadding="5"
            >
            <Items>
                <ext:ComboBox ID="ComboBoxCC7Chooser" 
                    runat="server" 
                    Padding="5" 
                    DisplayField="description" 
                    TypeAhead="false"
                    ValueField="id" 
                    EmptyText="Select an item" 
                    Width="200"
                    FieldLabel="Num 7" >
                    <Items>
                        <ext:ListItem Text="rr" Value="rrr" />
                    </Items>


                </ext:ComboBox>
            </Items>
            <BottomBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="ButtonSaveCCChooser" runat="server" Icon="Disk" Text="Load...">
                            <Listeners>
                                <Click Handler="loadActiveTabWithNewUrl('/ta/Support/ajax', 'test page'); " />
                            </Listeners>                                        
                        </ext:Button>
                        <ext:Button ID="ButtonCloseCCChooser" runat="server" Text="Close">
                            <Listeners>
                                <Click Handler="#{WindowChooseCC7}.hide();" />
                            </Listeners>
                        </ext:Button>
                </Items>
                </ext:Toolbar>
            </BottomBar>
        </ext:FormPanel>
    </Items> 
</ext:Window>

**fabricio.murta** · Jun 04, 2017, 7:17 AM

Hello @Z!

Thanks for reporting the issue, we do want to get to the bottom of it, but I'm not sure your test case works the way you wanted us to see it reproducing the issue.

I can load the test case and click 'TESTSET'. It loads the ajax page inside the last tab in the tab panel with the 2 seconds delay.

But then I choose a value from the dropdown right below the button and I get a 'cannot read property of undefined' error from line 97 in your first code block. This may indicate that you have some setting on your project (Web.config maybe?) that's overriding defaults, such as the example runs on your side without problems whereas it breaks in our side.

Could you test your sample on a clean project on your side? The solution to the error may be simple but it could just avert us from the point which is reproducing the issue the way you do it in your side.

Well, even trying to figure out the error, I couldn't get the twice up load event that (I presume) should have hit the 'debugger;' line (your code line 28) twice when I clicked 'load...' from the select window (once I could make it show up).

I am not sure, I see several things on your test case that makes it maybe more complex than it should. Here's some points of question:
- There are several references to /ta/Support/ajax. Are them all required to reproduce the issue? Are they supposed to point to the 'ajax.aspx' file you named in your code?
- Is the .aspx extension missing from the ajax link by purpose, maybe you are using the FriendlyURLs feature in your project?
- I see a commented block right in the line that triggers the error (97 in your first code block), is that there for a reason?
- Are all the 5 tabs in the TabPanel1 required to reproduce the issue? The third has a reference to the /ta/Support/ajax url as well but I don't see your instructions on reproducing the issue mentioning it at any point
- Is the custom user control (controls.ascx) required to reproduce the issue? I mean, if you copy-paste the user control inside the main page, you then no longer is able to reproduce the issue?

All this looks pretty distracting while trying to both reproduce the issue and being able to focus on the real problem. If those things are not required to reproduce the issue, it would be much easier to pinpoint the reason and avoid this thread from taking several pages until the issue can be tackled with.

That said, can you review the points above (check if you can reproduce the issue with the user control copypasted inside the main page, for example) and let us know, maybe then providing a test case reduced to the bare minimum amount of code required to reproduce the issue so we can focus on the actual issue?

Please also give a try of your test case in a clean project. Just create a new solution, with a WebForms project. Don't use a WebForms template (use the Empty template), just check the 'WebForms' references binding while creating the new project and then installing the Ext.NET NuGet package on it.

Attachment 24923

Besides, I've run your test case using google chrome. Ran the test case without VisualStudio debugging and enabled chrome's developer tools/debugger before loading the page (so that it breaks in the 'debugger;' line).

Looking forward to your feedback! :)

Z · Jun 04, 2017, 1:05 PM

Let me simplify. i forgot to say it is an MVC example so i left our the controller....
/Z

Z · Jun 05, 2017, 12:30 AM

Here is a full and complete example in a website project using webforms. Also, i will email it to you since the forum will not allow me to upload it.

To test:
1. load page
2. click the "TESTSET" button.
3. then choose an item from the dropdown
4. step into the debugger and if you step through with fiddler, you will see a double call.

i can reproduce it at will.

Thanks,
/Z

**fabricio.murta** · Jun 05, 2017, 10:19 AM

Hello @Z!

Sorry, we require the provided test case to be the shortest the possible and shared under [code] blocks here in the forums.

If you simplified the test case I believe it wouldn't be a problem to share here, right?

Thread: [FIXED] [#1493] [4.3.0] double loads

Thread Tools

Search Thread

Display

[FIXED] [#1493] [4.3.0] double loads

Similar Threads

[CLOSED] on demand loads

[CLOSED] Combobox loads twice

[CLOSED] Store loads twice

[CLOSED] GridPanel - Double Click A Row - Get The Row Index Of The Double Clicked Row?

Window don't loads correctly in the IE7

Posting Permissions

Sitemap

Downloads

Resources

Thread: [FIXED] [#1493] [4.3.0] double loads

[FIXED] [#1493] [4.3.0] double loads

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us