sairn sairn - 7 months ago 19
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?

Answer

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)*:

index.xhtml

    <!DOCTYPE html>
    <%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>

    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <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"/>

            <title>jquerydialogpdf</title>

            <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);
                    tag.dialog(
                            {
                                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);
                                            $(this).dialog("close");
                                            return false;
                                        }
                                    },
                                    {text: "I do not agree", click: function()
                                        {
                                            okay_to_close_window = true;
                                            $("#testdialog").attr('checked', false);
                                            $(this).dialog("close");
                                            return false;
                                        }
                                    }],
                                beforeclose: function() {
                                    return okay_to_close_window;
                                }
                            }).dialog('open');

                    $('a.ui-dialog-titlebar-close').remove();

                }

                $(document).ready(function()
                {
                    $("#testdialog").on("click", function(e)
                    {
                        if ($("#testdialog").is(":checked") === true)
                        {
                            showAgreementDialog("data/getAgreement");
                        }
                        else
                        {
                            $("#testdialog").attr('checked', false);
                        }
                    });
                });

                /* ]]> */
            </script>

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

IndexController.java

        package aaa.bbb.ccc.war;

        import java.io.File;
        import java.io.IOException;
        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;
        import org.apache.commons.io.FileUtils;

        @Controller
        @Scope("session")
        public class IndexController
        {

            @RequestMapping(value = "/getAgreement", method = RequestMethod.GET)
            @ResponseBody
            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.setContentType("application/pdf");
                response.addHeader("Content-Type", "application/pdf");
                response.addHeader("Content-Disposition", "inline;filename=agreement.pdf");
                response.setContentLength((int) bytes.length);
                stream.write(bytes);

                stream.flush();
                stream.close();
            }
        }
Comments