PureBasic Forums - English

Posted: **Sun Jan 16, 2022 2:49 am**

I am working on a browser-based project that uses executables written in PB. My knowledge of html and javascript is limited. I have hit a stumbling block. This isn't really a PureBasic problem but the exe involved is written in it.

I have a html page that has a value displayed and a link which runs an exe program. (See below.) When the link is clicked, the exe is run. I would like values on the page to be updated without having to reload the entire page or load a new page. My problem is: how do I run the exe and then have the value updated without generating a new page?

Every time an exe is run via CGI the webserver expects a new page to be displayed. I would like the exe to run but not display another page, only update the current page.

Example below. The page shows one number 0 and a Change It link. Clicking on the link causes the exe program to be run. It picks up a parameter and changes a value in a sqlite database. That change does not have to be displayed. This part works ok. What then should happen is that the 0 should appear as a 1.

The only info I have found via Mr Google says that a new page must always be produced, either as a popup or another tab. The trick I have tried has a new 'child' page generated by the exe. That child page updates the values on the parent page then the child is removed by going back in the browser's history so it never appears. This seems cludgy and there must be a better way. It also does not change the value on the parent page.

Example parent page accessed via http://mycomputer/folder/test.html
<html>
<head>
<title>Test</title>
</head>
<body>
<p id='tobechanged'>0</p>
<a href="http:pbprog.exe?item=10">Change it</a>
</body>
</html>

The exe picks up the item=10 ok and updates the database. It then generates a response page as a string which is then sent via WriteCGIString in the exe. Here is a bit of the PB code.
A$="<html>"+#CRLF$
A$+"<head>"+#CRLF$
A$+"<title>CPAC</title>"+#CRLF$
A$+"<script type="+#DQUOTE$+"text/javascript"+#DQUOTE$+">"+#CRLF$
A$+" window.opener.document.getElementById('tobechanged')='1';"+#CRLF$
A$+"</script>"+#CRLF$
A$+"<script type="+#DQUOTE$+"text/javascript"+#DQUOTE$+">"+#CRLF$
A$+" history.go(-1);"+#CRLF$
A$+"</script>"+#CRLF$
A$+"</head>"+#CRLF$
A$+"<body>"+#CRLF$
A$+"</body>"+#CRLF$
A$+"</html>"+#CRLF$
WriteCGIHeader(#PB_CGI_HeaderContentType, "text/html", #PB_CGI_LastHeader)
WriteCGIString(A$)

The exe is working. This page is being generated. It doesn't appear in the browser due to the history.go(-1) script. But the value on the parent page is not changing. I am sure there is a more elegant and maybe simpler way to do this. I am just not clever enough to work it out. Searching with Mr Google has not helped. I've worked out how to pass values from a popup child window generated within the parent's html code but I have not been able to include the exe aspect.

Suggetions please?

Posted: **Sun Jan 16, 2022 10:30 am**

If I understood you correctly, use XMLHttpRequest() instead of a link and update needed elements with either getElementsByClassName(), getElementById() or getElementsByTagName(). There are plenty of examples for each, just google by the function name.

Posted: **Sun Jan 16, 2022 9:13 pm**

Thanks deseven. I would prefer to avoid XML and jquery and do it through straight html and basic java or ajax. I have successfully used popups to pass data back to the parent page but they use do not involve running the exe. I will look up XMLHttpRequest but I suspect it would involve a major change to the existing complex parent form page involved. It would be very useful to be able to run the exe (even from a function) and then decide whether or not to update data on the parent or pop up a validation error if needed. I know it can be done, I just do not know how.

Posted: **Sun Jan 16, 2022 10:11 pm**

OK, clearly I do not know enough.

I looked up XMLHttpRequest and have tried some code. It partly works. The '0' is changed to '1' on the page. But the exe is not not executed and the data in the database has not been updated.

I also found out about fetch but what I have tried does not work at all.

Here is the html code for XMLHttpRequest:

Code: Select all

<head>
<title>Test</title>
</head>
<script language="javascript" type="text/javascript">
function update(url){
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
      document.getElementById("tobechanged").innerHTML = '1';
    }
  }
  xhr.open('GET', 'http:bmw.exe?task=unlink&item=500', true);
  xhr.send(null);  const xhttp = new XMLHttpRequest();
}
</script>
<body>
<p id='tobechanged'>0</p>
<button onClick='update("http:pbprog.exe")'>Change it</button>
</body>
</html>

Here is the html code for Fetch:

Code: Select all

<head>
<title>Test</title>
</head>
<script language="javascript" type="text/javascript">
function update(url){
  fetch(url)
  .then((response) => {
    return false;
  })
  .then( => {
    document.getElementById('tobechanged').innerHTML = '1';
  });
};
</script>
<body>
<p id='tobechanged'>0</p>
<button onClick='update("http:pbprog.exe")'>Change it</button>
</body>
</html>

Posted: **Mon Jan 17, 2022 12:21 am**

Got it to work!
(You should have heard the gasp when it did...)

THANK YOU deseven.
XMLHttpRequest() worked.

The following code did exactly what I would like.
- Values on the page were updated without having to open a new page.
- The database was accessed and updated independently without needing another page

Code: Select all

<html>
<head>
<title>Test</title>
</head>

<script language="javascript" type="text/javascript">
 function Unlink() {
    var xhr = new XMLHttpRequest();
    document.getElementById('linknumber').innerHTML = '0';
    document.getElementById('numberofcopies').innerHTML = '1';
    xhr.open('GET','http:pbbmw.exe?task=unlink&item=500',true);
    xhr.send(null);
  }
</script>

<body>
<p id='linknumber'>34582</p>
<p id='numberofcopies'>2</p>
<button onclick=Unlink()>Unlink</button>

</body>
</html>

Now...the next trick is to update the database and get a return value that is put onto the page...

Posted: **Mon Jan 17, 2022 11:58 am**

DeanH wrote: Mon Jan 17, 2022 12:21 am xhr.open('GET','http:pbbmw.exe?task=unlink&item=500',true);

Not sure how a request with such url could work to be honest...

I mean you can't call executables directly, can't you? There should be a web server that handles http requests and sends them to the CGI backend, so the url should be something like http://localhost/pbbmw.exe?task=unlink&item=500
Unless you have pbbmw.exe set up as a domain

In any case, glad that it worked for you!

Posted: **Wed Jan 19, 2022 3:56 am**

I used to think the same thing but I have found the exe can be called directly. Surprised me when I did. It assumes the exe is in the same folder and domain as the page on which it is called. Chrome fills in the missing bit automatically and it seems to work on Firefox and Edge, too. Probably IE as a lot of my users still use that. I've been doing this for years now. It has allowed some apps to be relocated on different hosts/servers without needing code rewrite. I think it is part of relative addressing.

I have not been able to get the fetch function to work -- keep seeing 502 gateway errors. Tried absolute addressing but still had the same error. Same for trying to retrieve a value via Ajax. Spent a day on it and gave up for now.

PureBasic Forums - English

Javascript - updating values on a page

Javascript - updating values on a page

Re: Javascript - updating values on a page

Re: Javascript - updating values on a page

Re: Javascript - updating values on a page

Re: Javascript - updating values on a page

Re: Javascript - updating values on a page

Re: Javascript - updating values on a page