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

Aaron.soggi92

Member
Joined
Oct 22, 2021
Messages
18
Programming Experience
Beginner
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);
 

Aaron.soggi92

Member
Joined
Oct 22, 2021
Messages
18
Programming Experience
Beginner
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

Staff member
Joined
Apr 6, 2019
Messages
5,488
Location
Chesapeake, VA
Programming Experience
10+
All the code you presented above look to be for JavaScript and HTML. How is this a C# question?
 

Skydiver

Staff member
Joined
Apr 6, 2019
Messages
5,488
Location
Chesapeake, VA
Programming Experience
10+
Looks like a JavaScript question rather than a C# question.
 

Skydiver

Staff member
Joined
Apr 6, 2019
Messages
5,488
Location
Chesapeake, VA
Programming Experience
10+
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

Staff member
Joined
Apr 6, 2019
Messages
5,488
Location
Chesapeake, VA
Programming Experience
10+
Merged two threads about essentially the same problem, but only had part of the puzzle in each thread.
 

Skydiver

Staff member
Joined
Apr 6, 2019
Messages
5,488
Location
Chesapeake, VA
Programming Experience
10+
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...
 
Top Bottom