Search code examples
angularjsnode.jsonblur

Display notification after field was changed (Angular and node)


I have an input field whose value gets updated in the database when the focus is lost (using onblur). What I would like to do is add a notification that tells the user that the value was changed.

My code so far:

HTML

<input type="text" ng-model="allsettings.pin" ng-blur="update_pin()">
<div class="alert-box notification"><span>Update: </span> {{pin_notification}}</div>

JS

$scope.update_pin = function() {
            if ($scope.allsettings.pin != undefined) {
                $scope.loading = true;
                //IF VALUE IS VALID, CALL THE UPDATEPIN FUNCTIONn
                Todos.updatepin($scope.allsettings)
                    //IF SUCCESSFUL, GET VALUE
                    .success(function(data) {
                        $scope.loading = false; 
                        $scope.formData = {}; //CLEAR FORM SO THAT USER CAN ENTER NEW DATA
                        $scope.allsettings.pin = {type : $scope.todos[0].pin}; //PASS VALUE IN OUR SCOPE    
                        $scope.allsettings.pin_notification = {type : $scope.todos[0].updated_pin}; //PASS VALUE IN OUR SCOPE
                    });
            }
        };

Update on the database

//API UPDATES PIN FOR THIS USER, RETURNS STATUS
exports.update_pin = function(req, res) {


    var pin = req.body.pin; //GET PIN VALUE FROM POSTED PARAMETER
    var response = {};
    response.updated_pin = "Your pin was updated to "+pin;

    models.login_data.update(
        {pin: pin},
        {where: {username: global_user}}
    ).then(function (result) {
        res.send(response);
    }).catch(function(error) {
        console.log('error');
    });

 };

I see that the value gets updated and the response contains the message I want to display. But This message never gets displayed.


Solution

  • Last two lines in success callback should be

    $scope.allsettings.pin = $scope.todos[0].pin;
    $scope.allsettings.pin_notification = $scope.todos[0].updated_pin;
    

    And in html last line should be

    <div class="alert-box notification"><span>Update: </span> {{allsettings.pin_notification}}</div>