NoReceipt4Panda NoReceipt4Panda - 7 months ago 24
Javascript Question

reloading container without refresh with a different copy of the same file not working

I have a button that generates a PDF, then reloads the PDF in the browser by replacing the container it's in with itself, but with a different link. For some reason, the new PDF doesn't show up, the old one is there still no matter how many times it is refreshed. I'm not using an iframe or an object/embed method, I'm using http://pdfobject.com/

My html pdfobject container:

<div id="pdfContainer">
<div id="pdfSample"></div>
</div>


My Javascript to initiate the src upon window load:

<script type="text/javascript">
$(function () {
PDFObject.embed("myInitialPDF.pdf", "#pdfSample");
})
</script>


My AJAX call to the PDF-creation/container-refresh:

$('#genPDF').click(function () {
$.ajax({
url: "mergePDF.php",
data: str,
cache: false,
success: function (result) {
$("#pdfobject").attr("src", "newPDF.pdf");
var container = document.getElementById("pdfContainer");
var content = container.innerHTML;
container.innerHTML = content;
}
});
});


Everytime the button with ID genPDF is clicked, a new PDF is generated by the name "newPDF.pdf" and the container should replace the previously assigned src path with the new source path of the new PDF (which is the same name as before). I don't understand if it's cache that's preventing this or not. Am I missing something?

Answer

You specified cache: false this means that success: function (result) { is passed a not-cached result. You then proceed to never use it and instead change the src of an object to what it originally was, so the results of fetching that src url are cached by the browser because they were fetched before. Even if it's not cached, the browser will probably never fetch the file again because it never perceived a change of value in src.

Still with me?

What you could do is add a random number to the end of the url so that it's a new url and the browser will fetch the file again because it doesnt know if newPDF.pdf?number=random1 is or isn't the same as newPDF.pdf?number=random2. Even better, you can add a number that you know will be different every time you try it, like the current time in seconds.

Here's your code again, with a minor adjustment:

$('#genPDF').click(function () {
    $.ajax({
        url: "mergePDF.php",
        data: str,
        cache: false,
        success: function (result) {
            var t = new Date.getTime();
            $("#pdfobject").attr("src", "newPDF.pdf?"+t);
            var container = document.getElementById("pdfContainer");
            var content = container.innerHTML;
            container.innerHTML = content;
        }
    });
});

Something important I'd like to add: This isn't a good enough solution, even though it answers your question. A better solution would be to generate a file named after the timestamp (with the pdf extension of course) and return that as result and use it in $("#pdfobject").attr("src", result);. Make sure you clean up any files that are named with a timestamp that is really old, like more than an hour, a day or a week depending on what you think is right. This will ensure that nobody is fighting over the filename by triggering a new PDF creation at almost the same time, but also make sure you don't have a massive archive of obsolete PDF files.

Comments