PureBasic Forums - English

Posted: **Fri Sep 23, 2022 5:08 am**

I have been working on this little problem for hours and getting nowhere. I am sure there is a simple solution.

This involves html and javascript, although a cgi exe produced with Pure Basic is involved.

I start with a parent page, page1.html (see code below). Click on Popup and the popup window appears with a list of numbers. Click on a number then Submit. The output appears in the popup, but I would like the popup to close and the output to appear as the next page in the parent tab. I can successfully transfer a choice from the popup to the parent but in this case I would like a new page generated. I have also tried using fetch to run the exe but that has not worked, either.

Ms Google has not been helpful. I am doing this with basic CGI using html and javascript only. I am using the IIS webserver with a virtual directory set to handle CGI. Other apps are working fine.

Thanks.

Code: Select all

<!-- This is the start window opened in the browser. Click on Popup. It opens the popup window and fills it with popup.html -->
<html>
<head>
<title>Popup test</title>
</head>
<script language='javascript' type='text/javascript'>
  function popupwindow(url, windowName, w, h) {
    const x = window.top.outerWidth / 2 + window.top.screenX - ( w / 2);
    const y = window.top.outerHeight / 2 + window.top.screenY - ( h / 2);
    window.open(url,windowName,'width='+w+',height='+h+',top='+y+',left='+x+'');
  }
</script>
<script language='javascript' type='text/javascript'>
  async function dopopup() {
    popupwindow('popup.html', 'Level', 200, 300);
  }
</script>
<body>
Click below to trigger popup window<br>
<br>
<button id='levelbtn'>Popup</button>
<script language="javascript" type="text/javascript">
  document.getElementById("levelbtn").addEventListener("click", dopopup);
</script>
</body>
</html>

Code: Select all

