I psoted a similar question about a month ago. I went to work on ohter parts of the project, get a good answer to my question, but could not resolve. So I though would be better do another topic.
The page is rendering tokens and tagas as text, like csrf an if else are being displayed on screen. The other problem is that the form data is not being saved at data base. I looked at the console, by browser inspection, and it returns:
POST http://incluirvendedor/ net::ERR_NAME_NOT_RESOLVED
HTML:
{% extends 'index.html' %}
{% block content %}
<div ng-controller="PessoasController">
<div class="row">
<div class="col s12">
<button type="button" class="btn waves-effect waves-light tool-pattern-btn btn-action-pattern"
onclick="javascript:history.go(-1)"><i class="material-icons left">keyboard_return</i>Go Back</button>
</div>
<div class="col s12">
{% if submitted %}
Employee included succefully!
{% else %}
<form method="post">
<div class="card hoverable">
{% csrf_token %}
<div class="card-content exib-pattern">
<span class="card-title-home"><i class="material-icons left">add</i>Add New Employee</span>
<div class="row">
<div class="input-field col s12 l6">
<input ng-model="pessoa.name" maxlength="255" type="text" class="form-control" id="nome"
name="nome" />
<label for="nome">Name:</label>
</div>
<div class="input-field col s12 l4">
<input ng-model="pessoa.identidade" maxlength="255" type="text" class="form-control"
id="identidade" name="identidade" />
<label for="id">identidade:</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 l3">
<input ng-model="pessoa.position" maxlength="50" type="text" class="form-control"
id="position" name="position" />
<label for="id">Position:</label>
</div>
<div class="input-field col s12 l3">
<input ng-model="pessoa.store" maxlength="50" type="text" class="form-control" id="store"
name="store">
<label for="id">store:</label>
</div>
</div>
{{ form|crispy }}
<div class="row">
<div class="col s12">
<button ng-click="submitForm()" class="btn waves-effect waves-light tool-pattern-btn green">
<i class="material-icons left">add</i>Add</button>
</div>
</div>
</div>
</div>
</form>
{% endif %}
</div>
</div>
</div>
{% endblock %}
view:
def incluirVendedor(request):
submitted = False
if request.method == "POST":
form = incluirForm(request.POST)
if form.is_valid():
form.save()
return HttpResponseRedirect(reverse('incluirVendedor') + '?submitted=True')
else:
form = incluirForm()
if 'submitted' in request.GET:
submitted = True
return render(request, 'pages/pessoas/incluir.html', {'form':form, 'submitted':submitted})
java script:
$scope.submitForm = function(){
$http({
method: 'POST',
url: '/incluir',
data: $scope.pessoa
}).then(function successCallback(response) {
console.log("Data sent successfully");
}, function errorCallback(response) {
console.error("Error sending data");
});
}
Angular route:
$routeProvider.when("/incluirVendedor/form", {templateUrl: "static/pages/pessoas/incluir.html", controller: "PessoasController"});
url path:
path('incluir', pessoas.incluirVendedor, name='incluirVendedor'),