Tips for successfully implementing a then function

Question

Tips for successfully implementing a then function

I'm currently working on implementing a delete service in Angular.

Below is my controller code :

app.controller('VoirMessagesController', function($scope, $rootScope, $routeParams, $location,$translate, userService, dataRefreshServices){
    $scope.messageToWatch = dataRefreshServices.getMessageToWatch();


    this.DeleteAMessage = function(){
        dataRefreshServices.SupprimerMessage($scope.messageToWatch).then(function(){
            $location.path('/messages'); // The issue arises here
        });
    };


});

and the corresponding service code:

$this.SupprimerMessage = function(message){
        var retour = true;
        if(message != undefined)
        {
            $translate(['MESSAGES_MESSAGERIE_SUPPRIMER', 'BUTTON_CANCEL', 'MESSAGES_MESSAGERIE_MESSAGE_VALIDATION_SUPPRESSION_TEXTE', 'MESSAGES_MESSAGERIE_MESSAGE_VALIDATION_SUPPRESSION_TITRE']).then(function(translations)
            {
                    var modalOptions = {
                closeButtonText: translations.BUTTON_CANCEL,
                actionButtonText: translations.MESSAGES_MESSAGERIE_SUPPRIMER,
                headerText: translations.MESSAGES_MESSAGERIE_MESSAGE_VALIDATION_SUPPRESSION_TITRE,
                bodyText: translations.MESSAGES_MESSAGERIE_MESSAGE_VALIDATION_SUPPRESSION_TEXTE
                };

                // displaying the modal box
                modalYesNoService.showModal({}, modalOptions).then(function (result) {              

                    var index = _.indexOf(listeMessages, _.find(listeMessages, function (_message) { return _message._id == message._id; }));
                    $this.SupprimerMessageFromServer(message).then(function(promise){
                        listeMessages[index]._id = 0;

                    });
                });
            });
        }
        return retour;
    };

I am encountering the following error:

undefined is not a function
    at DeleteAMessage

I realize that my function does not return a promise, but I am unsure how to rectify this. My goal is to redirect using $location.path only after the user has clicked "yes" in the modal window.

I thought about adding a "then" clause to wait for user input before initiating the redirection.

It seems like I need to create a promise, but I am uncertain of the process. Unlike with $http.get where data is expected, in this case, I just need confirmation when the user clicks "yes".

Thank you

javascript angularjs

Answer 1

Answer №1

Attempting to invoke .then() on a boolean value will not yield the desired result. The AngularJS documentation provides clear and simple examples illustrating the use of $q, which is Angular's implementation of promises.

As stated in the documentation:

// In this hypothetical scenario, let’s imagine that variables `$q` and `okToGreet`
// are accessible within the current lexical scope (whether injected or passed as arguments).

function asyncGreet(name) {
  var deferred = $q.defer();

  setTimeout(function() {
    deferred.notify('Preparing to greet ' + name + '.');

    if (okToGreet(name)) {
      deferred.resolve('Hello, ' + name + '!');
    } else {
      deferred.reject('Unable to greet ' + name + '.');
    }
  }, 1000);

  return deferred.promise;
}

var promise = asyncGreet('Robin Hood');
promise.then(function(greeting) {
  alert('Success: ' + greeting);
}, function(reason) {
  alert('Failure: ' + reason);
}, function(update) {
  alert('Notification received: ' + update);
});

Answer 2

Attempting to invoke .then() on a boolean value will not yield the desired result. The AngularJS documentation provides clear and simple examples illustrating the use of $q, which is Angular's implementation of promises.

As stated in the documentation:

// In this hypothetical scenario, let’s imagine that variables `$q` and `okToGreet`
// are accessible within the current lexical scope (whether injected or passed as arguments).

function asyncGreet(name) {
  var deferred = $q.defer();

  setTimeout(function() {
    deferred.notify('Preparing to greet ' + name + '.');

    if (okToGreet(name)) {
      deferred.resolve('Hello, ' + name + '!');
    } else {
      deferred.reject('Unable to greet ' + name + '.');
    }
  }, 1000);

  return deferred.promise;
}

var promise = asyncGreet('Robin Hood');
promise.then(function(greeting) {
  alert('Success: ' + greeting);
}, function(reason) {
  alert('Failure: ' + reason);
}, function(update) {
  alert('Notification received: ' + update);
});

Answer 3

Answer №2

If you want to enhance the functionality, simply include a callback function parameter in your code.

$this.SupprimerMessage = function(message, callback){
....
/* user pressed ok */
listeMessages[index]._id = 0;
callback();
....
}

$this.DeleteAMessage = function(){
    dataRefreshServices.SupprimerMessage($scope.messageToWatch, function() {
        $location.path('/messages');        
    });
};

Answer 4

If you want to enhance the functionality, simply include a callback function parameter in your code.

$this.SupprimerMessage = function(message, callback){
....
/* user pressed ok */
listeMessages[index]._id = 0;
callback();
....
}

$this.DeleteAMessage = function(){
    dataRefreshServices.SupprimerMessage($scope.messageToWatch, function() {
        $location.path('/messages');        
    });
};