<!-- This is the popup.html code. It calls an exe compiled with PureBasic. -->
<html>
<head>
<title>Popup</title>
<style type=text/css>
  .a11 {font-family:arial;font-size:11pt;font-weight:normal;color:#000000;}
  .button {width:75px;height:23px;}
</style>
</head>
<body>
<script language='javascript' type='text/javascript'>
function doSubmit() {
  var doc = window.opener.document,
  theForm = doc.getElementById("theForm"),
  theForm.submit();
  window.close();
  }
</script>
<form id='theForm' action='popuptest.exe' method='get'>
<p class='a11'>Choose:</p>
<Select name='List' id='List' size='10' style='width:180;' class='a11' ondblclick='doSubmit()'>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
</Select>
<br>
<br>
<input type='submit' name='send' value='Submit' onClick='doSubmit()'>
&nbsp;
<button class='button' onclick='javascript:window.close()'>Cancel</button>
</form>
</body>
</html>

Code: Select all

;This is the cgi exe called by the popup. It makes a page that is to appear in the parent tab, not the popup
;PopupTest.pb
;Compile as PopupTest.exe
If Not InitCGI() Or Not ReadCGI()
	End
EndIf
a$=CGIVariable(#PB_CGI_QueryString)
i$="<html>"+#CRLF$
i$+"<head>"+#CRLF$
i$+"<title>Popup next page</title>"+#CRLF$
i$+"<body>"+#CRLF$
i$+"Here is the next page!<br><br>"+#CRLF$
i$+a$
i$+"</body>"+#CRLF$
i$+"</html>"+#CRLF$
;CreateFile(0,"d:\bmv10\test.html")
;WriteStringN(0,i$)
;CloseFile(0)
WriteCGIHeader(#PB_CGI_HeaderContentType, "text/html", #PB_CGI_LastHeader)
WriteCGIString(i$)
End

Posted: **Sat Sep 24, 2022 10:47 am**

Imo it's much easier to have multiple forms within the same HTML document than it is to have multiple HTML documents and try to maintain state between them.

Here's a simple demo to illustrate the concept:

Code: Select all


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>SPA</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <style>
    .form {
        height: 800px;
        width: 450px;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 40px 1fr;
    }
    .form-header {
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 60px;
        grid-gap: 5px;
        padding: 2px 5px 0px 0px;
        background-color: lightsteelblue;
    }
    .form-title {
        padding: 10px 0px 0px 10px;
    }
    .form-body {
        height: 100%;
    }    
    .nav-button {
        height: 35px;
        width: 60px;
    }    
    #form-1-body {
        background-color: thistle;
    }
    #form-2-body {
        background-color: powderblue;
    }
    </style>
</head>

<body>
    
    <div id="form-1" class="form">
        <div class="form-header">
            <span class="form-title">Form 1</span>
            <button id="btn-next" class="nav-button">
                <i>Next</i>
            </button>
        </div>
        <div id="form-1-body" class="form-body">

        </div>
    </div>
    
    <div id="form-2" class="form">
        <div class="form-header">
            <span class="form-title">Form 2</span>
            <button id="btn-back" class="nav-button">
                <i>Back</i>
            </button>
        </div>
        <div id="form-2-body" class="form-body">

        </div>
    </div>
    
<script>
    window.app = {};
    var app = window.app;
    
    app['showForm'] = function(form_id) {
        var forms = document.getElementsByClassName("form");
        for(var i = 0; i < forms.length; i++){
            forms[i].style.display = "none";
        }
        document.getElementById(form_id).style.display = "grid";
    };
    
    document.getElementById('btn-next').addEventListener('click', function(evt) {
        window.app.showForm('form-2');
    });
    
    document.getElementById('btn-back').addEventListener('click', function(evt) {
        window.app.showForm('form-1');
    });
    
    app.showForm('form-1');
</script>
	
</body>

</html>

Posted: **Sat Sep 24, 2022 10:01 pm**

Thank you for that code. Is what I asked is even possible? If so, how, regardless of the overhead. It is easy enough to pass data between a popup and parent pages and to even reload the parent page from a popup but I have not found out how to generate a next parent page. I am working on what will become a big system/app and am finding css and javascript difficult. Things that should work often don't. Or what is posted on the net, such as Stackoverflow, simply do not work. Or the tutorials are poorly presented.

Posted: **Sun Sep 25, 2022 12:52 am**

Perhaps it might help if I clarified where I am going with this.

I have a page on which there is a button called "Categories".
A user clicks on it.
An exe is run that collects a list of category values from a database.
A popup or modal window appears showing the list of categories. The exe generates the page code.
User clicks on a category entry in the list then on Submit or OK. (There's also cancel)
The chosen entry is then passed onto another exe which uses that value to collect a list of records.
The exe generates the code for the next page containing the results.
The popup or modal closes.
The list of records found is then presented as the next page.

Doing this in PureBasic as a regular program is easy. But I need to do it via a browser page.
I have been able to do everything except the last step.
The exe's are called in a function using fetch before opening the popup.
I have been able to get a choice from a popup put back into a field on the parent page. That works fine using self.openr.document .
I have not been able to get the page generated by the 2nd exe to appear in the parent window. It always appears in the popup.

This is something like a login process, too.
I am happy to use a modal instead of a popup. The end result should appear in the next page.

Any help, examples, etc, that can get me there would be greatly appreciated.

Posted: **Sun Sep 25, 2022 12:51 pm**

DeanH wrote: Sat Sep 24, 2022 10:01 pmIs what I asked is even possible?

Sure, you could do it that way... if you're a masochist

Imo multiple html files is a road to misery.

DeanH wrote: Sat Sep 24, 2022 10:01 pmI am working on what will become a big system/app and am finding css and javascript difficult. Things that should work often don't.

JS is OK but CSS does come with some quirks and defaults that can drive you bonkers, you think you've explicitly stated something and it's being ignored but it's really to do with the context. I found layouts a real nightmare before CSS Grid was introduced.

DeanH wrote: Sun Sep 25, 2022 12:52 amDoing this in PureBasic as a regular program is easy.

Then why not use SpiderBasic with JSON-RPC as the middle bit between PB (server side) and SB (client side)?

Request:

Code: Select all

{
    "service": "serviceName", // not part of the JSON-RPC standard but commonly used
    "method": "methodName",
    "params": { "name1": "value1", ... },
    "id": "ABC123"
}

Response:

Code: Select all

{
    "id": "ABC123",
    "error": null,
    "result": "whatever ..."
}

Posted: **Sun Sep 25, 2022 2:18 pm**

DeanH wrote: Sun Sep 25, 2022 12:52 amI have a page on which there is a button called "Categories".
A user clicks on it.
An exe is run that collects a list of category values from a database.
A popup or modal window appears showing the list of categories. The exe generates the page code.
User clicks on a category entry in the list then on Submit or OK. (There's also cancel)
The chosen entry is then passed onto another exe which uses that value to collect a list of records.
The exe generates the code for the next page containing the results.
The popup or modal closes.
The list of records found is then presented as the next page.

If I've understood correctly, the initial selections are done, and the results have been returned. The only remaining step is to display the results on the next page.

Technically, the next page comes from another URL altogether, and unless the server has some way of maintaining the results along with the session cookie, there is no simple way of passing data from one URL to another. You could explore XHR or perhaps even iframes; but here's a simple technique that might just meet your requirements. The DOM contains two distinct divisions that are simply shown or hidden via JavaScript, mimicking a page change:

Code: Select all

<!DOCTYPE html>
<html>
    <body>
        <div id="Page1"; style="display:block; padding: 20px; min-height:800px; background:cyan">
            <h1>Parent Page</h1>   
            <p onclick="showOption(1)" style="cursor:pointer">Select first option</p>
            <p onclick="showOption(2)" style="cursor:pointer">Select second option</p>
            <p onclick="showOption(3)" style="cursor:pointer">Select third option</p>
        </div>
        <div id="Page2"; style="display:none; padding: 20px; min-height:800px; background:yellow">
            <h1>Results Page</h1>  
            <p id="results"></p><br>
            <p id="back" onclick="backToParent()" style="cursor:pointer">BACK TO PARENT PAGE</p>
        </div>        
    </body>
    <script>
        function backToParent() {
            document.getElementById("Page1").style.display = "block";
            document.getElementById("Page2").style.display = "none";
        }
        function showOption(selected) {
            document.getElementById("Page1").style.display = "none";
            document.getElementById("Page2").style.display = "block";
            let resultsText = document.getElementById("results");
            switch(selected) {
                case 1:
                    resultsText.innerHTML = "You've selected option 1.";
                    break;                    
                case 2:
                    resultsText.innerHTML = "You've selected option 2.";
                    break;                    
                case 3:
                    resultsText.innerHTML = "You've selected option 3.";
                    break;
            }                                                   
        }
    </script>
</html>

Posted: **Mon Sep 26, 2022 12:14 am**

Thank you for the suggestions.

Spider Basic is not an option I can use.

Yes, it is just the last step. Could it have something to do with opener?

I am successfully using popups that allow users to choose a value from a list which is then put into a field in the parent form. That works fine.

Posted: **Mon Sep 26, 2022 5:27 am**

I think I have done it using a model for the popup. Below is the html page. It calls the same exe as in my original post above, "Test2.exe". Took a bit to figure out how to close the modal before the next page is displayed.

Unfortunately I can't query the database when the "Choose" button is clicked as I would like. That's the next thing to tackle. Then to have multiple popups for different fields.

I still think there should be a way to do what I originally hoped using regular popups.

Code: Select all

<html>
<head>
<title>Popup test</title>

<style>
body {font-family:Arial,Helvetica,Sans-serif;font-size:12pt;background-color:#00ffff;}
.a11 {font-family:arial;font-size:11pt;font-weight:normal;color:#000000;}

.modalbackground {display:none; position:fixed;z-index:1;padding-top:100px; left:0; top:0; width:100%; height:100%; overflow:auto;  background-color:rgba(0,0,0,0.4);}

.modal-content {background-color:#ffffff; margin:auto; padding:20px; border:3px solid #0000ff; width:280px;}
.close {color:#aaaaaa; float:right; font-size:28px; font-weight:bold;}
.close:hover,.close:focus {color:#000; text-decoration:none; cursor:pointer;}
</style>

</head>

<script>
function doSubmit() {
  modal.style.display = "none";
  window.opener.document.getElementById("theForm").submit();
}
</script>

<body>

Click below to trigger popup window<br>
<br>
<button id="levelbtn">Choose year level</button>

<div id="Modal" class="modalbackground">
  <div class="modal-content">
    <span class="close">&times;</span>
    <form id="theForm" action="test2.exe" method="get">
    <p>Select level:</p>
    <Select name="list" id="list" size="12" style="width:210px;">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>E</option>
      <option>K</option>
      <option>P</option>
      <option>S</option>
      <option>T</option>
    </Select>
    <br>
    <br>
    <button id="chooselevel" onClick="doSubmit()">OK</button>
    </form>
  </div>
</div>

<script>
  var modal = document.getElementById("Modal");
  var btn = document.getElementById("levelbtn");
  var span = document.getElementsByClassName("close")[0];
  btn.onclick = function() {modal.style.display = "block";}
  span.onclick = function() {modal.style.display = "none";}
  window.onclick = function(event) {
    if (event.target == modal) {modal.style.display = "none";}
    }
</script>

</body>
</html>

Posted: **Mon Sep 26, 2022 10:29 am**

DeanH wrote: Mon Sep 26, 2022 5:27 am Unfortunately I can't query the database when the "Choose" button is clicked as I would like.

Some ideas:

Alter your CGI to return JSON data instead of HTML.
Use Bliss JS (or similar) as a helper library ...

Using Bliss to fetch data:

Code: Select all

// submit a JSON request to our CGI API
var req = JSON.stringify( { "service": "categories", "method": "getMembers", "params": { "categoryId": "XYZ" } } );
$.fetch("/", {
	method: "POST",
	responseType: "json",
	data: req
}).then(function() {
	// create elements from the response data and insert them in the DOM
}).catch(function(error) {
	console.error(error, "code: " + error.status);
});

Using Bliss to remove/add elements to the DOM:

Code: Select all

// remove existing items of class category ...
$.remove($$('.category'));

// create a new element of class category ...
var ct = $.create('div', { 
    className: 'category',
    contents: { 'textContent': 'whatever...' }
});

// add element to an existing container ...
$.inside(ct, $('#categories'));

Using Bliss to hide/show a "form"

Code: Select all

$$('.form').forEach(function(elem) {
    $.style(elem, {'display': 'none'});
});
$.style($('#main'), { 'display': 'grid' });

Posted: **Tue Sep 27, 2022 1:45 am**

Sorry, that looks even more confusing. Is there an answer to my original question? Is it possible to submit a form in a popup window and have the resulting output page redirected back to the parent page and close the popup? How?

Posted: **Tue Sep 27, 2022 5:02 am**

Did it! I was on the right track with opener but didn't have the correct syntax.
The output page from the form submission in the popup can be sent back to the parent by including in the parent a form tag which will open the resulting page. The popup references the id of the form.

The "parent" or main page's code is ... (I saved it as MainPage.html)

Code: Select all

<html>
<head>
<title>PopupTest</title>
</head>

<script language='javascript' type='text/javascript'>
  function popupwindow(url, windowName, w, h) {
    const x = window.top.outerWidth / 2 + window.top.screenX - ( w / 2);
    const y = window.top.outerHeight / 2 + window.top.screenY - ( h / 2);
    window.open(url,windowName,'width='+w+',height='+h+',top='+y+',left='+x+'');
  }
</script>
<script language='javascript' type='text/javascript'>
  async function dopopup() {
    popupwindow('popup.html','Level',200,300);
  }
</script>

<body>

Click below to trigger popup window<br>
<br>
<button id='levelbtn'>Popup</button>

<script language="javascript" type="text/javascript">
  document.getElementById("levelbtn").addEventListener("click",dopopup);
</script>

<form action="test4.html" method="get" id="firstPageForm">
</form>

</body>
</html>

The popup page's code is below. It is saved as "Popup.html". The function "popupwindow" in the main page opens this page.

Code: Select all

<html>
<head>
<title>Popup</title>
<style type=text/css>
  .a11 {font-family:arial;font-size:11pt;font-weight:normal;color:#000000;}
  .button {width:75px;height:23px;}
</style>

</head>

<script language='javascript' type='text/javascript'>
function doSubmit(inputID) {
  window.opener.document.forms["firstPageForm"].submit();
  window.close();
  }
</script>

<body bgcolor='#e3e3e3'>

<form id='theForm' action='test2.exe' method='get'>
<p class='a11'>Choose:</p>
<Select name='List' id='List' size='10' style='width:180;' class='a11' ondblclick='doSubmit()'>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
</Select>
<br>
<br>
<input type='submit' name='send' value='Submit' onClick='doSubmit()'>
&nbsp;
<button class='button' onclick='javascript:window.close()'>Cancel</button>
</form>

</body>
</html>

The popup calls the same exe as coded in my original post. It is saved as "test2.exe". It generates a results page called "test4.html".

This worked! The popup appears. The user can select an entry from the click. When OK is clicked, the popup closes and the resulting page generated by the exe appears next after the main page. I stumbled upon the syntax for the opener line in the popup by accident while searching.

Thank you very much the.weavster and Ti-99 for your suggestions. I have also spent a whole work day on the modal approach and have somehow been able to get two different modals working from the same page.

BTW, I still have an old Sega 3000 8-bit comp in the storeroom. It was a MSX machine that wasn't. I think the video chip is the same used by the TI-99 but the CPU was Z-80. Back in 1984 I sold some programs to a large publisher here in Australia for that computer.

Posted: **Fri Sep 30, 2022 7:45 am**

I've done a few projects with similar requirements. For those I used PHP with MySql and javascript, and jquery for the gadgets. It all melds nicely together to make a cohesive and robust system.

Posted: **Fri Nov 25, 2022 12:45 pm**

Hello.

I'm new here and won't be posting any JavaScript code, but I used to be a classic asp coder for a few companies back in the day. Maybe your approach is the problem. Usually, but not always JavaScript is for the front end. Scope is hard in a web environment. Have you thought about passing the values as cookies and then using the resulting cookie values to get the mission accomplished so to speak. I don't know enough about JavaScript to say, but it would seem that JavaScript only has enough scope for the page loaded so to speak. If it can work with sessions or server scope, then you can use those on the backend with server variables or session or cookie variables to hopefully do what you need. I know this is vague, but thought maybe you might want to hear my suggestion.
Good luck.

PureBasic Forums - English

Help with Javascript / html popup window

Help with Javascript / html popup window

Re: Help with Javascript / html popup window

Re: Help with Javascript / html popup window

Re: Help with Javascript / html popup window

Re: Help with Javascript / html popup window

Re: Help with Javascript / html popup window

Re: Help with Javascript / html popup window

Re: Help with Javascript / html popup window

Re: Help with Javascript / html popup window

Re: Help with Javascript / html popup window

Re: Help with Javascript / html popup window

Re: Help with Javascript / html popup window

Re: Help with Javascript / html popup window