Click on link when page isn't fully loaded not working

Help Requests
1

I have a strange behavior that I’m not sure where else to turn to.

I noticed that when I clicked on a link to a new page/route within the app and the current page/route is not fully loaded, that it won’t fully take me to that page.

Logging indicates that it takes me to the page, but continues firing from the original page, and I don’t know if this is intended behavior?

It’s within a promise, so I’m wondering if this is the reason?

Basically, I am loading a customer with a promise, and then I clicked on the Search button to take me to the search page, because I realized I needed something else to look at.

When I did this, it took me to the search page, but continued firing from the promise, and loaded up parts of the customer page/route within the search page.

I’m unsure how to track for this and correct the behavior.

Right now, I have some basic code on the router:navigation:complete event to try to help, but it’s not helping.

Here’s the code:

`
this.consolEvent = this.ea.subscribe(‘router:navigation:complete’, async event => {
this.busy.off();

    var isSearch = document.location.href;

        if (isSearch.match('customer'))
        {
          var newUrl = isSearch.replace(/\d+$/, this.debtor_id);

          if (this.dbtr)
          {
            this.consolidations = [];

             if (this.dbtr.report_as)
            {
                this.consolidations = await this.getConsolidations(this.dbtr.debtor_id);

                this.consolidationsLoaded = 1;
            }
          }

          if (this.state.searchObj.wlTypeRadio == 'invoice')
          {

            this.state.searchObj.newSearch = 0;
            this.state.searchObj.debtor_id = this.debtor_id;
            this.state.searchObj.invoice = params.invoice_number;
          }

          else if (this.state.searchObj.debtorIds)
          {
            this.state.searchObj.newSearch = 0;
          }            
        }
        else if (isSearch.match('search'))
        {
          console.log('to search');
          this.router.navigateToRoute('search');
        }
  });

`

Any tips or thoughts appreciated.

2

so to recap:

  1. you start loading a promise to resolve a customer which when done will render something to you screen
  2. while the load is performed you did a new search which navigates away
  3. meanwhile the customer promise resolved and renders but now in the wrong context of the search results page

is that right?

if so, and you’re using aurelia-fetch to query for the result, what you want to achieve is to abort the fetch request. there is a standard AbortController available and aurelia fetch supports that out of the box. take a look at this unit test to see how its used. fetch-client/http-client.spec.ts at 9e16ac6875c622261a0014dc593b23c313ae16f4 · aurelia/fetch-client · GitHub

essentially in your search route you’d abort any ongoing fetch, thus making any active request fail and the promise reject.

3 Likes