How to return to Django from an Angular form?

Question

In a Django 1.8 app I have a form that is posting using Angular.js. After the form has been submitted by Angular to Django Rest Framework I would like to move to another Django view. My question is how to move to another Django view apart from using $windows.location.href?

At the moment I'm using $windows.location.href but I would like Django(meaning not Javascript/Angular) to move to another page. Here's how I do it now - for brevity here's a small part of this form in my template:

<div ng-app="pacjent">
(...)
<div ng-controller="NewPatientCtrl">
(...)
    <form name="newPatientForm" ng-submit="newPatientForm.$valid && submitNewPatientForm()" ng-init="initialize('{{user.id}}')" novalidate>
    {% csrf_token %}
    (...)
    </form>

This form is posting all data to Django Rest Framework like this:

        function submitNewPatientForm(){
            /* it's prime goal is to submit name,surname, age & phone to createNewPatient API */
            $scope.setBusy = true;
            savePatient = $http({
                        method: 'POST',
                        url: 'http://localhost:8000/pacjent/api/createNewPatient/',
                        data: $scope.newPatient,
                    })
                    .then(function successCallback(response){

                        newPatient = response.data['id'];

                        createNewTherapyGroup();
                        url = patientDetailView + response.data.id + '/';
                        $window.location.href=url;  # I DON"T WANT TO USE THIS, but I don't know how!
                    }, function errorCallback(response){
                        if (response['data']['name'] && response['data']['surname']) {
                            $scope.newPatientForm.newPatientName.$setValidity("patientExists", false);
                            $scope.errors.newPatientName =response.data['name'][0];
            }

(...)

Is there a way to do it differently?

You should define state for each view. You have to call those state for transition. You may study on angular state. — Akhter Al Amin
– Akhter Al Amin, Commented Dec 14, 2016 at 10:23

2ps · Accepted Answer · 2016-12-14 19:49:11Z

1

If you want django to control the redirect, don’t post the form using AJAX, just post it back to django with a regular form so that you can redirect the user to another view.

e.g.,

<form name="newPatientForm" method="POST" action=""> 
{% csrf_token %}
(...)
</form>

in your view:

def new_patient_form_submit(request):
    name = request.POST['. . .']
    . . .
    return redirect('another_view_name')

alternatively, you can have the REST endpoint return a success JSON response with the URL to redirect to so that you don’t have to hardcode it into your JS file:

           .then(function successCallback(response){
                    newPatient = response.data['id'];
                    var next = response.data['next']; // get the next URL to go to from the django REST endpoint
                    createNewTherapyGroup();
                    $window.location.href = next;  // redirect to the django-provided route

edited Dec 14, 2016 at 19:49

answered Dec 14, 2016 at 19:43

2ps

16k2 gold badges34 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1544500 Over a year ago

Thanks for your answer! I think you mentioned the only 2 possibilities, there's isn't anything else... It's a good hint to return the response with the URL to redirect to - thanks!

Collectives™ on Stack Overflow

How to return to Django from an Angular form?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related