This is an archived forum post. The information may be outdated. Contact us if you have any questions.

Status spinner

DrBB wrote on 2013-11-04:
The PDFs we're creating have some large images and it can take several seconds after clicking the link before the "Download PDF" dialog box pops up. As a result, there's a high risk of people re-clicking the link. I'd like to run a "loading spinner" to prevent that. Must be a relatively common problem, but I haven't found an example in the forum posts yet. Can you point me to a solution? Thanks!
support wrote on 2013-11-05:

We do not have a code example but this should be relatively straightforward with Javascript:

  1. Attach an action to the click event of the "Create PDF" link. The action can show a spinner and/or disable the "Create PDF" link.
  2. Hide the spinner and/or enable the link when the "Download PDF" dialog is about to pop up.
DrBB wrote on 2013-11-06:
That's the model I want to follow, but step 2 is the problem b/c there's no built-in function for detecting that event, at least not that I've been able to find. I'm seeing various server-side workarounds and whatnot, but they're all pretty elaborate. The simplest one I've found so far is here:

But I was hoping someone might have already come up with a pdfcrowd-friendly solution. Guess not...?
support wrote on 2013-11-07:

There are many ways how to implement this. One option is to use JQuery and AJAX. Let's say we have this HTML:
<a class="createpdf">Create PDF<a/>
<img class="spinner" style="display:none" src="/images/spinner.gif">

Then you have a server-side function (getpdf.php) that is called via AJAX. The function calls the Pdfcrowd API and returns a JSON like this:
{ "success": true, "pdfUrl": "http://myserver/pdfs/doc_01.pdf", "errorMsg": "" }

Now you can use this Javascript (untested):
    url: "/getpdf.php",
    type: "POST",
    dataType: 'json',
    // .. other options

    success: function(data) {
      if (data.success) {
      } else {
    error: function() { 
        // handle the error
    complete: function() {

When a user clicks the link, it hides it, shows the spinner and calls your server-side function via AJAX. When the call completes it shows the result, hides the spinner and shows the link.
DrBB wrote on 2013-11-08:
Thanks--that looks doable. I'll give it a try.