Ajax form processing - javascript

After submitting a form to Django, it takes about 3 seconds to process
I need an Ajax script that will redirect the user to an intermediate page where he will wait for a response from Django.
Django got a new redirect after receiving the response
I tried to solve this problem with Django, but I can't do 2 redirects in one view
Fields: phone, name, email, web, id_web

Related

Ajax request being blocked/canceled

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)

How to add a pre-loader to a django web site?

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)

When I perform the ajax request that performs sign up or login it doesn't work properly

I am trying to make a sign up and login forms in a project that follows MVC pattern. So we can divide the process into 3 parts: 1- the front-end which is html,css and javascript. 2-Server-side which is PHP 3- database which is MySQL. The problem I have is that when I submit the form either Login or sign up I get a strange behavior that depend on the values i'm sending to the PHP code.
for the sign up process. when I submit the email and password the ajax request send successfully the data and the username and password are correctly inserted into the database, but the on success function is not called. and the page is refreshed.
for the login processes. consider we have an already existing user in database 'user1#gmail.com' and password '1234'. if I entered the correct username and password I get the same behavior as the signup the page is refreshed and on success function is not called and the correct behavior that should happen based on the following codes that it should overwrite the page with the response, but if I send the correct username and password field is empty the onsuccess function is called and write in the document the response 'Hello from login wrong'. In the codes I wrote document.write() function to show only the response but it's not for the real implementation.
There are multiple ways to stop your form from submitting during ajax processing, one easy solution is to change your submit button to a button.
You do this by changing:
type="submit"
to
type="button"

Validate a Django Form with external POST action

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.

best way to handle authentication in single page application ( SPA)

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

Categories

Resources