refresh a page for selected files

[sinus]

Hi

In my script I iterate over all selected images and get, say the names of all of them.

Now, if I click on other images, the old names are still there in the IMatch-app-panel.

I found now on the w3-page a simply "reload-the page" - function:

Code Select Expand

<button onclick="myFunction()">Reload page</button>

<script>
function myFunction() {
    location.reload();
}
</script>

And ... this works fine. 
I have a button, if I click on it, the script reloads and the correct names are here.

Is this a proper way to do so or is this akward?

[Mario]

This is a rather brute-force approach. It not only reloads the page, but it also deletes the state of the page, resets all JavaScript variables etc. Not good.

The right way to do is to open a web socket so your app can receive events from IMatch, like: "Selection in file window has changed.".
The you retrieve the data for the current selection and display it.

Numerous example apps show how this is done, it's also explained in the IMatch developer documentation:

https://www.photools.com/dev-center/doc/imatch/tutorial-imatch-messages.html

This is a fundamental concept. Consider this HTML fragment:

<div id="siinus"></div>

This is an empty div. Somewhere on your page.
When your script runs and has loaded data for files, you change the content of this div.

$('#sinus').text('LaLaLa....');

(In your case you add the file names in an <ul> or so).

Later, when you need to change the information (new files selected). you do the same:

$('#sinus').text('You are not in Kansas anymore!');

Without reloading the page, you change how it looks.

Very important to understand this, and use it. Almost all example apps work that way.

The Sample App: File Window is a good place to see this in action. Load the app in your browser, set a breakpoint at the beginning of the updateInfo function . Read the extensive comments.

[ubacher]

If you want to reload the app you can click on the icon on top right (the two curved arrows) of the app window.
(Unless a modal app)

[Mario]

This has the same bad effect. Causing the browser to reload the app also deletes all state data, all JavaScript variables etc.

[ubacher]

Causing the browser to reload the app also deletes all state data, all JavaScript variables etc.

This may be very desirable - especially if the programmer has not considered from the start that the program may be "restarted"
because the selection was changed in M&F window.

In other words: you need to program differently!

[Mario]

That's what I said.
Reloading a page to refresh is Web Standard from around 2010.  We have much better ways today.

[sinus]

This is a rather brute-force approach. It not only reloads the page, but it also deletes the state of the page, resets all JavaScript variables etc. Not good.

Ups, no, I want not use brute-force. 

The Sample App: File Window is a good place to see this in action. Load the app in your browser, set a breakpoint at the beginning of the updateInfo function . Read the extensive comments.

This sample App seems to do really what I want.
And, ahh, it is not that long, the code. 

I will study it.
Thanks also, Mario, for your explanations, very appreciated!

[sinus]

If you want to reload the app you can click on the icon on top right (the two curved arrows) of the app window.
(Unless a modal app)

Thanks, ubacher, I have overlooked this icon.
But I want try, if I can solve it on a better way, because I use also variables, and I have realised now, that they are then also gone, means will be loaded new.

[sinus]

Phew, your very good answer, Mario, is surely the best way to do so.

But I am simply  not able to do a lot with JS. Too complicated for me. Unfortunately, but sometimes we have to see the truth.

Finally the hint from ubacher is fine enough for me.

Each time, when I select another file, I can click on the refresh button at the head of the app, that is fine for me.
All variables and so on are then gone, but this is, what I need.

The only problem is, that I sometimes forget to do so and then I have a wrong number (because the variables are stored).

What would be the best and easiest way to do, that each time, if I change the file, that the app does automatically refresh?
Like Mario wrote, the brute-force  but in this case this would be the best for me.

But how could I do this, without having clicking on a butten, that it does this automatically each time, when I change the thumb (change the selected file)?

[Mario]

IMatch sends messages to apps, informing them about events. For example, when the selection in the file window changes.
See the documentation for details: https://www.photools.com/dev-center/doc/imatch/tutorial-imatch-messages.html

[ubacher]

The problem I have encountered though when listening to IM messages is that many messages appear for one change.
(In my case the change was a change in the category being displayed.)
I reported on this in https://www.photools.com/community/index.php?topic=7685.msg53707#msg53707

I never managed to find the correct message to get the new category - and gave up trying to find the answer since it was
in an app which is only used to occasionally cleanup some stuff.

.... just something to be aware of!

[Mario]

Please use the App Spy App to monitor messages IMatch sends, and which message to use to detect when the category changes.
IMatch may send many messages, that's normal.

[sinus]

Thanks for your answers.
I will go the brute way and take

location.reload();

I guess, this I will be able to manage, all other things are too complicated for me.

[Mario]

Here is a stripped-down app which does only one thing:

It displays the name of the focused file.

If focused file changes in the file window, the app updates.

1. Download ZIP and extract into the folder

C:\ProgramData\photools.com\IMatch6\webroot\user

2. Open the SuperSimpleApp in an App Panel.

3. Study the code.

[sinus]

Thanks a lot, Mario.
Really very helpful of you! 

I downloaded and install it and I see it works.
Now I will study the code, like you proposed.

I will report here, when I have done this.

[Mario]

I recommend opening the app in your web browser. Open the development tools with <F12>.
Open the index.html in the debugger and set a breakpoint inside the updateContent function. Line 44.
This line is hit after the script has loaded data about the focused file from IMWS.  In line 46 the content of the <div> with the id content is updated. This <div> is in line 18.

In the same way, all apps work. The update existing HTML elements as needed. Some add/remove HTML elements as needed. No page refresh is needed to do that, it is very easy to manipulate HTML from JavaScript. That is what it was designed for. It can now do a lot more of course. Once you have grasped that concept, all things will fall into place. Learning a new concept and programming language is never easy. Not everybody is a programmer, but being able to program IMatch apps is a cool skill