title: How to implement ladda-bootstrap button loading animation?
body: <p>Here's the github documentation: <a href="https://github.com/msurguy/ladda-bootstrap" rel="nofollow">https://github.com/msurguy/ladda-bootstrap</a></p>
  
  <p>I'm trying to make my code work but for some reason, the ladda won't stop spinning (button never gets enabled again), EVEN if I place "Ladda.stopAll();" after the AJAX call. Here's my code:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-lg btn-success ladda-button" data-style="expand-left" id="genPDF"&gt;&lt;span class="ladda-label"&gt;Generate PDF&lt;/span&gt;&lt;/button&gt;
  
  &lt;script&gt;
  
      Ladda.bind('button[id=genPDF]');
  
      $('#genPDF').click(function () {
  
          //Another approach I tried
          //Ladda.bind(this);
  
          var str = "tmName=" + $("#tmName").val() +
              "&amp;headingText=" + $("#headingText").val();
  
          $.ajax({
              url: "testing.php",
              data: str,
              cache: false,
              success: function (data) {
                  //None of this code matters, it all works fine
                  console.log(data);
                  var container = document.getElementById("pdfContainer");
                  var content = container.innerHTML;
                  container.innerHTML = content;
              }
          });
  
          //If I placed Ladda.stopAll(); here, the ladda wouldn't even
          //START spinning upon being clicked on.
      });
  
  &lt;/script&gt;
  </code></pre>