Angular code not playing nice with my python django application

Question

For some reason I can't get my angular code to play nice with my python django application. When I submit the page it saves all null values in my db and my get response isn't working correctly either because nothing is returned. Any help will be greatly appreciated, I also included screen shots for a better picture of what I am trying to do.

angular code

var dim = angular.module('Dim', ['ngResource']); 


dim.config(['$httpProvider', function($httpProvider) { 
    $httpProvider.defaults.xsrfCookieName = 'csrftoken'; 
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 
}]); 

dim.factory("Dim", function ($resource) { 
    return $resource("/_dims.html/:id", { id: '@id' }, { 
        index: { method: 'GET', isArray: true, responseType: 'json' }, 
        update: { method: 'PUT', responseType: 'json' } 
    }); 
}) 


dim.controller("DimController", function ($scope, $http, Dim) { 
    $scope.dims = Dim.index() 

    $scope.addDim = function () { 
        dim = Dim.save($scope.newDim) 

        $scope.dims.push(Dim) 
        $scope.newDim = {} 
    } 

    $scope.deleteDim = function (index) { 

        dim = $scope.dims[index] 
        Dim.delete(dim) 
        $scope.dims.splice(index, 1); 
    } 
})

views.py

def add_dimensions(request): 
  if request.method == 'POST': 
    c_date = datetime.now() 
    u_date = datetime.now() 
    description = request.POST.get('description') 
    style = request.POST.get('style') 
    target = request.POST.get('target') 
    upper_limit = request.POST.get('upper_limit') 
    lower_limit = request.POST.get('lower_limit') 
    inspection_tool = request.POST.get('inspection_tool') 
    critical = request.POST.get('critical') 
    units = request.POST.get('units') 
    metric = request.POST.get('metric') 
    target_strings = request.POST.get('target_strings') 
    ref_dim_id = request.POST.get('ref_dim_id') 
    nested_number = request.POST.get('nested_number') 
    met_upper = request.POST.get('met_upper') 
    met_lower = request.POST.get('met_lower') 
    valc = request.POST.get('valc') 
    sheet_id = request.POST.get('sheet_id') 
    data = {} 
    dim = Dimension.objects.create( 
          description=description, 
          style=style, 
          target=target, 
          upper_limit=upper_limit, 
          lower_limit=lower_limit, 
          inspection_tool=inspection_tool, 
          critical=critical, 
          units=units, 
          metric=metric, 
          target_strings=target_strings, 
          ref_dim_id=ref_dim_id, 
          nested_number=nested_number, 
          met_upper=met_upper, 
          met_lower=met_lower, 
          valc=valc, 
          sheet_id=sheet_id, 
          created_at=c_date, 
          updated_at=u_date) 
    data['description'] = dim.description; 
    data['style'] = dim.style; 
    data['target'] = dim.target; 
    data['upper_limit'] = dim.upper_limit; 
    data['lower_limit'] = dim.lower_limit; 
    data['inspection_tool'] = dim.inspection_tool; 
    data['critical'] = dim.critical; 
    data['units'] = dim.units; 
    data['metric'] = dim.metric; 
    data['target_strings'] = dim.target_strings; 
    data['ref_dim_id'] = dim.ref_dim_id; 
    data['nested_number'] = dim.nested_number; 
    data['met_upper'] = dim.met_upper; 
    data['met_lower'] = dim.met_lower; 
    data['valc'] = dim.valc; 
    data['sheet_id'] = dim.sheet_id; 
    return HttpResponse(json.dumps(data), content_type="application/json",) 

  else: 
      return render(request, 'app/_dims.html')

url.py

urlpatterns = [ 
    # Examples: 
    url(r'^$', app.views.home, name='home'), 
    url(r'^contact$', app.views.contact, name='contact'), 
    url(r'^about', app.views.about, name='about'), 
    #url(r'^sheet', app.views.sheet, name='sheet'), 
    url(r'^sheet/(?P<customer_id>\w+)$', app.views.sheet, name='sheet_customer'), 
    url(r'^sheet/sheet_form_create.html$', app.views.sheet_form_create, name='sheet_form_create'), 
    url(r'^sheet/sheet_form_create.html/get_work$', app.views.get_work, name='get_work'), 
    url(r'^sheet/(?P<pk>\d+)/sheet_update$', app.views.update_sheet, name='sheet_update'), 
    url(r'^_dims.html$', app.views.add_dimensions, name='dim_update'), 
    url(r'^sheet/(?P<pk>\d+)/delete_sheet$', app.views.delete_sheet, name='sheet_delete'), 
    url(r'^sheet/sheet_form_create.html/_dim$', app.views.add_dimensions, name='dim'), 
    url(r'^_dims.html(?P<pk>\d+)$', app.views.add_dimensions, name='dim'), 
    url(r'^$', app.views.dimtable_asJson, name='dim_table_url'), 
    #url(r^'grid_json/', include (djqgrid.urls)),

_dims.html

{% block content %} 

  <div class="container" ng-app="Dim"> 
    <h1>Dimensions</h1> 
    <div ng-controller="DimController"> 
      <div class="well"> 
        <h3>Add Dimensions</h3> 
        <form ng-submit="addDim()"> 
          <div class="row"> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.description" placeholder="Description" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.style" placeholder="Style" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.target" placeholder="Target" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.upper_limit" placeholder="Upper Limit" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.lower_limit" placeholder="Lower Limit" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.inspecton_tool" placeholder="Inspection Tool" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.critical" placeholder="Critical" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.units" placeholder="Units" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.metric" placeholder="Metric" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.target_strings" placeholder="Target Strings" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.ref_dim_id" placeholder="Ref Dim Id" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.nested_number" placeholder="Nested Number" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.met_upper" placeholder="Met Upper" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.met_lower" placeholder="Met Lower" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.valc" placeholder="Valc" type="text"></input> 
            </div> 
            <div class="col-xs-6"> 
              <input class="form-control" ng-model="newDim.sheet_id" placeholder="Sheet ID" type="text"></input> 
            </div> 
          </div>     
          <div class="row"> 
            <div class="col-xs-12 text-center"> 
              <br/> 
              <input class="btn btn-primary" type="submit" value="Save Dimension">/</input> {% csrf_token %} 
            </div> 
          </div> 
        </form> 
        <table class="table table-bordered trace-table"> 
          <thead> 
            <tr class="trace-table"> 
              <th class="ts jp" style="border: solid black;">Description</th> 
            </tr> 
          </thead> 
          <tr class="trace-table"> 
            <tr ng-repeat="dim in dims track by $index"> 
              <td class="trace-table" style="border: solid black;">{{ dim.description }}</td> 
            </tr> 
          </tr> 
        </table> 
      </div> 
    </div> 
  </div> 
  <a class="btn btn-danger" ng-click="deleteDim($index)">_</a> 

{% endblock %}.

Daniel Roseman · Accepted Answer · 2016-07-27 12:34:17Z

2

As your network tab screenshot shows, you're sending JSON, not form-encoded data. So in Django you need to use json.loads(request.body) to get the data as a dict, rather than accessing request.POST which will always be empty.

Note that if you're doing something like this, you should almost certainly be using django-rest-framework, which allows you to define serializers and deserializers that will automatically convert your models to and from JSON, and additionally validate the submitted data.

answered Jul 27, 2016 at 12:34

Daniel Roseman

602k68 gold badges910 silver badges923 bronze badges

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

Collectives™ on Stack Overflow

Angular code not playing nice with my python django application

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related