Reload view after AJAX call

Help Requests
1

I am trying to fill a form with data that I get from an AJAX call.

I have the promise fulfilling, and the data is being returned.

I am trying to call a reload of the page with the following code:

      reloadCustomer()
      {
        console.log('reloading');

        this.router.navigateToRoute(
          this.router.currentInstruction.config.name,
          this.router.currentInstruction.params,
          { replace: true }
        );
      }

I am calling reloadCustomer() from within the async function that is getting the data:

            return self.httpClient
            .fetch(url)
              .then(async (response) => {
                let aris_idObj = await response.json(); 
                console.log( 'response: ', aris_idObj ); 
                this.customerRecord = 
                  await this.getCustomerData(aris_idObj.customerData.aris_id);      
                  //console.log( 'customerData 1: ', this.customerData );
                  this.reloadCustomer();
                  return this.customerRecord;
              });

my route in app.js:

{
        route: 'customer', 
        name: 'customer', 
        moduleId: PLATFORM.moduleName('customer'), 
        nav: true, 
        title: 'Customer',
        activationStrategy: activationStrategy.invokeLifecycle,
        settings: {dropdown: true}
      },

I can see that it is hitting the reload function, but the page is not reloading with the data filled in.

What am I missing?

1 Like
2

In this case, navigateToRoute will only invoke lifecycle functions and would be similar to calling:

canDeactivate()
canActivate()
deactivate()
activate()

And since you’ve already loaded customerRecord before retriggering activation, its unlikely (but possible) that these 4 methods will change something on the page. typically these are used for loading/persisting data and confirming navigation. attached/detached are typically used doing custom rendering.

Perhaps you can share with us what you were expecting to see and what you’re actually experiencing as well as how that’s implemented

1 Like
3

I have a form that I want to load information on a customer from an AJAX call, and then allow the user to edit that form and save the information back to the database.

I think I figured out the answer to the reload thing?

I put:

<template if.bind="customerRecord">
<customer info>
</template>

And that prevented it from loading until the customerRecord Ajax call is finished.

Is this the appropriate way to do it?

Thanks.

1 Like
4

That is certainly a legit way of handling this. You can imagine having:

<template if.bind="customerRecord">
   <customer info>
</template>
<template else>
   <span>loading....</span>
</template>

And that makes perfect sense. however if you go this route, then there is no need to call your current reloadCustomer implementation. instead you could do something like this:

this.customerRecord = null; // This will  trigger the loading placeholder to appear again
this.customerRecord = await .... // Once this is resolved, the loading placeholder will be swapped out with the custom element
1 Like
5

That’s awesome.

How would I update this form again?

Say someone enters a new cust_num and fires off the getCustomerRecord() function?

1 Like
6

I’d suppose there is very little for you to change, if someone calls getCustomerRecord then the old record will be unset, which will update the UI back to the loading screen and triggers a load in the background, once that returns with the actual customerRecord, the UI will update again presumably displaying that. Aurelia has fine examples of how templating works, e.g. http://aurelia.io/docs/tutorials/creating-a-contact-manager. I suggest you go over that since it certainly helps in understanding what’s going on

1 Like
7

Thanks. I was reading that app already, because I figured it would help me figure things out.

So I didn’t need to add extra handling to the code, because it already loads and reloads when I enter a new number to be searched for.

1 Like