How can I use AJAX to bring bring pdfs into a div?

Question

Okay, in my first jump into AJAX-like behavior...

I'm wanting to load a div with a pdf based on a user click on a link. If the user clicks on a second link, the div should be overwritten with the new pdf.

So I figured on testing it with something like:

<script>
    function showPdf()
    {
        var pdfDiv = document.getElementById("pdfDiv");
        pdfDiv.innerHTML='<object type="application/pdf" data="my.pdf" width="500" height="650" ></object>';
    }
</script>
<div id="pdfDiv"></div>

This, however, does not work.

I'm guessing I'm probably setting the innerHTML, but it's not actually fetching the file. I figure I need some AJAXy knowledge to force that new request after the page has loaded. Can someone point me to the right object to start exploring?

Answer 1

Did you try using an iframe? Doesn't the whole "document" need to be the PDF url?

Answer 2

You could try and use something like this...

Answer 3

I'd try something easier: use Google PDF Viewer service. You just have to create an iframe and change its src:

<iframe src="http://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&amp;embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>