Help with Javascript / html popup window

For everything that's not in any way related to PureBasic. General chat etc...
User avatar
DeanH
Enthusiast
Enthusiast
Posts: 223
Joined: Wed May 07, 2008 4:57 am
Location: Adelaide, South Australia
Contact:

Help with Javascript / html popup window

Post by DeanH »

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
User avatar
the.weavster
Addict
Addict
Posts: 1536
Joined: Thu Jul 03, 2003 6:53 pm
Location: England

Re: Help with Javascript / html popup window

Post by the.weavster »

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>

User avatar
DeanH
Enthusiast
Enthusiast
Posts: 223
Joined: Wed May 07, 2008 4:57 am
Location: Adelaide, South Australia
Contact:

Re: Help with Javascript / html popup window

Post by DeanH »

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.
User avatar
DeanH
Enthusiast
Enthusiast
Posts: 223
Joined: Wed May 07, 2008 4:57 am
Location: Adelaide, South Australia
Contact:

Re: Help with Javascript / html popup window

Post by DeanH »

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.
User avatar
the.weavster
Addict
Addict
Posts: 1536
Joined: Thu Jul 03, 2003 6:53 pm
Location: England

Re: Help with Javascript / html popup window

Post by the.weavster »

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 ..."
}
User avatar
TI-994A
Addict
Addict
Posts: 2512
Joined: Sat Feb 19, 2011 3:47 am
Location: Singapore
Contact:

Re: Help with Javascript / html popup window

Post by TI-994A »

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>
Texas Instruments TI-99/4A Home Computer: the first home computer with a 16bit processor, crammed into an 8bit architecture. Great hardware - Poor design - Wonderful BASIC engine. And it could talk too! Please visit my YouTube Channel :D
User avatar
DeanH
Enthusiast
Enthusiast
Posts: 223
Joined: Wed May 07, 2008 4:57 am
Location: Adelaide, South Australia
Contact:

Re: Help with Javascript / html popup window

Post by DeanH »

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.
User avatar
DeanH
Enthusiast
Enthusiast
Posts: 223
Joined: Wed May 07, 2008 4:57 am
Location: Adelaide, South Australia
Contact:

Re: Help with Javascript / html popup window

Post by DeanH »

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>

User avatar
the.weavster
Addict
Addict
Posts: 1536
Joined: Thu Jul 03, 2003 6:53 pm
Location: England

Re: Help with Javascript / html popup window

Post by the.weavster »

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' });
User avatar
DeanH
Enthusiast
Enthusiast
Posts: 223
Joined: Wed May 07, 2008 4:57 am
Location: Adelaide, South Australia
Contact:

Re: Help with Javascript / html popup window

Post by DeanH »

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?
User avatar
DeanH
Enthusiast
Enthusiast
Posts: 223
Joined: Wed May 07, 2008 4:57 am
Location: Adelaide, South Australia
Contact:

Re: Help with Javascript / html popup window

Post by DeanH »

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.
User avatar
netmaestro
PureBasic Bullfrog
PureBasic Bullfrog
Posts: 8425
Joined: Wed Jul 06, 2005 5:42 am
Location: Fort Nelson, BC, Canada

Re: Help with Javascript / html popup window

Post by netmaestro »

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.
BERESHEIT
Mathew32
New User
New User
Posts: 2
Joined: Tue Oct 04, 2022 3:14 am

Re: Help with Javascript / html popup window

Post by Mathew32 »

the.weavster wrote: 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 fnf 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 ..."
}
You are right, I forgot to use spider basic, I will try it again
HoosierDaddy
User
User
Posts: 14
Joined: Wed Nov 23, 2022 12:51 am

Re: Help with Javascript / html popup window

Post by HoosierDaddy »

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.
Post Reply