[CLOSED] Strange Issue with modal window in IE

  1. #1

    [CLOSED] Strange Issue with modal window in IE

    Hi,

    I'm experiencing a really weird problem. When testing my website on my local pc (VS2010 with cassini webserver) everything works according plan. On all browsers without a problem, but when testing it on an IIS webserver my modal window is not accessible anymore on IE. Everything is grayed out.

    I've cleaned my project an made a similar test situation for you. Start with windowtest.aspx, click on button left --> click on button in tab to open the modal window.

    windowtest.aspx
    <%@ Page Language="C#" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Carwise Support</title>
        <link href="Style/StyleSheet.css" rel="stylesheet" type="text/css"/>
        <style type="text/css">
            .x-column-padding
            {
                padding: 10px 0px 10px 10px;
            }
            
            .x-column-padding1
            {
                padding: 10px;
            }
        </style>
        <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
                 var addTab = function( tabPanel, id, url, title ) {
                    var tab = tabPanel.getComponent( id );
                    if ( !tab ) {
                        tab = tabPanel.add( {
                            id: id,
                            title: title,
                            closable: true,
                            loader: {
                                url: url,
                                renderer: "frame",
                                loadMask: {
                                    showMask: true,
                                    msg: "Laden " + title + "..."
                                }
                            }
                        } );
                    }
                    else {
                        tab.close();
                        addTab( tabPanel, id, url, title );
                    }
                    tabPanel.setActiveTab( tab );
                };
    
    
                var load = function (id) {
                #{winIssue}.show();
                #{winIssue}.load({url: 'testwindow.aspx?ID=' + id.toString()});
                };
            </script>
        </ext:XScript>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Region="West" Title="Menu" Width="200" Collapsible="true"
                    Split="true" MinWidth="175" MaxWidth="400" MarginsSummary="5 0 5 5" CMarginsSummary="5 5 5 5"
                    Layout="AccordionLayout">
                    <Items>
                        <ext:Panel ID="pnlIssues" runat="server" Border="false" Collapsed="true" AutoScroll="true"
                            Title="Issues">
                            <Items>
                                <ext:Container ID="Container4" runat="server" DefaultScale="medium" DefaultType="button"
                                    Layout="vbox">
                                    <LayoutConfig>
                                        <ext:VBoxLayoutConfig Align="Stretch" Padding="0 0 0 0" DefaultMargins="0 0 0 0" />
                                    </LayoutConfig>
                                    <Items>
                                        <ext:Button ID="btnIssuesOpAfdeling" TextAlign="left" runat="server" Icon="Group" Text="Op afdeling" Flat="true">
                                            <Listeners>
                                                <Click Handler="addTab(#{tpMain}, 'tpIssuesGroup', 'testPage.aspx', 'Issues op afdeling');" />
                                             </Listeners>
                                        </ext:Button>
                                    </Items>
                                </ext:Container>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>
                <ext:TabPanel runat="server" Region="Center" ActiveTabIndex="0" Title="Inhoud" MarginsSummary="5 5 5 0" ID="tpMain">
                    <Items>
                        <ext:Panel ID="Panel3" runat="server" Title="Informatie" Layout="Fit" >
                            <items>
                                <ext:label runat="server" ID="lblInfo" Text="Algemene informatie"/>
                            </items>
                         </ext:Panel>
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
        <ext:Window 
                ID="winIssue" 
                runat="server" 
                Icon="ApplicationEdit"  ConstrainHeader="true"
                Title="Aanpassen issue" 
                Hidden="true" Modal="true" Width="580" Height="660"
                >
             <Loader ID="Loader2" Mode="Frame" DisableCaching="true" runat="server"/>
             </ext:Window>
        </form>
    </body>
    </html>
    testpage.aspx
    <%@ Page Language="C#" %>
    
    
    <!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>
        <script type="text/javascript">
            var loadEditWindow = function (id) {
                parent.load(id);
            };
       </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <div>
            <ext:Button Text="Test Window" runat="server" ID="btnTest">
                <Listeners>
                    <Click handler="loadEditWindow(1)"/>
                </Listeners>
            </ext:Button>
        </div>
        </form>
    </body>
    </html>
    testwindow.aspx
    <%@ Page Language="C#" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="rmIssues" runat="server" />
        <div>
            Good Morning People from Ext.NET ! I can't click on this button in IE (production IIS), but I can when running from Visual studio Cassini webserver. Nice isn't ?
            <br/>
            <ext:Button ID="btnFail" runat="server" Text="unreachable button"/>
        </div>
        </form>
    </body>
    </html>


    Martin
    Last edited by Daniil; Nov 16, 2012 at 10:48 AM. Reason: [CLOSED]
  2. #2
    Hi Martin,

    It should not depend on a kind of server.

    I was able to reproduce it in IE9 in Compatibility mode and IE7 mode. Please ensure there are no these modes.
  3. #3
    Weird

    Send you 2 screenshots.

    1 is on our (intranet) IIS server (and looking at the browser without compatibiliy mode). Unreachable button.
    2 is on my own machine (VS 2010). (and strangely with compatibility mode automatic on). Reachable button.

    Remember its the same browser..and same code. Only different tabs

    Martin
    Attached Thumbnails Click image for larger version. 

Name:	ExtNET1.png 
Views:	172 
Size:	98.4 KB 
ID:	5105   Click image for larger version. 

Name:	ExtNET2.jpg 
Views:	141 
Size:	65.8 KB 
ID:	5106  
  4. #4
    By the way, to get it working in IE7, please move the Window outside the <form> putting directly to the <body>.
  5. #5
  6. #6
    Thank you both guys.. mark as solved. Putting the windows outside the form did the trick.

    And Daniil, you were right ..I've removed compatibility mode and it worked ok (still wondering why the little icon wasn't appearing in screenshot 1)

    Will look into the other thread and comments. Thanks..

    Martin
    Last edited by CarWise; Nov 16, 2012 at 10:00 AM. Reason: Fixed
  7. #7
    Quote Originally Posted by CarWise View Post
    And Daniil, you were right ..I've removed compatibility mode and it worked ok (still wondering why the little icon wasn't appearing in screenshot 1)
    This icon is not showed on my side as well... Not sure why. Maybe just a bug?

    Anyway, I always manage these modes in Developer Tools.

Similar Threads

  1. Replies: 5
    Last Post: Apr 20, 2012, 6:20 AM
  2. [CLOSED] Issue with drag and drop for portal in modal window
    By Labyrinth in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 09, 2011, 9:13 AM
  3. [CLOSED] Modal Window Issue
    By SamFoot in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 27, 2011, 9:37 AM
  4. [CLOSED] Strange issue window from desktopwindow
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Oct 01, 2010, 2:11 PM
  5. Replies: 8
    Last Post: Jun 23, 2010, 10:16 AM

Posting Permissions