[CLOSED] Panel Load handler doesn't fire in IE11

  1. #1

    [CLOSED] Panel Load handler doesn't fire in IE11

    Hi,

    The web server sends an inline PDF content to the Panel on the page. Please run the test case below in IE11 and observe that the code in the Load handler doesn't execute. Also, it seems like the panel contents remain masked in the background. Google Chrome and Firefox seem to have no such issue.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
            }
        }
    
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
                <Items>
                    <ext:Panel ID="Panel1" runat="server" Icon="Book" Title="Ext.Net">
                        <Loader runat="server" Mode="Frame" Url="~/InputFiles/PDF Document.pdf" MonitorComplete="false">
                            <LoadMask ShowMask="true" Msg="Loading a PDF document...">
                            </LoadMask>
                            <Listeners>
                                <Load Handler="alert('done');" />
                            </Listeners>
                        </Loader>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by Daniil; Sep 14, 2015 at 1:36 PM. Reason: [CLOSED]
  2. #2
    Hello @vadym.f!

    This is not a limitation on Ext.NET but the browser itself. While Chrome (and possibly other browsers) comes with builtin PDF viewer, IE doesn't. If you don't have an extension/plugin that enables it, IE will ask you to download/open the file instead of showing it on browser.

    If you want such functionality to work on IE, and guarantee any browser (supporting JavaScript) will work, you have to use a thrid-party PDF viewing JavaScript library.

    For example, use this URL on your code, and you will be able to see the PDF (on that demo application):
    http://mozilla.github.io/pdf.js/web/viewer.html

    This example uses PDF.js. Note that, if debugging you should get an error message that IE issues while opening remote frames/iframes. It shouldn't happen if you are running the library locally.

    Hope this helps
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thanks for your response, Fabricio. There's a way to configure Adobe Reader to display PDF documents in browser and it's a default setting.
    Click image for larger version. 

Name:	03-09-2015 11-40-07 AM.png 
Views:	130 
Size:	39.6 KB 
ID:	24203

    However, my problem runs deeper. I was hopeful to leverage the Load handler in order to cancel the loading mask on a Panel, which seems to superimpose the Adobe Reader ActiveX in Microsoft Edge. In other words, the loading mask would stay in the background in Internet Explorer but it's no longer the case in MS Edge. I'm not sure how to deal with it because it renders the Adobe Reader document unusable when it's loaded on the panel.
  4. #4
    Hello @vadym.f

    If you don't have an extension/plugin that enables it, IE will ask you to download/open the file instead of showing it on browser.
    You will need to ensure every user uses a supported PDF reader and have its IE integration enabled.

    About the load mask, this has already been discussed thoroughly in the forums. There's an option to enable it (MonitorComplete=true) but seems it can break on other browsers. Here's the discussion:
    IFrame's Loader "Load" listener is not fired when non-html content is loaded

    You'll see the solution back then was (probably) using PDF.js to ensure it will work smooth on every browser.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Do you think this approach will work with the server sending inline PDF content to the client? In other words, instead of specifying the Url in the Loader pointing to a PDF document, the target needs to be a page that streams the content to the client. Here's my simplified setup (there's a client problem loading the panel content though):

    PdfTestMain.aspx
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
            }
        }
    
        protected void Button_Click(object sender, DirectEventArgs e)
        {
            this.Panel1.LoadContent(new ComponentLoader()
            {
                Url = "PdfTestChild.aspx",
                Mode = LoadMode.Frame,
                DisableCaching = true
            });
        }
    
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X" />
            <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
                <Items>
                    <ext:Panel ID="Panel1" runat="server" Icon="Book" Title="Ext.Net">
                        <Loader runat="server" Url="Blank.aspx" Mode="Frame" ShowMask="true">
                            <LoadMask ShowMask="true" />
                        </Loader>
                        <BottomBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:Button runat="server" Text="Pdf Content" Icon="Application" OnDirectClick="Button_Click">
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </BottomBar>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    PdfTestChild.aspx
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                var pdfBytes = System.IO.File.ReadAllBytes(Server.MapPath("~/InputFiles/PDF Document.pdf"));
    
                if (HttpContext.Current.Response.IsClientConnected)
                {
                    HttpContext.Current.Response.Buffer = true;
                    HttpContext.Current.Response.Clear();
                    HttpContext.Current.Response.ClearContent();
                    HttpContext.Current.Response.ClearHeaders();
                    HttpContext.Current.Response.ContentType = "application/pdf";
                    HttpContext.Current.Response.AddHeader("Content-Disposition", String.Format("inline;FileName=\"{0}\"", "PDF Document"));
                    HttpContext.Current.Response.BinaryWrite(pdfBytes);
                    HttpContext.Current.Response.Flush();
                }
            }
        }
    </script>
    Blank.aspx
    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
    </body>
    </html>
    Last edited by vadym.f; Sep 11, 2015 at 6:37 PM. Reason: Updated the test case to weed out errors
  6. #6
    There is Content-Type: application/pdf in the Response headers. I think there is a chance that the approach might work in your scenario. But, probably, the only way to ensure is to give it a try.
  7. #7
    The PDFJS.getDocument() method in the example expects the actual Url of a PDF document to download it. In my situation, the server writes the PDF binary array to the HTTP output stream to send it inline so no hard Url is available on the client. I've inspected the rest of the public APIs of the PDFJS library for alternatives but haven't seen any. Besides, Promises by ECMAScript 2015, which PDFJS heavily relies on, are currently supported by any browser not named Internet Explorer (surprise!)
    https://developer.mozilla.org/en-US/..._compatibility

    Thanks for your suggestions, guys. I will have to come face this issue later but you are free to close this thread.

Similar Threads

  1. [CLOSED] IE 9 - North panel doesn't load, until I resize window
    By rthiney in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Jun 05, 2013, 4:18 PM
  2. Replies: 9
    Last Post: Jun 27, 2012, 2:17 PM
  3. Replies: 5
    Last Post: Jun 25, 2012, 6:19 PM
  4. Replies: 1
    Last Post: Jan 15, 2012, 6:58 AM
  5. Replies: 8
    Last Post: Dec 28, 2011, 4:07 AM

Tags for this Thread

Posting Permissions