Utilize AJAX within an Angular method

Question

Utilize AJAX within an Angular method

I am encountering 2 issues with the $http function in this particular code snippet.

$scope.buttonClick = function(){
    // Sending input data
        $.post('lib/add_contact.php', $scope.contact, function(data){
            data = angular.fromJson(data);
            if(!data.error){
                $scope.contact = "";
                console.log('success');
            }else{
                console.log('error');
            }
        });

    // Following Code
    console.log('Next Code');
}

The first issue I am facing is that when I try to clear a contact, it doesn't happen immediately. It only clears after I press a key into the input field. If I move

$scope.contact = "";

outside of the POST request, it works as expected.

The second problem is why the POST request is being called last. The current output of the code execution is:

Code Next
success

but I would like the output to be:

success
Code Next

Thank you for any suggestions and solutions!

javascript ajax angularjs http

Answer 1

Answer №1

If you are utilizing jQuery for the ajax call outside of the angular environment, it is essential to trigger a digest cycle for the scope to reflect the changes in your view.

To resolve this issue:

$scope.buttonClick = function(){
    // Send input data
        $.post('lib/add_contact.php', $scope.contact, function(data){
            data = angular.fromJson(data);
            if(!data.error){
                $scope.$apply(function(){ //<-- calling $apply()
                    $scope.contact = "";
                });
                console.log('success');
            }else{
                console.log('error');
            }
        });

    // Next Code
    console.log('Next Code');
}

However, the recommended approach would be to utilize the built-in $http service within angular, which automatically triggers the digest cycle as it is aware of angular.

Utilizing $http (don't forget to add it as a dependency to your controller)

$scope.buttonClick = function() {
    $http.post('lib/add_contact.php', $scope.contact).success(function(data) {
        data = angular.fromJson(data);
        if (!data.error) {
            $scope.$apply(function() { //<-- calling $apply()
                $scope.contact = "";
            });
            console.log('success');
        } else {
            console.log('error');
        }
    });
}

Answer 2

If you are utilizing jQuery for the ajax call outside of the angular environment, it is essential to trigger a digest cycle for the scope to reflect the changes in your view.

To resolve this issue:

$scope.buttonClick = function(){
    // Send input data
        $.post('lib/add_contact.php', $scope.contact, function(data){
            data = angular.fromJson(data);
            if(!data.error){
                $scope.$apply(function(){ //<-- calling $apply()
                    $scope.contact = "";
                });
                console.log('success');
            }else{
                console.log('error');
            }
        });

    // Next Code
    console.log('Next Code');
}

However, the recommended approach would be to utilize the built-in $http service within angular, which automatically triggers the digest cycle as it is aware of angular.

Utilizing $http (don't forget to add it as a dependency to your controller)

$scope.buttonClick = function() {
    $http.post('lib/add_contact.php', $scope.contact).success(function(data) {
        data = angular.fromJson(data);
        if (!data.error) {
            $scope.$apply(function() { //<-- calling $apply()
                $scope.contact = "";
            });
            console.log('success');
        } else {
            console.log('error');
        }
    });
}

Utilize AJAX within an Angular method

Answer №1

Similar questions

Sending an object from Rails to Javascript

"click on the delete button and then hit the addButton

Ruby on Rails: Making an Easy AJAX Call

Accessing object properties using a string for the variable name in Javascript

Trigger a specific directive instance through a function call when a key is pressed on the

Display a YouTube video on a webpage using the URL provided by the server

What is the process for moving entered data from one text box to another text box when a checkbox is selected?

Determining Velocity of an Object in Three.js

Show Zeroes in Front of Input Numbers

Integrate functionality to track elapsed hours in stopwatch timer

How can I make an AJAX request in Rails 3 to retrieve an HTML page?

Executing multiple PHP scripts or requests in parallel

How to remove an event listener that was added within a function in JavaScript?

Visualizing data with a grouped bar chart in D3.js

Communicating Progress Updates from C# to Angular 6 Using HttpPost

How can I dynamically populate a select menu in HTML without the need to submit any data

Having difficulties integrating a login solution due to an error saying "eslint Promise executor functions should not be async no-async-promise-executor"

The axios GET request failed to return a defined value

AngularJS- Efficiently loading components asynchronously within the application

What should I do if one of my images fails to load after the previous one has loaded successfully?