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:
Hello,

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:

http://stackoverflow.com/a/3688765/2417982

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

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):
$('a.createpdf').click(function(event){
  event.preventDefault();
  $('a.createpdf').hide();
  $('img.spinner').show();
  $.ajax({
    url: "/getpdf.php",
    type: "POST",
    dataType: 'json',
    // .. other options

    success: function(data) {
      if (data.success) {
        showDownloadPdfDialog(data.pdfUrl);
      } else {
        showError(data.errorMsg);
      }
    error: function() { 
        // handle the error
    }
    complete: function() {
      $('img.spinner').hide();
      $('a.createpdf').show();
    }
  });
}


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.