CSS Loader before SQL

[SnRoma5]

Hi,

I want to show a loader before the SQL.
How can I achieve this?

If I call my function for the CSS-Loader in the renderer.js the loader will display only after the SQL:

function getReportrenderer(){
loader("show");
window.model.getReport($('#Report_month').val());
loader("hide");
}

Thank you in advance!
SnRoma5

[patrickmoffitt]

Hi,

You may (or may not) have a misconception about the order of operations in JavaScript. Commands in JavaScript are not guaranteed to execute in the order you call them. JavaScript is an Event Driven Programming Language rather than an Imperative Programming Language. As a JavaScript programmer it is up to you to determine the order of operations by Implementing Callback Functions.

From the foregoing it should now be clear to you that you should add a callback function as a parameter to your CSS-loader function and then use it to call your model function after your CSS-loader does its thing.

I hope these notes are helpful to you. I wrote this code as a way to help others learn programming. I hope you find it useful.

Cheers,
Patrick Moffitt

[SnRoma5]

Hi, thanks for your quick reply, I add a callback function as a parameter of my CSS-Loader function. But if I call it the loader will show only after the model function has finished. It looks like the App is rendering only after the model function. This is my CSS- Loader function with a callback. function loader(e, callback){ if(e == "show"){ loader_count += 1; $("#slider").removeClass("d-none"); }else if(e == "stop"){ loader_count -= 1; if(loader_count == 0){ $("#slider").addClass("d-none"); } } console.log('CSS-loader function is called but not displayed'); callback(); } In this video you can see my problem: https://www.dropbox.com/s/1ogpu00pswaqsj1/CSS-Loader.mp4?dl=0 I'm new to programming. So thank you for your patience! Am Do., 7. Nov. 2019 um 15:40 Uhr schrieb Patrick Moffitt < notifications@github.com>:

…

Hi, You may (or may not) have a misconception about the order of operations in JavaScript. Commands in JavaScript are not guaranteed to execute in the order you call them. JavaScript is an Event Driven Programming Language <https://en.wikipedia.org/wiki/Event-driven_programming> rather than an Imperative Programming Language <https://en.wikipedia.org/wiki/Imperative_programming>. As a JavaScript programmer it is up to you to determine the order of operations by Implementing Callback Functions <https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced> . From the foregoing it should now be clear to you that you should add a callback function as a parameter to your CSS-loader function and then use it to call your model function after your CSS-loader does its thing. I hope these notes are helpful to you. I wrote this code as a way to help others learn programming. I hope you find it useful. Cheers, Patrick Moffitt — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2?email_source=notifications&email_token=ANWTNQJWP74FXCVXSJBZD2DQSQSEDA5CNFSM4JKGDIY2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDMTWEI#issuecomment-551107345>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANWTNQJ7XOO3UBL2WNI4Y63QSQSEDANCNFSM4JKGDIYQ> .

[patrickmoffitt]

Hi,

I can't tell how to help you from the video. Sorry. Instead I'll offer you some general advice that may help you find a solution on your own.

It's important that you take the time to understand what the application does before making changes to it. One thing to note is that the DOM is created in main.js when model.initDb is called (see main.js line 25). This function is defined in /app/model.js starting on line 75. It's job is to open an existing healthy database or create a new one. Afterwards it executes the callback which loads the /app/html/index.html DOM stub. The rest of the DOM is composed and rendered in render.js when it's called from this DOM stub.

In render.js cheerio is used to compose the body HTML element. This element is fully ready to render at line 32 and them inserted into the DOM at line 33. Line 35 uses the document.ready event to load and paint people data when the new body element and the rest of the DOM are ready.

From the foregoing it should now be clear to you that you can use cheerio to manipulate the body element before you insert it into the DOM. This could allow you to adjust the #slider d-none CSS class before the body element is rendered.

If that event is too early then take a closer look at the document.ready function. On line 36 it calls model.getPeople. This function is defined on line 118 of /app/model.js. It's job is to query the database for people and pass the data to view.showPeople for display on line 126. This function is defined on line 5 of /app/view.js. It does some last minute CSS class juggling before it displays the people data. See the call to removeClass on line 22 and the call to addClass on line 23 before the call to show on line 24?

I hope the above is helpful to you. Good luck with your project.

Cheers,
Patrick Moffitt