Navigate to a different HTML file following a JavaScript function in Ionic and AngularJS with Cordova

I am currently creating an Android application in Cordova Tools for Visual Studio using Ionic and AngularJS.

My goal is to redirect to another HTML page once my function has completed its execution, but I'm having trouble getting it to work correctly.

Here's the function:


if (id == null || id == undefined) {
    contact.save(saveSuccess, saveError);
}
else {
    contact.save(upSuccess, upError);
}

function saveSuccess(newContact) {
    id = newContact.id;
    table.insert({ contactid: id, firstname: name.givenName, lastname: name.familyName, homephone: phoneNumbers[0].value, mobilephone: phoneNumbers[1].value, email: emails[0].value });
    alert("Contact Saved.");
    window.location("#/managermenu");
}

And here is my $routeProvider code:


droidSync.config(function ($routeProvider) {
    $routeProvider

    .when('/', {
        templateUrl: 'app/pages/main.html',
        controller: 'mainController'
    })

    .when('/addcontact', {
        templateUrl: 'app/pages/addcontact.html',
        controller: 'managerController'
    })

    .when('/editcontact', {
        templateUrl: 'app/pages/editcontact.html',
        controller: 'managerController'
    })

    .when('/deletecontact', {
        templateUrl: 'app/pages/deletecontact.html',
        controller: 'managerController'
    })

    .when('/managermenu', {
        templateUrl: 'app/pages/managermenu.html',
        controller: 'managermenuController'
    })

    .when('/settings', {
        templateUrl: 'app/pages/settings.html',
        controller: 'settingsController'
    });
});

I have limited experience with Angular and JS, so I might be overlooking something crucial...

Answer №1

Give the $state a try. Does this method function properly?

function saveSuccess(newClient, $state) {
        id = newContact.id;
        table.insert({ contactid: id, firstname: name.givenName, lastname: name.familyName, homephone: phoneNumbers[0].value, mobilephone: phoneNumbers[1].value, email: emails[0].value });
        alert("Client Saved.");
        $state.go('/managermenu');
    }

An additional state provider is also required.

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('managermenu', {
    url: '/managermenu',
      views: {
        'managermenu': {
          templateUrl: 'templates/managermenu.html',
          controller: 'ManagerMenuCtrl'
        }
      }
    });

});

Answer №2

It is recommended to use $location instead of $state.

function saveSuccess(newContact, $state) {
    id = newContact.id;
    table.insert({ contactid: id, firstname: name.givenName, lastname: name.familyName, homephone: phoneNumbers[0].value, mobilephone: phoneNumbers[1].value, email: emails[0].value });
    alert("Contact Saved.");
    $location.path('/managermenu'); 
}

This is how the route provider should be set up:

.config(function ($routeProvider) {
$routeProvider

 .when('/managermenu', {
    templateUrl: 'app/pages/managermenu.html',
    controller: 'managermenuController'
   }); 
});

Answer №3

Using $location.path("/managermenu") as an alternative to $state is a viable option for navigating to a different state within the application.

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

Using AngularJS 1 to create a universal search filter for all values stored in an Array or JSON object

I am currently working with an outdated version of AngularJS (1.x). I have a JSON object containing various key/value pairs. Is there a way to filter based on any of the values in the array? I am looking to implement a global search input field where users ...

Tips for recognizing users in socket.io?

I'm currently developing a chat application with socket.io. However, one issue I am facing is identifying the sender of a message. Unlike in Express where we have the "req" (request) variable to easily identify users, socket.io does not provide such f ...

PHP + MySQL + JavaScript for an Interactive Web Communication Platform

My goal is to develop a Web Chat system using PHP, MySQL, and JavaScript. Currently, I store messages in a MySQL database with an incremental ID (indexed), timestamp, sender, and message. To retrieve new messages, I use AJAX to query the database every 50 ...

Leverage information stored in an array within the HandsonTable Angular directive

Some of my columns in a HandsoneTable created using Angular directives are not rendering when I try to use an array as the data source with common array notation (name[0]). I'm unsure if this is supposed to work like this or if I am doing something wr ...

Setting default date and time for Bootstrap datetimepicker only in the expanded calendar view

