jquery load event not triggering on iframe when loading pdf - Even when it does trigger fine in seperate project

Question

I am having a very weird problem that I cannot figure out. I am trying to add a loading dialog box to a page that generates a pdf. I coded the web page in a separate project, and the dialog box worked perfectly. But when I included the extremely basic jquery-ui code into my existing website project, it doesn't work. Specifically, the popup doesn't go away when the PDF loads into the iframe. Basically the .load(function()) event isn't triggering.

But the event triggers just fine in my separate project. I generate the exact same pdf using the exact same data and code, and it works fine. But when put into my main project, the load event doesn't trigger.

Here is my code. The company I work for still uses webforms so ...

Code that isn't triggering

$(function () {
    $("[id$=ifPDF]").load(function () {
        hideDialog();
    });
});

If you guys could help me find the conflict, it would be greatly appreciated

nice.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/main.master" AutoEventWireup="true" CodeFile="nice.aspx.cs" Inherits="letters_missed_appointment_nice" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link rel="stylesheet" type="text/css" href="\resources\css\letters.css" />
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <style type="text/css">
        #dialog {
            display: none;
        }
    </style>
    <script type="text/javascript">
        function showDialog() {
            $("#dialog").dialog();
        }
        function hideDialog() {
            $("#dialog").dialog("close");
        }
        $(function () {
            $("[id$=ifPDF]").load(function () {
                hideDialog();
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="pageHeader" Runat="Server">
    Cabinet
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="pageContent" Runat="Server">
    <h1>Nice Letter</h1>
    <h3>Enter in the information below and click "Create Letter".</h3>
    <asp:UpdatePanel ID="upMain" runat="server">
        <ContentTemplate>
            <table>
                <tr>
                    <td>Letter Date:&nbsp;&nbsp;&nbsp;</td>
                    <td><asp:TextBox ID="txtLetterDate" runat="server"></asp:TextBox>&nbsp;&nbsp;&nbsp;</td>
                    <td>Recipient Name:&nbsp;&nbsp;&nbsp;</td>
                    <td><asp:TextBox ID="txtRecipientName" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                    <td>Appointment Date:&nbsp;&nbsp;&nbsp;</td>
                    <td><asp:TextBox ID="txtAppointmentDate" runat="server"></asp:TextBox>&nbsp;&nbsp;&nbsp;</td>
                    <td>Patient Name:&nbsp;&nbsp;&nbsp;</td>
                    <td><asp:TextBox ID="txtPatientName" runat="server"></asp:TextBox></td>
                </tr>
                <tr><td>&nbsp;&nbsp;&nbsp;</td></tr>
                <tr>
                    <td><asp:Button ID="cmdCreateLetter" Text="Create Letter" OnClientClick="showDialog();" runat="server" /></td>
                </tr>
            </table>
            <br />
            <iframe id="ifPDF" visible="false" runat="server" />
            <div id="dialog" title="Loading PDF">Loading PDF, Please Wait ...</div>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

nice.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class letters_missed_appointment_nice : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        ifPDF.Attributes["class"] = "pdf_view";
        cmdCreateLetter.Click += new EventHandler(Load_PDF);
    }

    protected void Load_PDF(object sender, EventArgs e)
    {
        ifPDF.Visible = true;

        PDFGenerator my_doc = new PDFGenerator();
        my_doc.Template = Server.MapPath("nice_letter.html");

        my_doc.Add("letter_date", txtLetterDate.Text);
        my_doc.Add("recipient_name", txtRecipientName.Text);
        my_doc.Add("patient_name", txtPatientName.Text);
        my_doc.Add("appointment_date", txtAppointmentDate.Text);

        byte[] doc_array = my_doc.CreateDocument(base_url: Server.MapPath("/letters/missed_appointment/"));

        string b64_doc = Convert.ToBase64String(doc_array, 0, doc_array.Length);
        string pdf_src = $"data:application/pdf;base64,{b64_doc}";
        ifPDF.Attributes["Src"] = pdf_src;
    }
}

letters.css

body > form > main {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5px;
    min-height: 800px;
}

body > form > footer {
    position: static;
    padding-bottom: 50px;
}

.pdf_view {
    width: 100%;
    height: 700px;
    border: none;
}

main.css

body {
    margin: 0px;
    background-color: #e7e7de;
    font-family: 'Roboto', sans-serif;
}

    body > form > #pageGreeting {
        width: calc(100%-20px);
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        background-color: #0f3057;
        box-shadow: 0px 4px 15px -1px #000000;
    }

        body > form > #pageGreeting > #pageTitle {
            font-size: 35px;
            font-weight: 700;
            color: #e7e7de;
            font-family: 'Courgette', cursive;
        }

        body > form > #pageGreeting > nav {
            display: inline-block;
            margin-left: 30px;
            font-size: 20px;
            border-left: 3px solid #e7e7de;
            padding-left: 30px;
        }

            body > form > #pageGreeting > nav > span {
                display: inline-block;
                margin-left: 10px;
                border-left: 1px solid #e7e7de;
                border-right: 1px solid #e7e7de;
                padding-left: 10px;
                padding-right: 10px;
            }

                body > form > #pageGreeting > nav > span:first-child {
                    margin-left: 0px;
                    border-left: none;
                }

                body > form > #pageGreeting > nav > span:last-child {
                    border-right: none;
                }

                body > form > #pageGreeting > nav > span > a {
                    color: aqua;
                    text-decoration: none;
                    font-weight: 900;
                    font-size: 25px;
                }

                    body > form > #pageGreeting > nav > span > a:hover {
                        color: blue;
                    }

    body > form > main {
        width: 100%;
        background-color: #e7e7de;
        min-height: 600px;
        margin-top: 15px;
    }

        body > form > main > h1 {
            display: block;
            margin-left 15px;
        }

    body > form > footer {
        position: absolute;
        bottom: 0px;
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        font-family: Arial;
        font-size: 15px;
        font-weight: 900;
        background-color: #00597a;
        color: white;
    }

