mardi 24 mars 2015

rendering and handling forms with django-angular

I have some very frustrating problems with getting django-angular to work.

I followed the docs, particulary example from here and instead of rendered form i got something like this (this is how it looks, not how i did it).


I must say im going crazy - it must be something really silly since i didn't find anything related to this, so i assume noone else is this dumb.


Here i past my code for reference:


views.py



from django.http import HttpResponse
from django.views.generic import TemplateView
from imris.patient.forms import PatientForm

class PatientCreationView(TemplateView):
template = 'patient_creation_form.html'

def get_context_data(self, **kwargs):
context = super(PatientCreationView,self).get_context_data(**kwargs)
context.update(creation_form=PatientForm())
return context

def post(self, request, *args, **kwargs):
print request.body # placeholder for handling
return HttpResponse()


forms.py



from django.forms import ModelForm
from djangular.forms import NgModelFormMixin, NgModelForm
from imris.patient.models import Patient

# initial goal is to have creation form (not sure whether it will be identical with edition one)
class PatientForm(NgModelFormMixin, NgModelForm):

class Meta:
model = Patient

def __init__(self, *args, **kwargs):
kwargs.update(scope_prefix='patient')
super(PatientForm, self).__init__(*args, **kwargs)


html partial



<form ng-controller="patientCreationFormCtrl" name="creation_form">
{{creation_form}}
<button ng-click="submit()">Submit</button>
</form>


angular module (for this particular part of app)



var patient = angular.module('patient', ['ngRoute', 'ng.django.forms']);

patient.config( function($routeProvider, $interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');

$routeProvider
.when('/pacjenci', {
templateUrl: '/static/patient/templates/patient_creation_form.html',
controller: 'patientCreationFormCtrl'
})
});

patient.controller('patientCreationFormCtrl', ['$scope', '$http', 'djangoForm', function($scope, $http, djangoForm) {
$scope.submit = function() {
$http.post('api/patients/new/', $scope.patient)
.success(function(out_data) {
alert(out_data)
});
}

}])


main angular module



var imris = angular.module('imris', ['ngRoute', 'patient']);

imris.config(function($routeProvider, $interpolateProvider, $httpProvider) {
// change escape symbol for angular so they don't collide with django templatetags
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
// ensure expected by django header for angular AJAX request (for proper working of is_ajax() method)
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
// change cookie name and header for CSRF protection (to achieve token functionality in angular)
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
})

imris.controller('sidebarController', ['$scope', '$location', function($scope, $location) {
$scope.nav_buttons = [
{label: 'PACJENCI', url: '/pacjenci'},
// more sidebar buttons would be here
]
$scope.go = function (path) {
$location.path(path);
}
}])


head



<link rel="stylesheet" href="{% static 'bootstrap/bootstrap.min.css'%}">
<script src="{% static 'angular/angular.min.js'%}"></script>
<script src="{% static 'djangular/js/django-angular.min.js'%}"></script>
<script src="http://ift.tt/1CURnNo"></script>
<script src="{% static 'patient/module.js'%}"></script>
<script src="{% static 'app/imris.js'%}"></script>


main part of body



<div class="row" id="content">
<div class="col-lg-2" id="sidebar" ng-controller="sidebarController">
<button ng-repeat="nav in nav_buttons" class="btn btn-default btn-block" ng-click="go([[nav.url]])">[[nav.label]]</button>
</div>
<div class="col-lg-10" id="main">
<div ng-view></div>
</div>
</div>


Well... thats it, im pretty desperate so any hint is appreciated.


Disclaimer: The amount of code i posted may suggest i want someone to fix it for me, hereby i state that this is not the case. I just want to give all materials to receive valuable answers - which i would like to be some link or hint what i messed up.


Thanks in advance ;)


Aucun commentaire:

Enregistrer un commentaire