Here is the setup: $(function () { $('#datetimepicker').datetimepicker({ defaultDate: moment(), sideBySide: true }); }); This configuration allows setting a default date & time when no value is provided for the f ...

What is the best way to enhance an object using a class in ES6?

In an effort to improve the clarity of my ES6 class definition, my current code looks like this: class SomeClass { constructor({a, b, c, d, e}) { this.a = a; this.b = b; this.c = c; this.d = d; this.e = e; // additional code here ...

Navigating with Next.js Router: Dynamic URLs and the power of the back button

Utilizing the Router from the package next/router allows for a dynamic URL and loading of different content on the page: Router.push('/contract', `/contract/${id}`); An issue arises where the back button does not function as expected after runni ...

Utilizing AngularJS to Extract JSON Data from Gzipped Files Stored Locally via Ajax

Currently, I am attempting to retrieve and read a JSON file that is stored in data.gz using AngularJS's $http service. However, when I make the request, all I get back are strange symbols and characters as the response. My application is being run loc ...

Deciphering a JSON array by value or key

I have a JSON array that I need to parse in order to display the available locations neatly in a list format. However, I am struggling with where to start. The data should be converted to HTML based on the selected date. In addition, a side bar needs to s ...

Guide on executing MySQL queries in AngularJS with the help of the Laravel 4 framework

I am having issues executing MySql Queries in the Laravel framework using AngularJS. I am currently unable to successfully delete a database record through the button functionality. The existing code is able to insert data into the database, retrieve data ...

using javascript to animate multiple div elements

In my current project, I am harnessing the power of Javascript to incorporate some eye-catching animation effects on a rectangle. Once the animation is complete, I have set the box to disappear from view. Check out the code snippet below for more details: ...

Eliminating duplicate data submissions with jQuery Ajax

Encountering an issue with my jQuery AJAX submission process. JavaScript: $('#myform').submit(function () { if (validateEvenInputs()) { $('#btnevent').attr('disabled', 'disabled'); function ...

The behavior of a fixed position in Flexbox varies when comparing Chrome to Safari and Firefox

In Chrome, the following code works as expected, with the list element positioning itself at the very left of the .PageContainer when scrolling down. However, in Safari and Firefox, the list element positions itself just after the logo. Are there any CSS r ...

Suggestions for a JavaScript tool that automatically crops images

Is there a tool available, either browser-based or in Java, that can analyze an uploaded image, identify different characters within it, and crop them out into separate images? For instance, if this image contains three unique runic symbols, I would like ...

Issue with Angular 7: In a ReactiveForm, mat-select does not allow setting a default option without using ngModel

I have a Angular 7 app where I am implementing some reactive forms. The initialization of my reactive form looks like this: private initFormConfig() { return this.formBuilder.group({ modeTransfert: [''], modeChiffrement: [' ...

What is the behavior of the JavaScript event loop when a Promise's resolution is tied to setTimeout?

console.log('1') setTimeout(() => { console.log('2') }, 0) function three() { return new Promise(resolve => { setTimeout(() => { return new Promise(resolve => resolve('3')) },0) ...

Tips for controlling the embla carousel based on breakpoints in a React application

Trying to toggle the Embla Carousel on and off based on different breakpoints using the React version. I have attempted to initialize it for mobile and destroy it for tablet upwards, but it seems like the reinitialization is not working as expected. I su ...

Obtain the registration ID for Android to enable push notifications by utilizing PushSharp

I am currently utilizing the PushSharp library and have come across deviceToken in the sample code provided on this link. Could someone kindly assist me on how to obtain this deviceToken? The PushSharp sample code does not clearly explain this. apnsBrok ...

Replace the typical bootstrap text class with stylish and modern google material icons

As a newcomer to the world of javascript, I acknowledge that my approach may not be ideal... I'm attempting to modify the color of a material icon upon clicking it. Essentially, I want to toggle it on and off. The challenge lies in the code's in ...

Please refresh the page in order to utilize the newly updated cookies

I have a specific process that involves: A button triggers the function fcn1 and redirects to a page called p1 Function fcn1 retrieves 6 strings from a backend SQL database The 6 strings are then stored in cookies Page p1 reads the 6 cookies and displays ...