routerAjaxError event called twice

Questions
1

I am testing some error handling and for some reason my event handler is being called twice.

Anyone know why it is being called twice? I also tried putting the event handler on the view and router and I get the same result.

app.on('routerAjaxStart', function(xhr, options) {
  console.log('ajax start');
  console.log(xhr);
});

app.on('routerAjaxError', function(xhr, options) {
  console.log('ajax error');      
  console.log(xhr);	
  app.dialog.alert('We we sorry but we ran into an error.  Please try again later.');
});

app.on('routerAjaxComplete', function(xhr, options) {
  console.log('ajax complete');
  console.log(xhr);
});

I did some debugging and this is what I see in the console.
Interesting thing is the second Error event is being called after the Complete event.

image
image.png1409×315 24.6 KB

Because it’s being called twice I’m getting two dialogs and only want one to show.

Thanks!

v5.3.0

2

Somewhere there is an error in your code. Minimize the code to fix the problem,

3

@shastox here is a minimized example showing the issue.

https://dev.perfectcamp.com/temp/ajaxerror/page1.asp

4

@nolimits4web do you think this is an error? Any idea what I can do to fix it? Thanks!

5

In this case it is kind of by design. You can switch to global request callbacks like:

app.request.setup({
  start() {
    console.log('start');
  },
  complete() {
    console.log('complete');
  },
  error() {
    console.log('error');
  },
});

Or just use only routerAjaxComplete for errors handling too like:

app.on('routerAjaxComplete', function(xhr, options) {
  if (xhr.status === 500) console.log('ajax error');
  else console.log('ajax complete');
  console.log(xhr);
});
6

Thanks @nolimits4web. That is exactly what I needed. Works great!

7

Hello,

Can we use this approach in F7 Vue? If yes were should I put this.
I have try to put it on my view component in main.vue but It doesn’t work.

What I want to do is : add a preloader when each page is opended.