Something like:
...
success: function(result) {
document.getElementById("simpleGUI").setAttribute("path", url + "data/");
document.getElementById("simpleGUI").setAttribute("files", result);
buildGUI("simpleGUI");
}
...
Important is that attributes are set before buildGUI is called.
It uses attributes to create GUI elements - including combo box with list of files.
Also remove empty attributes from the div:
<div id="simpleGUI">
loading scripts ...
</div>
I have already tried it, but it hasn’t worked.
BTW. “buildGUI is not defined” when “remoteFileList” is being defined.
You should move remoteFileList into module part. Like:
<script type="module">
import { buildGUI } from '../jsroot/modules/gui.mjs';
function remoteFileList() {
const username = "me"
const password = "my"
const url = "https://" + username + ":" + password + "@remote.machine/server/"
$.ajax({
url: url + "utilities/listRootFiles.php",
type: "POST",
success: function(result) {
document.getElementById("simpleGUI").setAttribute("path", url + "data/");
document.getElementById("simpleGUI").setAttribute("files", result);
buildGUI("simpleGUI");
}
});
}
remoteFileList();
</script>
Many thanks for your help.
I have finally understood the problem … and a simple solution is to set “async:false” (I modified the “index.htm” in my first post here so that it can be “successfully re-used”):
$.ajax({
async: false,
Note: this generates a harmless “Web Console” output warning: “Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/”
I didn’t want to modify the “module part” as this is something specific to the current JSROOT version (so it may change in the future, and then I would again need to fight with my custom modifications).
It is not modification of module part. You just executing your code before calling buildGUI.
Using async: false may be problematic - modern browsers always complain when sync HTTP requests are used.
But it is up to you.
Well, I am reading ROOT files from another server, so I need to use the “CORS Everywhere” plugin (for Firefox).
Can I add something in my “index.htm” to enable CORS?
I can use the “Open File” option of the web browser, instead of running a “localhost” server, if that helps.
Can I somehow enable CORS on my"localhost" server (i.e., “python3 -m http.server”)?
I’ve found some scripts on the Internet that create another server that enables CORS, so this may be a solution.
Hi,
See code I am using with http.server with JSROOT.
It adds extra headers for CORS. You can do the same approach.
Regards,
Sergey
Thanks. That’s more or less what other scripts are doing, too.
However, I am trying to tinker with a solution for “inexperienced users”, and I started to think the “Open File” approach (i.e., no “localhost” server) will be easier for them.
So, is there anything I can add to the “index.htm” itself?
No, it must be settings of server itself.
Or “CORS everywhere” plugin for browser
Well, if I use “File Open” (i.e., “file://”) in the browser, then this browser is the “server”, too.
On the other hand, the “CORS Everywhere” plugin (and there exist other similar plugins) is just a big javascript, I guess.
So, I’ve been thinking that some heavily cut-down version might exist that could be incorporated into a user’s file (just for this file).
Most probably, CORS Everywhere just changes configuration of web browser. Which are browser-specific.
Maybe yet another question.
In my “index.htm”, I explicitly embed the “username” and “password”.
They are needed for both, getting the list of “files” and then accessing them with the full “path”.
Is there any simple way to ask the user to provide the required credentials at “run time”, like the usual “this site is asking you to sign in” dialog window?
I have tried the following:
type: "POST",
xhrFields: { withCredentials: true },
Unfortunately, this only works when getting the list of “files” in the “remoteFileList” function. The given credentials are not (re)used in the “simpleGUI” when it accesses the “path” later.
As I see, you code user and password into path attribute for the files.
You want that this information will be requested when opening the file?
But in principle you can edit full file URL directly in the GUI.
Each access to the “remote server” requires user credentials.
The “listRootFiles.php” script returns a list with several tens of “files”.
Then the “simpleGUI” always needs to combine the remote “path” with one of the “files”.
Using the “xhrFields’” setting (explicit “username” and “password” variables are removed, of course), I can easily get the “This site is asking you to sign in” dialog window (and then the “php” script executes fine).
But I do not know how to “retrieve” / “propagate” the given credentials in the “success: function(result)”.
Its full specification says: “success: function(result, textStatus, jqXHR)”
I’ve been thinking that I could maybe “retrieve” the credentials from the jqXHR (jQuery XMLHttpRequest), but I failed (perhaps it just needs someone who is much more familiar with javascript).
I am not sure if credentials, provided by the user, can be received in plain form - it would major security violation.
Normally browser reuses credentials provided once for particular server for the following HTTP requests.
But I am not an expert how it can be properly configured for all situations.
I understand I cannot get the credentials in the “plain form”.
But maybe one could still retrieve the “Authorization” header, which looks like “Basic some_Base64_string”.
Well, I also tried another approach.
Before running the “remoteFileList” function, which gets the list of “files”, I added a separate:
<script>$.ajaxSetup({xhrFields: { withCredentials: true }})</script>
This works fine for any later “ajax” calls, but … unfortunately, it does NOT work in the later JSROOT calls (i.e., JSROOT doesn’t see that it should run “withCredentials”).
So, I am looking for some way to get the “This site is asking you to sign in” dialog window “at startup” and then use the provided credentials in my own “ajax” calls and then also in the JSROOT calls.
JSROOT does not using ajax function from jQuery - just plain XMLHttpRequest.
May be it has some extra settings which should be specified to reuse credentials provided before.
As I can see, there is withCredentials property.
I will provide soon method which will optionally enable such property.