clear old ajax source data from old table instance

frenchmaker

Hi,
Im using angular 6 for developping my application.
i create 3 component with router logic.
That mean that when navigate one component to others. Html is deleted and generated.
So on each component i have each other a table that they get initialize in the function ngOnInit.
Each other have different options and different ajax sources routes.
Each time i navigate to a component the table make a first request to my backend.
But some how when i navigate to another component. he keeps the old ajax source data from the old data initialization and pop some alert error msg with error on colomn x to row x and data x. But the table keeps working. But the alert concern colomn data that i initialize in a old datatable options.

In the ngOnDestroy function i try $('#foo').DataTable().destroy() and $('#foo').DataTable().clear().
I try this method at the end of ngOnInit to see what happend and the table actually get destroy and data clear but like i said somehow when i navigate that spam me an error about a data that dont exist on another table.

Is there a way to add on my router logic to clear complety ajax data?

I hope you guys understand my question, thanks for the help.

*edit: somehow i cant send exemple code maybe to long and cant use playground

colin

Hi @frenchmaker ,

There's a lot going on there, it's hard to understand without seeing it working or at least the code.

There's no reason why the Ajax data should persist. Maybe try destroying all the tables, not just the one in the current component, as you said the error was coming from another table.

Cheers,

Colin

frenchmaker

I have an Nginx server between my api and client maybe the nginx server is caching json response? And i attach a little zip for you to check if you want. i disable my routes security for getting all disk ( delete, edit routes still need a token).

Here my nginx:

map $sent_http_content_type $expires {
    default                    off;
    text/html                  epoch; #means no cache, as it is not a static page
    text/css                   max;
    application/javascript     max;
    application/woff2          max;
    ~image/                    30d; #it is only the logo, so maybe I could change it once a month now
}

server {
        server_name api.chronodisk.ca;
        expires $expires;

        location / {
                try_files $uri $uri/ /index.html =404;
                expires       0;
                add_header    Cache-Control  public;
                add_header    Cache-Control  no-store;
                add_header    Cache-Control  no-cache;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_pass http://localhost:3000;
        }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/app.chronodisk.ca/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/app.chronodisk.ca/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}


server {
    if ($host = api.chronodisk.ca) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        listen [::]:80;
        server_name api.chronodisk.ca;
        return 301 https://$server_name$request_uri;
}

Thanks for help

colin

Hi @frenchmaker ,

If you suspect the cache, you could disable it as shown in this thread.

Cheers,

Colin

frenchmaker

i clear ajax when the component get destroy and when it load my second component i get this error from datatable: Error: Uncaught (in promise): TypeError: Cannot read property 'aDataSort' of undefined.

The table is suppose to re-render and my both table dont have the same id so im not initializing the same table. I dont understand why it keeps old data but im investigating now.

frenchmaker

do you think that can be the editor?

edit*: i dont have editor on my first table so i dont understand

frenchmaker

i found it!! lol
when i initialize a table i was using a variable on the global scope like this:
const dt = $('#dtenattente').DataTable({fooOptions});
but now im using this.dt = $('#dtenattente').DataTable({fooOptions});

i was missing the this. fuk me lol now that work sorry for making you lost time

allan

Thanks for posting back - good to hear you got it sorted

Allan