How would I generate POST requests when clicking a button within my html template?

JavaScript
1

I’m making a desktop application using electron. When calling one of my post requests in my index.js file under “app.whenReady()”, i get the status code, hostname of the post request that I’m making which is cool.

The problem I’m having is calling a post request when clicking on one of the buttons within my html index file.

Can someone please clarify what i may be doing wrong- any extra functions or methods that i may need to add in the html template?

Below is the function that I’m currently calling on my app start up (this works fine as its giving me something back within the terminal)

function Connect(server, sId, aId, password) {
  console.log("Creating connection")
  var postData = {Server: server, SId: sId, AId: aId, Password: password}
  var strData = JSON.stringify(postData);
  // creating Json web token
  const token = jwt.sign({strData}, process.env.TOKEN_SECRET, {algorithm: "HS512"}, {expiresIn: 30000});
  MakeRequest('connect', strData); 
}

Below is the code for the post request:

function MakeRequest(path, data) {

  const options = 
  {
     
    method: 'POST',
    protocol: 'https:',
    hostname: '',// I do have a hostname but left it empty
    path: `${path}`,
    rejectUnauthorized: false,
    headers: {
    'Content-Type': 'application/json',
    'Content-Length': 89,
    'authorisation': ''
    
  }  
};

const request = https.request(options, res => {
  console.log(`statusCode: ${res.statusCode}`)

  res.on('data', d => {
    process.stdout.write(d)
  })
})

request.on('response', (response) => {
  console.log(`STATUS: ${response.statusCode}`);
  console.log(`HEADERS: ${JSON.stringify(response.headers)}`);
  response.on('data', (chunk) => {
    console.log(`BODY: ${chunk}`);
  })
  response.on('end', () => {
    console.log('No more data in response.')
  });
});
request.on('error', error => {
  console.error(error)
})

request.write(data, 'utf-8');
request.end();

}

Below is where I would like to call one of my post requests:

  
          <div id="btnlogin" class="standard-button" @onclick="" onmouseenter="hoverMouseOver(event)" onmouseleave="hoverMouseLeave(event)">
            <img src="img/logon.svg" height="100%" width="100%">
            <span class="tooltiptext">Log on</span>
          </div>

So far I have loaded the script within the head of the template:

<script src="commands.js"></script>

I have then tried to call this method using the onclick method but im not getting anything back through the terminal. If i insert an alert within the function im calling, that works fine but the post request just isnt working for some reason.

Can someone please help? Thankyou!!

2

You have to learn about Main and Renderer processes in Electron: https://www.electronjs.org/docs/latest/tutorial/process-model

You’re trying to run nodejs code (Main process code) inside a browser (Renderer process), which is wrong. Instead, you should send IPC message from Renderer to Main, run your business logic in Main and then send the result back to Renderer (via IPC again).

Check this quick tutorial to get started with IPC.

Official docs: ipcMain, ipcRenderer

1 Like
3

Thankyou for the prompt response!, I’ll take a look at this now

EDIT. Dude thankyou so much. All works fine now!

1 Like
4

Try adding defer like:

<script defer src="commands.js"></script>

This defers loading the js file until the DOM has been created(but not yet shown).

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.