Answer 5

Answer №3

If you want to implement promise in your script using the $q service, here is how you can do it:

$this.DeleteMessage = function(message){
        //var status = true;//no longer necessary
        var defer = $q.defer(); //inject $q into your service using dependency injection - this creates a promise
        if(message != undefined)
        {
            $translate(['MESSAGES_MESSAGERIE_SUPPRIMER', 'BUTTON_CANCEL', 'MESSAGES_MESSAGERIE_MESSAGE_VALIDATION_SUPPRESSION_TEXTE', 'MESSAGES_MESSAGERIE_MESSAGE_VALIDATION_SUPPRESSION_TITRE']).then(function(translations)
            {
                    var modalOptions = {
                closeButtonText: translations.BUTTON_CANCEL,
                actionButtonText: translations.MESSAGES_MESSAGERIE_SUPPRIMER,
                headerText: translations.MESSAGES_MESSAGERIE_MESSAGE_VALIDATION_SUPPRESSION_TITRE,
                bodyText: translations.MESSAGES_MESSAGERIE_MESSAGE_VALIDATION_SUPPRESSION_TEXTE
                };

                // show the modal box
                modalYesNoService.showModal({}, modalOptions).then(function (result) {              

                    var index = _.indexOf(messageList, _.find(messageList, function (_message) { return _message._id == message._id; }));
                    $this.DeleteMessageFromServer(message).then(function(promise){
                        messageList[index]._id = 0;
                        defer.resolve({message:"Message successfully deleted"});
                    },function(){//this is the error callback if you used $http for DeleteMessageFromServer
                        defer.reject({error:"An error occurred while deleting the message"});
                    });
                });
            });
        }
        else{
            defer.reject({error:"No message specified"});//this will trigger the error callback of the promise
        }
        return defer.promise;//return a promise on which you can use .then()
    };

Answer 6

If you want to implement promise in your script using the $q service, here is how you can do it:

$this.DeleteMessage = function(message){
        //var status = true;//no longer necessary
        var defer = $q.defer(); //inject $q into your service using dependency injection - this creates a promise
        if(message != undefined)
        {
            $translate(['MESSAGES_MESSAGERIE_SUPPRIMER', 'BUTTON_CANCEL', 'MESSAGES_MESSAGERIE_MESSAGE_VALIDATION_SUPPRESSION_TEXTE', 'MESSAGES_MESSAGERIE_MESSAGE_VALIDATION_SUPPRESSION_TITRE']).then(function(translations)
            {
                    var modalOptions = {
                closeButtonText: translations.BUTTON_CANCEL,
                actionButtonText: translations.MESSAGES_MESSAGERIE_SUPPRIMER,
                headerText: translations.MESSAGES_MESSAGERIE_MESSAGE_VALIDATION_SUPPRESSION_TITRE,
                bodyText: translations.MESSAGES_MESSAGERIE_MESSAGE_VALIDATION_SUPPRESSION_TEXTE
                };

                // show the modal box
                modalYesNoService.showModal({}, modalOptions).then(function (result) {              

                    var index = _.indexOf(messageList, _.find(messageList, function (_message) { return _message._id == message._id; }));
                    $this.DeleteMessageFromServer(message).then(function(promise){
                        messageList[index]._id = 0;
                        defer.resolve({message:"Message successfully deleted"});
                    },function(){//this is the error callback if you used $http for DeleteMessageFromServer
                        defer.reject({error:"An error occurred while deleting the message"});
                    });
                });
            });
        }
        else{
            defer.reject({error:"No message specified"});//this will trigger the error callback of the promise
        }
        return defer.promise;//return a promise on which you can use .then()
    };

Tips for successfully implementing a then function

Answer №1

Answer №2

Answer №3

Similar questions

Creating a popup using JavaScript in an ASP.NET page can be challenging when it comes to passing values

What is the best method to transfer information from a What You See Is What You Get editor to a database using Vue.js?

The issue of AngularJS $http.get not functioning properly with a jsp page has arisen due to its simplicity

Using AngularJS to incorporate JSON data into a static page without any predefined template

Handling the android back button in a react native application

The issue of integrating jQuery with the textarea CKEditor is still unresolved

Unveiling the Magic: Transforming Objects into HTML Attributes using AngularJS

Determining Whether a Specific Value Exists in the JQuery Selector '.name'

Assign an identifier to the HTML helper Html.EditorFor

What role does the css-loader play in webpack?

The change() function isn't being called in the FooterControl of the nested Gridview

The process of automating e-signature input with Selenium

Add a sound file to the server and configure the images based on the server's response

obtain a jQuery element from a function

Troubleshooting problem with Zscaler and Ajax communication

Fill an HTML div with JSON data obtained from a server

What are the steps to rearrange the order of states in ui-router?

The utilization of useEffect causes the page to go blank

Learn the process of extracting query parameters from a URL with the format `example.com/path#p1=v1&p2=v2...` using Angular

What steps should I take to resolve the issue of 'this.reduce() not being a function'?