I want to add a row in database, after that, reload current page to update new data, but when I use $state.reload(), all page becomes dark and I cannot interact with this page.
DeviceService.addDevice($scope.newDevice).then(function (result) {
if (result.data.success) {
flash.success = result.data.message;
// current state is 'profile' and I want to reload to update data
$state.go('profile', {}, { reload: true });
} else {
flash.error = result.data.message;
}
});
After reload, from this:
becomes this:
UPDATE:
I think maybe it's because I use a modal to add device. Are there anyway to fix it ? How can I close the modal before reload the state. I am using bootstrap modal inside file profile.html
try following:
$state.reload();
and if will not work try this:
$state.transitionTo($state.current, $stateParams, {
reload: true,
inherit: false,
notify: true
});
Related
I have a page: customers, where I have a list of customers.
There I have a button to edit the informations'customers.
When I click on this edit button I open a modal in another page: CustomerDetail.
So clicking in editing button I can modify the data in the modal, and when I save date I have a problem. Basically the info in the page customers are not update until I refresh the page.
So in my customerDetail.page.ts, when I click on save:
onUpdateCustomer(customer){
//...code...
updateCustomer.pipe(untilDestroyed(this)).subscribe(
(data) => {
this.loading = false;
this.showingUpdateMessage = true
this.goToCustomers();
},
(error) => {
console.log("error - update customer ", error);
}
);
}
I have tried using goToCustomers but it doesn't work properly
goToCustomers(){
this.router.navigate(["/customers"])
}
I Would not use window.location.reload() but I don't know how to do to have updated data without reload the page.
Imagine to have a page with a table (customers page), when click on edit button I call the other page CustomerDetail as:
openCreateCustomerPage() {
this.router.navigate(["/customerDetails"], {
queryParams: { customerCreate: true },
});
So I open the modal.
When I press refresh in a page, I want to show this modal:
But I want to prevent the page to reload except if I click the continue button.
This is the code
import dialog from '#catapulthealth/catapult-dialog';
.
.
.
componentDidMount() {
window.addEventListener('beforeunload', this.showModal);
}
showModal() {
return (
dialog({
title: 'We are processing your file',
body: 'Importing will continue even if you leave the page',
buttons: {
ok: 'Continue',
},
})
);
}
dialog, comes from a private library. How can I stop reloading the page?
You can use Cookie once you clicked on Button, so when page reloads you have to check whether the cookie is set or not. On the basis of cookie, you can show hide popup. Please check following code reference.
import cookie from "react-cookie";
setCookie() => {
let d = new Date();
d.setTime(d.getTime() + (minutes*60*1000));
cookie.set("onboarded", true, {path: "/", expires: d});
};
I have recently taken on the development of web app that has been written in AngularJS. In one of the files, myApp.js, there is a provider that is defined as follows:
.provider('myAppConf', function($routeProvider){
var constants = {
'HOMEPAGE': '/alarms',
...
};
// Setter function for constants
this.setConstant = function(constant, value){
constants[constant.toUpperCase()] = value;
};
...
// Other setter functions
...
// Non- setter/ getter functions:
this.addElementOverview = function(){
...
var location = 'pages/elementbrowser';
...
return '/' + location;
}
function addCreatePageRoute(){
$routeProvider.when('/pages/create', {
page: {
editable: true,
title: {
...
},
layout: {
...
},
widgets: [
...
]
}
});
}
// More non- setter/ getter functions
this.$get = ['$q', '$timeout', 'myAppUI' function($q, $timeout, myAppUI){
...
}];
}).run(function(...){
...
});
On most of the pages on the site, there is a 'settings' button, which opens a dialog box that the user can use to change the settings for a given page. I have added a checkbox to that dialog box, which, when checked, I want to use to set the page on which it is checked as the 'home' page, overwriting whichever page was previously the 'home' page. If/ when the checkbox is deselected again, the home page should be set back to its original value (i.e. the /alarms page determined in the constants).
As things currently stand, I have managed to change the home page, so that it is updated to the page selected by the user- when the click 'Home' they are taken to the page on which the checkbox was selected. But as soon as they log out, their chosen home page is forgotten, and when they log in again, the default home page is their home page until they select another one.
I now want to set the user's default home page to whatever they choose as their custom home page, and am trying to use the 'setter function for constants' that is defined in the provider function above.
I have done this by calling:
myAppConf.setConstant(myAppConf.HOMEPAGE, $location.path());
when the 'Confirm' button is pressed on the dialog box (with the 'set as homepage' checkbox checked).
However, when I press the 'Confirm' button, I get a TypeError in my console which says:
TypeError: myAppConf.setConstant is not a function
I don't understand why I'm getting this error... setConstant() is defined as a function with:
this.setConstant = function(constant, value){...};
so why is the console stating that it's not a function? How can I fix this?
Edit
The function where I'm calling myAppConf.setConstant() is defined in Pages/ctrls.js as follows:
angular.module('myApp.pagse')
...
.controller('LayoutCtrl', function($scope, $route, $location, $timeout, Page, myAppConf, NotifyMgr, DialogMgr,myAppUI){
...
$scope.confirm = function(e){
...
if($scope.checkboxModel){
...
myAppConf.setConstant(myAppConf.HOMEPAGE, $location.path());
}else{
console.log("homepage not changed");
}
};
setConstant is myAppConfProvider method, not myAppConf. If it should be available both in config and run phases, it should be defined on both a provider and an instance:
.provider('myAppConf', function(){
...
var commonMethods = {
setConstant: function (constant, value) {
constants[constant.toUpperCase()] = value;
},
...
}
Object.assign(this, commonMethods, {
$get: function () {
return commonMethods;
}
})
})
A cleaner way to do this is to use constant:
.constant('myAppConf', {
_constants: { ... },
setConstant: function (constant, value) {
this[constant.toUpperCase()] = value;
},
...
})
Since getters and setters can be considered antipattern unless they are justified, a KISS alternative is just:
.constant('myAppConf', {
'HOMEPAGE': '/alarms',
...
})
I am using Ionic 2.
Page 1 (SearchPage) -> popover -> Page 2 (MapPage) -> Page 1 (SearchPage) (menuToggle not working)
I have a root page (SearchPage):
html
<ion-header>
<ion-navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
ts
presentPopover(event: Event): void {
let popover: Popover = this.popoverController.create(SearchPopOverPage, {
ev: event,
employeeModel: this.employeeModel
});
popover.present();
}
Popover
presentFilterMap(event: Event) {
this.viewCtrl.dismiss().then(() => {
this.nav.push(MapPage, {
ev: event,
employeeModel: this.employeeModel,
fromSearch: true
})
});
}
But when I try return to the root page (with a parameter), it displays the menu toggle button (3 lines), but when I click it it does not work (i.e. does nothing, where it should display the side menu).
ts (MapPage) file which returns to root:
this.nav.insert(0, SearchPage, {
employeeModel: this.employeeModel
});
If I try popToRoot(options), this works and the menu toggle button is working. However, it does not reload the page with the new parameter.
Any ideas how I should navigate back to the root page with a parameter please?
Thanks
UPDATE:
I have tried the following, but it does not go back to the root:
let options = {
employeeModel: this.employeeModel
};
this.nav.popToRoot(options);
UPDATE:
I have also tried changing the popovers call to the next page, but with little success. Now the back button on the MapPage works, but when I go to the root page, the menuToggle is still not responding to clicks.
presentFilterMap(event: Event) {
this.nav.push(MapPage, {
employeeModel: this.employeeModel,
fromSearch: true
}).then(() => {
this.viewCtrl.dismiss();
});
}
If I don't dismiss the popover,
this.nav.push(MapPage, {
employeeModel: this.employeeModel,
fromSearch: true
});
then when I use the back button on the MapPage back to root, the popover is still there, and the menuToggle works as expected. But if I rather navigate back to the root page (which I need to do) then the popover is not there and the menuToggle is not responsive.
This means the issue is to do with the popover.
import { App } from 'ionic-angular';
constuctor(public app: App) {};
pushSignupPage() {
this.viewCtrl.dismiss().then(() => {
this.app.getRootNav().push(SignupPage);
});
}
this work for me. good luck
SOLUTION: Use events to handle the parameters and pop to root
let data = {
eModel: this.eModel
};
events.publish('employee:update', data);
this.nav.popToRoot();
In your SearchPage constructor:
events.subscribe('employee:update', (data) => {
//do whatever you need to do with your data:
let EModel = data[0].eModel;
});
when you navigate back from map page to search page
use :
this.navCtrl.push(SearchPage, { employeeModel: this.employeeModel });
I'm using angular-confirm to display confirmation messages in a lot of places in my app. For example:
$confirm({
text: 'content',
title: 'title text',
ok: 'Yes',
cancel: 'No'})
.then(function() {
doSomething();
});
I want to globally change the layout in which these dialogs appear in the app. I know that angular-confirm allows you to make a global change like this:
$confirmModalDefaults.templateUrl = 'path/to/your/template';
However, this also overrides the template for all $modal.open() calls, which is not what I want.
I think that the way to do this is by a using a provider to append a template url to every $confirm call in the app but I'm not sure exactly how to do that.
How do I create a provider for $confirm and append a templateUrl parameter to every call?
Figured it out:
function config($provide) {
$provide.decorator('$confirm', confirmProvider);
}
/* #ngInject */
function confirmProvider($delegate) {
return function (data, settings) {
if (settings && !settings.template && !settings.templateUrl) {
settings.template = '<div>my confirm content</div>';
} else {
settings = {
template: '<div>my confirm content</div>'
}
}
return $delegate(data, settings);
};
So now, when $confirm() gets called with data and/or settings, it will apply my custom template unless it's been specified by the caller