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

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

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