routerAjaxError event called twice

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');

app.on('routerAjaxError', function(xhr, options) {
  console.log('ajax error');      
  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');

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.

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



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

@shastox here is a minimized example showing the issue.

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

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

  start() {
  complete() {
  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');

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


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.