Dynamically Insert <embed> tag

Ray Turner
Ray Turner used Ask the Experts™
on
The following code contains an embed tag.  However do I dynamically insert the embed tag?

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ViewPDF.aspx.vb" Inherits="ViewPDF" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script>
        $(function () {
        });

        function Test() {
            //Insert <embed> tag
            alert(hfPDFViewer.Get("PDFName"));
        }
    </script>
</head>

<body id="Main" onload="Test();">
    <form id="form1" runat="server">
        <%--<embed id="PDF" src="" type="application/pdf" />--%>
        <dx:ASPxHiddenField ID="hfPDFViewer" runat="server" ClientInstanceName="hfPDFViewer">
        </dx:ASPxHiddenField>
    </form>
</body>
</html>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Analyst Developer
Distinguished Expert 2018
Commented:
Hi Ray,

I'm not sure if I got you but you could create the tag dynamically and insert it when the DOM is ready, like :

$(function () {
  // Create the <embed> tag
  var newEmbedTag = $('<embed/>', {id: "PDF", type: "application/pdf"});

  //Insert it to the view
  $('form#form1').prepend(newEmbedTag);
});

Open in new window

Ray TurnerSenior Consultant

Author

Commented:
Thanks!  How do I modify your code to assigned a value to the src?
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
You're welcome, you could add it as another entry in the properties object :

{id: "PDF", type: "application/pdf", src: "Your source here"}

Open in new window

CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

Ray TurnerSenior Consultant

Author

Commented:
Thank you so much!
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
Glad I could help.
Ray TurnerSenior Consultant

Author

Commented:
Since I'm a reusable code junkie. :)  Here's the JavaScript function I ended up with.

    function LoadPDF (tag, Src) {
        $(tag).empty().prepend($('<embed/>', { id: "PDF", type: "application/pdf", src: Src, style: "width: 100%; height: 100%;" }));
    }

It simply empties the tag; then inserts the <embed>

Enjoy
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
Good job @Ray.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial