I am using loadingController Ionic2.
`fetchNotificationListAferUserDataget(){
this.loader = this._loadingController.create({
content: "Please wait... Fetching online notifications",
dismissOnPageChange:true
});
this.loader.present();
this._userDataService.getNotificationList()
.subscribe(
(data) => {
this.loader.dismiss();
let status = data.status;
let returnedData = data.json();
console.log(status,returnedData)
if(data.status == 200){
if(returnedData.notifications.length > 0){
this.notifications = returnedData.notifications;
console.log(this.notifications);
this.loader = this._loadingController.create({
content: "Please wait... Fetching your purchased packages"
});
this.loader.present();
this._userDataService.getAllPackageByUser(this.userData.user_id)
.subscribe(
(data) => this.populateUserPackages(data),
(err) => this.showDataFetchErrorFromServer('Unable to fetch user packages')
)
}else if(returnedData.notifications.result == 0){
console.log('no notifications found');
}
}
},
(err) => {
this.showDataFetchErrorFromServer('Unable to fetch notifications')
}
);//end .subscribe
};`
But the problem I am facing is that loader appear and disappear automatically without my calling loader.dismiss();
Does anyone else facing same issue. Any solution for this.
EDIT: Full Function code included. loader dismiss immediately after loader.present(), without any error, but when I call this.loader.dismiss();, it gives me error because loader is already dismissed.
According to this issue, it is caused by triggering the loader.present() on the wrong life-cycle hook. I also had the same problem, where I had the loader loading on the ionViewDidLoad() hook. "The dom is not guaranteed to be ready in ionViewDidLoad and events are not guaranteed to be ready."
Try presenting the loader on the ionViewDidEnter() hook instead.
You need to use setTimeout() for this. Like:
setTimeout(() => {
this.loader.dismiss();
}, 1000);
Also, please do not use the same variable this.loader for creating 2 loaders. Just use a local variable like var loading = this._loadingController.create(). This could create problems in Loading API. In ionic 2 documentation here, it is mentioned:
Note that after the component is dismissed, it will not be usable anymore and another one must be created. This can be avoided by wrapping the creation and presentation of the component in a reusable function as shown in the usage section below.
Related
I've been trying to get a User Feedback dialog to show when I click on a certain button, but I've had some trouble. I successfully got it to work when I make a call my API and end up getting an error shown first.
However I created a button that would trigger a call to Sentry.showReportDialog, but I get a 'Cannot read property 'showReportDialog' of undefined' error. I've tried using Sentry.capture Message/Exception/Error to generate an eventId, but I still got the same error. This is my current code that's failing, but I've modified it a decent amount and was still getting the same undefined error for showReportDialog, even when I tried the method that worked with my API call. This web application is running using Ember.js v3.5.1 and in my package.json the dependency for sentry is
"#sentry/browser": "^4.5.3"
// works
try {
$('.ember-application').addClass('request-loading');
this.model.setProperties(properties);
return yield this.model.save();
} catch (err) {
// Get feedback from user through sentry
Sentry.init({
dsn:'https://ec08003a76fa4b6e8f111237ed3ed8e1#sentry.io/1369772',
beforeSend(event) {
if (event.exception) {
Sentry.showReportDialog({ eventId: event.event_id });
}
return event;
},
});
}
// does not work
try {
throw new Error();
} catch (e) {
var eventId = yield Sentry.captureException(e, function(sendErr, eventId) {
// This callback fires once the report has been sent to Sentry
if (sendErr) {
console.error('Failed to send captured exception to Sentry');
} else {
console.log('Captured exception and send to Sentry successfully');
console.log(eventId);
}
});
console.log(eventId);
Sentry.showReportDialog({ eventId: eventId });
}
The following code ended up working for me
try {
throw new Error();
} catch (e) {
Sentry.init({
dsn: 'https://ec080033425613e7ed3ed8e1#sentry.io/1369772',
beforeSend(event) {
return event;
},
});
var eventId = yield Sentry.captureException(e, function() {});
Sentry.showReportDialog({
eventId: eventId,
});
}
Answer for 2022
If anyone stumbles on this question looking for the answer, please don't use the other answer with yield and everything else. You don't need to generate and catch a fake error just to submit a report to Sentry, but you do need an eventId. You can get that from the return value of Sentry.captureMessage(...) like this:
const eventId = Sentry.captureMessage(`User has some feedback`);
Sentry.showReportDialog({
eventId,
title: 'Want to share some feedback?',
subtitle: 'Great!',
subtitle2: `If not, just click 'close' below.`,
labelComments: 'What would you like us to know?',
labelSubmit: 'Submit Feedback'
});
Obviously, this has to be after you've already called Sentry.init(...) however you do it. You can set the labels however you want and read more about it in the documentation.
If you do it like this, the message "User has some feedback" (or whatever message you use) will appear in your Issues list in Sentry with a blue mark next to it instead of the orangish-red exceptions. That's helps to distinguish it.
I am embedding a power bi report using pupeteer/chromium quite happily and then save that as a screenshot/pdf. However, a late breaking requirement requires me to be able to hook the report's onloaded event.
I have the following code snippet which is the template I use to hook up the event; the report is embedding, but the 'report.on' event is not firing, (In reality I'm trying to set some visuals and other stuff, not just log text.)
await page.evaluate((configdata) => {
const models = window['powerbi-client'].models;
const config = {
...
};
const report = powerbi.embed(reportContainer, config)
report.on('loaded', function () {
console.log('loaded report')
});
},
configdata);
I've looked at "exposeFunction()" but couldn't get it hooked to this event (or others).
Would some please tell me what I'm missing; there must be way to do this, but I'm missing how to tie the report object (instantiated from within the IFrame, to it's event from withing the puppeteer function. However, JS/Node is not my primary discipline, hell it's not even my second!
PS: I know (and have got working) passing filters into to the configuration; but that is not quite good enough from the aethetics point of view (on screen visuals are not set!)
Any help/pointers - very greatly appreciated
We've kept with passing the filters into the configuration whne embedding the report.
short and simple.
To answer the question, you can use page.evaluate and create a Promise which will be resolved when the embed loaded event will be triggered. Then you can await for your loadEmbed function:
async function loadEmbed(page, config) {
return page.evaluate(async (config) => {
await new Promise((resolve, reject) => {
try {
var embedContainer = $('#embedContainer')[0];
var embed = powerbi.embed(embedContainer, config);
embed.off("loaded");
embed.on("loaded", function () {
resolve(true);
});
} catch (err) {
resolve(false);
}
});
}, config);
}
I am using Ionic 2 rc4. I am following the advise here and am trying to do the following:
import { NavController } from 'ionic-angular';
...
this.nav.present(this.loading).then(() => {
However, to me it looks like the NavController does not have a present function, because I get:
[ts] Property 'present' does not exist on type 'NavController'.
any
Am I correct, or am I doing something wrong? How do they get to access this "phantom" function?
Any advise appreciated.
UPDATE
Here is my code that results in the following error (on this.loading.present().then(() => {):
"Cannot read property 'nativeElement' of null"
It presents loading the first time. but after the alert is presented if submit() is run again, it gets this error.
submit() {
this.loading.present().then(() => {
let alert = this.alertCtrl.create({
title: 'Verify Email',
subTitle: 'Please verify your email address before you log in.',
message: 'Check your Spam folder if you cannot find the email.',
buttons: [
{
text: 'Resend',
handler: data => {
firebaseUser.sendEmailVerification().then((data) => {
this.doAlert('Verify Email', 'Verification Email Sent.').then((data) => {
//navCtrl.setRoot(navCtrl.getActive());
});
});
}
},
{
text: 'Okay',
handler: data => {
//navCtrl.setRoot(navCtrl.getActive());
}
}
]
});
alert.present();
this.loading.dismiss();
});
}
Looking at this changelog for Beta 11
They have removed present function from Navcontroller.
You need to refactor your code and use some other function based on your requirement.
this.loading.present()
For the error, check the Loading controller docs.
Note that after the component is dismissed, it will not be usable
anymore and another one must be created. This can be avoided by
wrapping the creation and presentation of the component in a reusable
function
Just do :
this.loading = this.loadingCtrl.create({
//loading properties
});
inside submit() before this.loading.present()
What is equivalent code for $ionicLoading. If I have below code snippet how can I set up loading HUD for every http request in a config file. (i.e. It will automatically add HUD when application calls a web-service)
makePostRequest() {
this.http.post("https://domain/post", "ur=kkr")
.subscribe(data => {
//Done loading, stop!
}, error => {
console.log(JSON.stringify(error.json()));
});
}
Please check this
let loading = Loading.create({
content: "Please wait...",
duration: 3000
});
this.nav.present(loading);
go through loading ionic2 - documentation
I am creating a sample application using ember 1.0 and ember-data 1.0 Beta 2.0. with RESTAdapter to connect to backend server.
When I try to save a record, it always invoke failure handler at the first submission. But the record actually gets saved at backend without fail. From the server the response for submission contains the created entity set with id.
When I try to debug the code in developer tools, it actually goes through the code for route transition, but then it returns back to Add view before completing the transition. It seems to be some callbacks from jQuery global event handlers are causing the problem.
Here is the code I am using
App.AddResourceRoute = App.ResourceManagerRoute.extend(
{
model: function () {
return this.store.createRecord('Resource');
},
actions: {
save: function () {
this.modelFor('AddResource').save().then(function (resource) {
App.Router.router.transitionToRoute('Resources');
}, function (reason) {
alert('Failure reason:' + reason);
});
}
}
});
Please help me to find out what is wrong with my code.
Thanks in advance
I think that you are receiving an error from App.Router.router.transitionToRoute('Resources'); invocation, try to update to the following:
App.AddResourceRoute = App.ResourceManagerRoute.extend(
{
model: function () {
return this.store.createRecord('Resource');
},
actions: {
save: function () {
var route = this;
this.modelFor('AddResource').save().then(function (resource) {
route.transitionTo('Resources');
}, function (reason) {
alert('Failure reason:' + reason);
});
}
}
});
You should use transitionTo(someRoute) inside of a route, or transitionToRoute(someRoute) when inside of a controller