Django spinner when loading (spin.js)

Question

i am new in Django and this things, and i need some tips or solutions to adding spinner. Iam using spin.js, which i show it on this way:

 var target = document.getElementById('spin');
    var spinner = new Spinner(opts).spin(target);
    spinner.stop();
    function spin_stop()
    {
        spinner.stop();
    }
    function spin_start()
    {
        spinner.spin(target);
    }

This code is copied from some example on web. I show spinner with <div id...>

Now there is a problem.

I have an app in Django with name testScript. That app connects to different page to verify login information. This is "long" process, it takes about 10sec. In that time, i want on my login page add a spinner. In template i have a form:

<form class="form-signin" action="/testScript/" method="post">

and if i want to add onclick event in my button in this form, my spinner freeze.

How can i show spinner, when my testScript is processing?

Thanx

nullability · Answer 1 · 2013-05-08T17:56:05.490

The spinner freezes because the browser has changed the page and is waiting for the new page to respond.

You could try using an animated gif as a spinner instead of spin.js, but that would probably freeze too.

If your verification process really needs to take 10+ seconds, then your best option is to submit the POST using Ajax, and then redirect or display the response once the server responds.

How you do it with Ajax depends on your workflow. The easiest way to POST by Ajax is with jQuery, if you don't mind an extra library. Once it responds show the response in a div on the page or redirect to another view.

$.ajax({
    url: "/testScript/",
    method: "POST",
    data: { //form data
    },
    success: function(data) {
        //Display response here
    },
    complete: function() {
        //Hide spinner here
    }
});

This is pretty barebones since I don't have enough details about your application or markup, but there are lots of similar solutions on here to help you.

Django spinner when loading (spin.js)

1 Answers1