sairn sairn - 6 months ago 4
Javascript Question

Is the jQuery dialog widget capable of displaying a word document or pdf?

Is the jQuery dialog widget capable of displaying a word document (or PDF) - i.e., instead of plain text or HTML?


FYI - This illustrates (sort of) what I want to accomplish - for those who have faced the same question/problem... --That is a popup/dialog that contains a scrolling PDF document.

Below, I posted the critical part of a working example that is doing just this...

FWIW, I could NOT find any examples on the Internet that did what this is doing... --If there is a better way of accomplishing this - i.e., without a 3rd party product - please post it! :-)

(As you can see I DID NOT NEED a product called "Lightbox" -- which someone had somewhat condescendingly suggested -- to do this)

  • (Note: in this crude example, when the checkbox is checked by the user, an "agreement" dialog -- which contains a PDF document -- appears)*:


    <!DOCTYPE html>
    <%@taglib prefix="form" uri="" %>
    <%@taglib prefix="c" uri="" %>
    <%@taglib prefix="spring" uri="" %>

    <html xmlns="">
            <meta http-equiv="x-ua-compatible" content="IE=8" />
            <meta charset="UTF-8"/>
            <meta http-equiv="cache-control" content="no-cache"/>
            <meta http-equiv="pragma" content="no-cache" />
            <meta http-equiv="expires" content="0"/>


            <link   type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.23.custom.css" />        
            <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
            <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>        
            <script type="text/javascript">
                /* <![CDATA[ */

                var context = "${pageContext.request.contextPath}";

                function showAgreementDialog(url)
                    var okay_to_close_window = false;  //i.e., force user to use buttons in modal dialog...    
                    var tag = $("<div></div>");
                    $("<object  style='height: 100% !important; width: 100% !important;' data='" + url + "' type='application/pdf'></object>").appendTo(tag);
                                closeOnEscape: false,
                                width: 640,
                                height: 480,
                                resizable: true,
                                autoOpen: false,
                                modal: true,
                                title: "<h2 style='padding-bottom: .8em; color: red;text-align: center !important;text-decoration:underline !important;'>AGREEMENT</h2><h3 style='color: blue;text-align: center !important;'>I have read and acknowledged the agreement.</h3><h4 style='color: black;text-align: center !important; font-weight: normal !important; font-style: italic !important; font-size: 8pt !important;'>(Use the buttons below to indicate agreement).</h3>",
                                buttons: [
                                    {text: "I agree", click: function()
                                            okay_to_close_window = true;
                                            $("#testdialog").attr('checked', true);
                                            return false;
                                    {text: "I do not agree", click: function()
                                            okay_to_close_window = true;
                                            $("#testdialog").attr('checked', false);
                                            return false;
                                beforeclose: function() {
                                    return okay_to_close_window;



                    $("#testdialog").on("click", function(e)
                        if ($("#testdialog").is(":checked") === true)
                            $("#testdialog").attr('checked', false);

                /* ]]> */

            <input id="context" type="hidden" value="${pageContext.request.contextPath}"/> 
                <label for="testdialog">check to invoke agreement dialog</label>
                <input id="testdialog" type="checkbox" name="testdialog" value="false"/>      

        package aaa.bbb.ccc.war;

        import javax.servlet.ServletOutputStream;
        import javax.servlet.http.HttpServletRequest;
        import org.springframework.stereotype.Controller;
        import org.springframework.web.bind.annotation.RequestMapping;
        import org.springframework.web.bind.annotation.RequestMethod;
        import org.springframework.web.bind.annotation.ResponseBody;
        import javax.servlet.http.HttpServletResponse;
        import org.springframework.context.annotation.Scope;
        import javax.servlet.http.HttpSession;

        public class IndexController

            @RequestMapping(value = "/getAgreement", method = RequestMethod.GET)
            public void getAgreement(HttpServletResponse response, HttpServletRequest request, HttpSession session) throws IOException, Exception
                byte[] bytes = FileUtils.readFileToByteArray(new File("C:\\agreement.pdf"));

                ServletOutputStream stream = response.getOutputStream();
                response.addHeader("Content-Type", "application/pdf");
                response.addHeader("Content-Disposition", "inline;filename=agreement.pdf");
                response.setContentLength((int) bytes.length);