update database from angular-ui-grid

Question

I am trying to change a row in my database when the user clicks the delete button in my angular ui-grid. When the button is clicked, the row should be removed from the grid, and the table in the database should be updated with a value so that the row will no longer appear in the grid, but it will still be in the database (soft-delete). My table is called applicants and has rows id, firstname, lastname, email, position, resume, and deleted. Deleted is a boolean column defaulted to false, if true, the row should not appear in my ui-grid. I have this portion completed, however I cannot get my code to update the deleted column in the database when the button is pressed on the grid. This is the controller for the grid (gets the applicants from the database):

angular.module('myApp')
.controller('gridController',['$scope','$http','$log',function ($scope, $http,$log){

    $scope.deleteRow = function(row) {
        var index = $scope.gridOptions.data.indexOf(row.entity);
        $scope.gridOptions.data.splice(index, 1);


        $http({
            method:'POST',
            url:'/directives/updateApplicant'
        })
    }

    $scope.gridOptions = {
        enableFiltering:true,
        columnDefs: [
            {name: 'id', field:'id'},
            {name:'firstName',field:'firstName'},
            {name:'lastName',field:'lastName'},
            {name:'email',field:'email'},
            {name:'position',field:'position'},
            {name:'resume', field:'resumeFileName', cellTemplate:'<div class="ui-grid-cell-contents"><a href="/directives/resume/{{COL_FIELD}}" target="_self">{{ COL_FIELD }}</a></div>'},
            {name:'delete',cellTemplate: '<button class="btn primary" ng-click="grid.appScope.deleteRow(row)">Delete</button>', enableFiltering:false}
        ]
    }

    $scope.data = []
    $http({
        method:'GET',
        url:'/directives/applicants'
    }).then(function(success){
        $scope.gridOptions.data = success.data;
    },function(reason){
        $scope.error = reason.data;
        $log.info(reason);
    })
}])

when it hits the post route this code runs:

module.exports.updateApplicant = function(req,res){
    applicant.forge({id: '31'})
    .fetch({require:true})
    .then(function(applicant){
        applicant.save({
            deleted:'true'
        })

    .then(function(){
        res.json({error:false,data:{message:'applicant details updated'}})
    })
    .catch(function(err){
        res.status(500).json({error:true, data:{message: err.message}})
    });
    })
    .catch(function(err){
        res.status(500).json({error:true,data:{message:err.message}})
    })
}

this works just fine the only problem is that i have the ID hardcoded. Is there a way i can pass the ID from the selected row in the grid to this variable?

show your server side code that is run when you use that route — SunriseM
– SunriseM, Commented Jan 2, 2018 at 19:39
When you press the button, you need to make a http request (should be POST) to your server to update the database — SunriseM
– SunriseM, Commented Jan 2, 2018 at 19:41

SunriseM · Accepted Answer · 2018-01-03 17:23:43Z

1

Send http request when you click button

    $scope.deleteRow = function(row) {
      var index = $scope.gridOptions.data.indexOf(row.entity);
      $scope.gridOptions.data.splice(index, 1);


      $http({
        method:'POST',
        url:'/directives/updateApplicant',
        data: $scope.gridOptions.data[index],
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
      }).success(function (data, status, headers, config) {
            console.log("success");
      }).error(function (data, status, headers, config) {
           console.log(status);
      })
  }

you need install body-parser and use it as middleware (app.use(bodyParser.urlencoded({ extended: false })) to get the POST body.

module.exports.updateApplicant = function(req,res){

    var bid = req.body.id;         

    applicant.forge({id: bid})
    .fetch({require:true})
    .then(function(applicant){
        applicant.save({
            deleted:'true'
        })

    .then(function(){
        res.json({error:false,data:{message:'applicant details updated'}})
    })
    .catch(function(err){
        res.status(500).json({error:true, data:{message: err.message}})
    });
    })
    .catch(function(err){
        res.status(500).json({error:true,data:{message:err.message}})
    })
}

edited Jan 3, 2018 at 17:23

answered Jan 2, 2018 at 20:36

SunriseM

1,00510 silver badges15 bronze badges

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

2 Comments

Aric Peters Over a year ago

i tried this, i'm getting "TypeError: Converting circular structure to JSON"

Aric Peters Over a year ago

i actually just figured it out right before you updated this. I ended up doing something different from what you just posted but I commented what I had out and tested yours to double check and it works so I will accept the answer. Thank you!

Collectives™ on Stack Overflow

update database from angular-ui-grid

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related