linking API calls to buttons in my html document. (electron)

Socks93 · Dec 7, 2021

So ive been given a task to link api calls to the frontend, however when I attempt to call the method using the "onclick" function nothing is happening. I've loaded the Javascript file within the head of the html document and also input the function name but still nothing is happening.

Can anyone please give me some sort of direction as to where I might be going wrong? really would appreciate it!

Head of html file.:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="toolbar.js"></script>
    <script type="text/javascript" src="commands.js"></script> // this is the js file I want to use
    <title>Document</title>
</head>

This is where I'm trying to call the function within the commands.js file.:

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

This is how im calling the button in the commands.js file.:

function login(remoteDN)
{
  var login = document.getElementById('btnlogin')
  login.addEventListener('click', () => {
    var data = {RemoteDN: remoteDN};
    //var postData = new Login(RemoteDN)
    JSON.stringify(data);

Socks93 · Dec 7, 2021

I'm working on the backend of an application and I want to create different endpoints and link these to each of the buttons in a toolbar. Can someone please tell me the best way to do this by maybe giving me a simple example to get me started and some helpful articles from online?

below is what I currently have, am I heading in the right direction?....whenever I try and trigger this from a button nothing appears in the console.

C#:

function login(remoteDN)
{
  var login = document.getElementById('btnlogin')
  login.addEventListener('click', () => {
    var data = {RemoteDN: remoteDN};
    //var postData = new Login(RemoteDN)
    JSON.stringify(data);
  

    const request = net.request({
      method: 'POST',
      protocol: 'https:',
      hostname:  'fire.qa.local',
      port: 443,
      path: `/login`,
      headers: {
      'Content-Type': 'application/json',
      'Content-Length': data.length
    }
  });

  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('finish', () =>{
      console.log("Request has finished")
    })
    response.on('end', () => {
      console.log('No more data in response.')
    });
    response.on('error', (error) =>{
      console.log("Error has occured")
    })
  });
  request.write(data);
  request.end();

  });

HTML code with onclick function:

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

Apologies if I've made any silly mistakes, im very new to all of this and just need some advice. Thank you!

Skydiver · Dec 7, 2021

All the code you presented above look to be for JavaScript and HTML. How is this a C# question?

Skydiver · Dec 7, 2021

Looks like a JavaScript question rather than a C# question.

Skydiver · Dec 7, 2021

First thing I would check is to see if the POST that your AJAX call is doing is actually hitting the backend and if a response is sent back. What does the DevTools, or Fiddler, or Charles say?

Skydiver · Dec 7, 2021

Merged two threads about essentially the same problem, but only had part of the puzzle in each thread.

Skydiver · Dec 7, 2021

Perhaps, I'm missing something, but the point of an Electron app is to have something running locally on your own machine. Why would you need to login? Shouldn't you just use the current user's identity/credentials?

It's like having to logon to Teams or Slack... oh wait...

linking API calls to buttons in my html document. (electron)

Socks93

Active member

Socks93

Active member

Skydiver

Skydiver

Skydiver

Skydiver

Skydiver

Similar threads

Share this page

Latest posts