div.pageDescription {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 20px;
    font-size: 30px;
    text-align: center;
    font-weight: 700;
}

main.master

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="main.master.cs" Inherits="main" %>

<!DOCTYPE html>

<html>
    <head runat="server">
        <title></title>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Courgette&family=Roboto:wght@300&display=swap" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="resources/css/main.css" />
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <asp:ContentPlaceHolder id="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="frmMain" runat="server">
            <asp:ScriptManager ID="smMain" runat="server"></asp:ScriptManager>
            <div id="pageGreeting">
                <span id="pageTitle"><asp:ContentPlaceHolder ID="pageHeader" runat="server"></asp:ContentPlaceHolder></span>
                <nav><% WriteNav(); %></nav>
            </div>
            <main><asp:ContentPlaceHolder ID="pageContent" runat="server"></asp:ContentPlaceHolder></main>
            <footer>Copyright &copy; 2022 Renewed Life Chiropractic Center - All Rights Reserved</footer>
        </form>
</body>
</html>

Where is hideDialog() defined in relationship to the code you are trying to run that is not working? — Twisty
– Twisty, Commented Jan 4, 2022 at 4:08
In the script of the first page. Under head. Either way, that isn't really the problem. the hide dialog function works fine. The load event isn't triggering, when I use an alert('hello') instead of the function, nothing happens anyway. — Flux Kraken
– Flux Kraken, Commented Jan 4, 2022 at 5:37

Migue Ang Rdz · Accepted Answer · 2022-01-04 03:38:32Z

0

you have probably a block from browser "cors", check for block messages on developers console (f12) or any error messages you'd probably have to send a headers to allow show the iframe in a "parent" page

answered Jan 4, 2022 at 3:38

Migue Ang Rdz

961 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Flux Kraken Over a year ago

There is this in the developer console, not sure how to fix it though. jQuery.Deferred exception: e.indexOf is not a function TypeError: e.indexOf is not a function at S.fn.init.S.fn.load

Migue Ang Rdz Over a year ago

try this: stackoverflow.com/questions/46856572/…

tim- · Accepted Answer · 2022-01-06 10:57:38Z

0

I think the ID of your iframe is changed on rendering, because you use the 'runat="server"' attribute. That's why javascript doesn't find this control by ID. Try setting clientidmode tot static, like this:

<iframe id="ifPDF" visible="false" runat="server" ClientIDMode="Static" />

answered Jan 6, 2022 at 10:57

tim-

1846 bronze badges

Collectives™ on Stack Overflow

jquery load event not triggering on iframe when loading pdf - Even when it does trigger fine in seperate project

Code that isn't triggering

nice.aspx

nice.aspx.cs

letters.css

main.css

main.master

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Code that isn't triggering

nice.aspx

nice.aspx.cs

letters.css

main.css

main.master

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related