i had made a web app in django that takes some input through form,
performs some long computation in django views, store the results in context and renders the results in other template.In between taking submitting input and displaying result i want to display a loading page ,but i didn't found any resource that could explain me in some simple step by step manner.
Any resource or reference will be helpful.
Thanks
A solution to this would be using an AJAX request for submitting the input. As soon as the request is made, you show the loader, and when its finished (success callback) you redirect to the other view or show the results instead of the loader.
Step by step:
setup ajax request that collects all the user input (frontend)
show a div with the loader as soon as user submits form (frontend)
submit form to a url (that is connected to a view) that catches the post request and handles the input (backend)
return the results of that view as a JsonResponse (backend)
render the results using the success callback of your ajax request (frontend)
hide the loader div in that callback (frontend)
Related
I have two different apps hosted under two different domains.
Once the user is logged in app 1 (hosted on aws) and click on the "my profile" button, he/she is redirected to a html page that contains an ajax form.
This ajax form makes a request to app 1's backend and the backend responds with a html form already filled with the infos needed to send the user logged to app 2 (hosted on IIS). This html response also contains a <script> tag with a .submit() function to automaticaly submit the form.
The ajax then place this html form inside a given <div> and the form is submited to app 2.
The problem is that the submition of the form is being blocked... I doesn't say why, but in the browser's Network tab, the status appears as "canceled".
I can imagine that the issue might be related to CORS, but I'm not sure since it doesn't give the cors error explicitly.
Also, it works when running app 1 in localhost.
Edit:
It seems that is not the form submition that is being blocked, but maybe the ajax request to the api asking for the form or the api response containing the form... I'm not sure.
At first, when the ajax request POST to the api, the Network tab shows this (image 1).
Then, when I get the canceled/blocked error, it shows this (image 2)
I have a form that takes some input and sends a POST request back to a Spring Boot instance, which triggers a file download through content disposition header.
The browser handles the download perfectly but it does not navigate away from the page, which is the normal behavior.
Now, the inputs contain sensitive information that must not remain in the form.
I can only intercept the form's onsubmit function but I can not use ajax to make the requests because the server returns multiple pages depending the state of the data (i.e bad input, wrong information, etc)
Clearing the fields before submission erases the form and all data gets lost.
Is there a way to clear the fields before or after the form has been submitted?
There's a section in my website where users can subscribe to our mailing list. I want it so that:
1. Users will input and submit their emails.
2. Node.js will handle this request and add the email to our mailing list.
3. If the request was successful, it will show up in the front-end that the subscription was either successful or unsuccessful.
So what I don't get how to do is executing a front-end javascript process (the process that will alert to the user that the request was either successful/unsuccessful) through a signal from Node.js. I am a beginner in Node.js and I am lost.
Thank you in advance!
EDIT: I am trying to do this in a single-page. I do not want to redirect the user to a whole another page just to tell them that they were successfully subscribed. I just want a simple alert.
You can create another page for the "Thank you" (in the case it was successful) and another one for a failed attempt. Handle it on the server and redirect them to the correct page (assuming you want to use different pages) Another thing you can do is create an empty div element for where you will put the status (successful of unsuccessful). When they submit the form and after you've handled the request, you can then re-render the page and pass in the message to put in your div.
I have a Django form, which sends the form data to an external source(to be more precise, it is a PayPal payment form). The user enters the price for the product, clicks on the button and the POST request is send to PayPal triggering the normal payment process.
Now I want to use OTP (like Google Authenticator) to validate each payment.
How should the validation be realized? I thought of several scenarios, but none of them is really satisfying:
Should I send the request first to my site, validate the OTP and then redirect the User to the PayPal site with the data via a POST request, coming with the request? Problem: POST requests are not meant to be redirected and I don't know, how to realize it in django.
Should I write JavaScript code, which sends an ajax request to my site, and "activates" the form on success? Problem: smarter users could just activate the form from the browser console, without sending the ajax request. Does anybody know some kind of activation trick in JavaScript, which is not "hackable"
I would be glad to hear some more solutions from you or some suggestions, how the solutions above could be realized without the problems mentioned.
EDIT - My Solution so far:
I have done a work around and split the form in two. The first form checks the OTP and sends the data to my internal django view. It also creates a model instance with an generated invoice, which can then be checked in the PayPal IPN routine. The second form is a PayPal payment form, which sends the POST request to PayPal. You can find the simplified code in the following Github-Gist:
https://gist.github.com/BloodyD/2cd15f38d0f666cf3a73
First method - normal redirection after POST:
I don't know why do You think that there shouldn't be any redirect after POST request? In django it happens all the time, without that each page refresh directly after adding something to database will trigger adding it one more time.
To redirect user into proper paypal page, you can just send HttpResponseRedirect instead of normal response when form is submitted with valid form data. If not, display some error messages.
2nd solution: using javascript.
You can send url to redirect to (paypal url) in AJAX response, so user won't be able to bypass this. Simply put some form submitted by AJAX, if it returns URL to redirect, just redirect user. If not, display error message.
In single page application usually we request a web page (dashboard.html) and we get it from server and then we are rendering some dashboard data on it (using ajax)
I want to display dashboard.html only when user is authenticated from backed (have valid email and password) otherwise I want to redirect him to login page.
$.ajax({
url: "dashbaard.json",
dataType: "json"
}).done( function(data){
// data = { inValid: true } - from backend
if(data.inValid){
alert("You are not authorized user, please register 1st!");
location.href = "register.html";
} else {
// render data on dashboard page - valid user
}
})
but here is a problem suppose user is not valid
user requested the dashboard.html, all assets (css, js, images) would be loaded although user is not valid, in this case we have no point to load single css or js file
Expected result: user requested dashboard.html if user is not valid he should be redirected to login/register page immediately without loading anything un-necessarly from server.
How we handle it with single page application ( no page refresh if possible) i need best possible solution without page flicker, I am using Laravel 4 for handling back-end authentication that does it's job very well.
Two ways:
Change dashboard.html to another server language, like php, asp.net etc, and handle authentication at server side. Redirected to login page if invalid.
Request authentication on page ready, and add beforeSend setting on per ajax request. $.ajaxSetup({beforeSend: function(){ // request authentication sync and redirect }});
If you take No.2 method, you'd better add the authorize method to a javascript file.
Hope it helps.
My way is using a popup/modal login box for handling this situation
If the ajax request return unauthenticated user then show login box (facebox, bootstrap modal, anything)
If the ajax request return authenticated user (along with data) then render dashboard data