Add loading view during process of the next view in Django

dina robert 0
Viewed 25

I want to add a loading page during the process, I tried all the solutions here in stackoverflow and different articales, but I'm really surprised that the solutions did not work for me, It's been 2 days and I still didn't find a solution.

I have two pages Home and datatable I want to add a loading page when i redirect from the home page to the datatable one. Please any help is highly appreciated.

this is my view.py :

def home_view(request):
    context = {}
    context ['form'] = Scraping()
    return render(request,'home.html', context)
def datatable_view(request):
    if request.method =='POST':
        if form.is_valid():
            return render(request,'datatable.html')
django python
1 Answers

as i told you ajax calls should work i tried and its working. here's code in local i had to set TimeOut fuction because response is quick so cant see loading effect.

Html:

<style>
.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

<div class="loader" style="display: none;" id="id_loader"></div>

Js click event:

function saveProfile() {
            var postData = new FormData();
            let token = localStorage.getItem("token");
            postData.append('profile_id', $("#id_profile_id").val().trim());
            postData.append('user_id', $("#id_user_id").val().trim());
            postData.append('username', $("#id_username").val().trim());
            postData.append('password', $("#id_password").val().trim());
            postData.append('first_name', $("#id_first_name").val().trim());
            postData.append('last_name', $("#id_last_name").val().trim());
            postData.append('phone', $("#id_phone").val().trim());
            postData.append('email', $("#id_email").val().trim());
            postData.append('address', $("#id_address").val().trim());

            $("#id_loader").show()
            setTimeout(function () {
                axios({
                    method: "post",
                    url: "http://192.168.1.249:7001/profile_save/",
                    data: postData,
                    headers: { "Content-Type": "application/json", 'X-CSRFToken': '{{ csrf_token }}', Authorization: `Bearer ${token}`, },
                }).then(function (response) {
                    if (response.data && response.data.code == 1) {
                        $("#id_loader").hide();
                        swal("Successful!", response.data.msg, "success")
                    }
                    else if (response.data.code == 0) {
                        $("#id_loader").hide();
                        swal("Oops!", response.data.msg, "error")
                    }
                })
            }, 2000);
        }
Hemal Patel0
Related