Guide on updating location and reloading page in AngularJS

I have a special function:

$scope.insert = function(){
    var info = {
        'username' : $scope.username,
        'password' : $scope.password,
        'full_name' : $scope.full_name
    }

    $http({
        method: 'POST',
        url: './sys/mac.php',
        data : info
    }).then(function(response){
        return response.data;
    });
}

The function is working perfectly, but I want the page to switch to datalist and automatically refresh after the insert() is successful. The insert() function is executed in the route "localhost/learn/#!/administrator" so I would like it to change to the route "localhost/learn/#!/" once insert() is successful. I tried using location.href='#!/' but it only changes the location without refreshing the datalist automatically.

Answer №1

If you wish to update an object through a service call, the process can be handled as follows. Additionally, an onError function has been included for debugging purposes.

Tip: Explore integrating service calls within an AngularJS framework-provided Service. This approach contributes to crafting maintainable and organized code.

$scope.objectToUpdate;
$scope.insert = function(){
    var data = {
        'username' : $scope.username,
        'password' : $scope.password,
        'nama_lengkap' : $scope.nama_lengkap
    }

    $http({
        method: 'POST',
        url: './sys/mac.php',
       data : data
   }).then(function(response){
        $scope.objectToUpdate = response.data.d;
    }, function(e){
        alert(e); //error handling
    });
   }

Optional Service

Here is an illustration of how Angular Services can be utilized to execute server calls:

app.service('dataService', function ($http) {
    delete $http.defaults.headers.common['X-Requested-With'];
    this.getData = function (url, data) {
        // Using $http() returns a $promise which allows adding handlers with .then() in controller
        return $http({
            method: 'POST',
            url: './sys/' + url + '.php',
            dataType: 'json',
            data: data,
            headers: { 'Content-Type': 'application/json; charset=utf-8' }
        });
    };
});

Subsequently, invoke this service within your controller or any injecting DataService controller:

var data = {
            'username' : $scope.username,
            'password' : $scope.password,
            'nama_lengkap' : $scope.nama_lengkap
        }
 dataService.getData('mac', data).then(function (e) {
    $scope.objectToUpdate = e.data.d;
 }, function (error) {
    alert(error);
 });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with dropdown component in material ui version v1.0 beta 26 encountered

Currently, I am encountering an issue with the dropdown component while using Material UI v1.0 beta.26. In this updated version, you are required to utilize the Select component along with MenuItem. Although my dropdown is successfully populated upon rend ...

Utilize the ng.IFilterService interface within a TypeScript project

I am facing an issue with a .ts file that contains the following code: module App.Filters { export class SplitRangeFilter implements ng.IFilterService { static $inject = ['$filter']; public static factory(): Function { ...

The JQuery function fails to execute following a successful Ajax request

I recently ran into an issue with my Ajax call. Here's the code snippet in question: $("#start-upload-btn").click(function(){ $.ajax({ type: "post", url: "", data: { newProjectName: $('#project-name') ...

Having trouble displaying a set of data points in a React component

Exploring React, I have built a test app and performed an API call to fetch a large JSON object. After breaking it down into 10 arrays with 3 props each, I am now facing a challenge in sending this data to another component. Despite being able to log the ...

problem with creating a django template script

Hello, I am currently working on a code that is responsible for executing various functions within the template. I have utilized scripts to verify these functions using if-else statements and for loops. However, I am encountering some errors during this pr ...

Trouble with AngularJs 1.x causing Bootstrap4 menu toggle collapse to malfunction

Issue with Navbar toggle menu not closing properly. I have attempted the solutions provided here and others in an effort to fix this bug. However, none of them seem to work for me. Here is a snippet of my code: <nav class="navbar navbar-expand-lg ...

Navigate Formik Fields on a Map

Material UI text-fields are being used and validated with Formik. I am looking for a way to map items to avoid repetitive typing, but encountering difficulties in doing so. return ( <div> <Formik initialValues={{ email: '&a ...

When using Selenium to locate an element, it appears to be returning an unexpected empty object

This question has been bothering me for quite some time. I am currently using Selenium in conjunction with Python to find an element within a webpage. The specific element I am targeting is as follows: <a id="topmenu_adhocQtraditional_Reports" ...

Hmm, seems like there's an issue with the touchable child - it must either be native or forward setNativeProps to

Currently enrolled in a ReactNative course on Coursera, I am facing an error in a 4-year-old course: "Touchable child must either be native or forward setNativeProps to a native component." I am unsure about this error and would greatly appreciate any hel ...

How is it possible to encounter a Javascript unexpected token ] error within an HTML code?

While working on my project, I encountered a JavaScript error in the console of Chrome. The error message stated "Unexpected token ]" and it was pointing to a specific line of raw HTML code. I am puzzled about what could be causing this issue. Unfortunatel ...

What is the process of transforming async/await code into synchronous code in JavaScript?

Blocking the event loop is generally considered bad practice due to its consequences. However, even the native fs module includes some synchronous functions for specific purposes, such as CLIs using fs.readFileSync. I am interested in converting the follo ...

Encasing extracted content in <p> tags

On my Wordpress Site, I have extracted images and text separately to use in different sections of my single.php file. Utilizing HTML within the Bootstrap 3 framework: <div class="row"> <div class="col-md-12"> <?php ...

Is there a way to bring together scrolling effects and mouse movement for a dynamic user

If you want to see a scrolling effect, check out this link here. For another animation on mouse move, click on this link(here). Combining both the scrolling effect and the image movement might seem challenging due to different styles used in each templat ...

Creative jQuery hover effects tailored to the size of the viewport

Currently expanding my knowledge of jQuery and encountering an issue with some code. I am trying to incorporate an animation effect (fadeIn/fadeOut) when the user hovers over a specific element. However, if the viewport is resized to below 480px for mobil ...

Is this loader going through a triple loop?

<style> .loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-repeat: no-repeat; background: url('images/page-loader.gif'); } </style> <script src="//ajax.googleapis.com/ajax/libs/jque ...

Is it possible for a draggable position:absolute div to shrink once it reaches the edge of a position:relative div

I am facing an issue with draggable divs that have position:absolute set inside a position:relative parent div. The problem occurs when I drag the divs to the edge of the parent container, causing them to shrink in size. I need the draggable divs to mainta ...

Updating the innerHTML of a button with a specific id using Javascript is not possible due to it being "null."

My objective is to create a button that, when clicked, triggers a function to alter the styling of the HTML tag as well as the text or innerHTML of the button itself. Sounds simple enough, right? Unfortunately... The HTML: <!DOCTYPE html> <html& ...

Tips for positioning HTML elements at the exact mouse location as it moves, without any delay?

Currently, I am in the process of developing a web-based drawing application that does not rely on using a canvas. My decision to avoid using a canvas is because I plan to incorporate CSS Keyframes into the HTML elements upon placement. This approach allow ...

Submitting an array using AngularJS after converting it to a JSON string

I need to send 3 parameters to my PHP web service using the POST method. One of these parameters is an array, so I decided to use JSON.stringify() to convert it into a string before adding it as a parameter. However, the issue is that PHP is not receiving ...

AngularJS selection controls: checkbox and dropdown menus

Can someone provide an example that includes a dropdown menu and checkboxes? The options in the checkbox list should match the data in the dropdown. Once a value is selected from the dropdown, the corresponding checkbox option should be automatically chec ...