Electron modal javascript button not working - javascript

I am learning to create apps using electron. So far I have a main.js file running on the main process, and then I have an index.js for my index.html page, and I have a modal popup add.html which uses an add.js file. I have 2 buttons in my add.html file and I can't get either of them to work no matter what method I use. I have tried using the following methods to use the button:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Add Room</title>
<!-- <link rel="stylesheet" href="../assets/css/main.css"> -->
<link rel="stylesheet" href="../assets/css/add.css">
</head>
<body>
<!-- <p class="name">Address: </p> -->
<div class="row">
<div class="address">
<input class="nameVal" placeholder="Address">
</div>
<div>
<button class="add"> Add </button>
<button id="cancelBtn" class="cancel" onclick="cancelButton">Cancel</button>
</div>
</div>
<!-- <a id="close">Close</a> -->
<script src="./add.js"></script>
</body>
</html>
Javascript:
const electron = require('electron');
const path = require('path');
const BrowserWindow = electron.remote.BrowserWindow;
const currWindow = electron.remote.getCurrentWindow();
const ipc = require('electron').ipcRenderer;
let cancelBtn = document.getElementById('cancelBtn');
var $ = document.querySelectorAll.bind(document);
//This method is used in index.js and it works perfectly.
$(".cancel").forEach(function (el) {
el.addEventListener("click", function() {
alert("this thing is doinh stuuffff");
});
});
cancelBtn.addEventListener("click", function() {
alert("this thing is doing stufff");
});
function cancelButton() {
alert("this thing is using the onclick property");
}
I know that my html is linking to my javascript because if I make the javascript popup an alert without using a button it works.
I have seen other posts with a similar problem, but their issue was fixed because they had a typo. I re-wrote and re-read my code multiple times over the course of a few days, so I doubt that the issue is due to a typo.
add.html is used as a modal window, so maybe there are some rules that I'm missing about modal windows? But its called from main.js using icp and it works fine:
ipc.on('open-add-room-window', () => {
var addRoom = new BrowserWindow({parent: win, modal: true, width: 300, height: 150, resizable: false, show: false});
addRoom.loadFile("src/add.html");
addRoom.on('close', () => { addRoom = null; });
addRoom.once('ready-to-show', () => {
addRoom.show();
});
});

Thanks to #tpikachu I was able to solve the issue by enabling nodeIntegration on my modal BrowserWindow using the following code:
var addRoom = new BrowserWindow({webPreferences: {nodeIntegration: true}, parent: win, modal: true, width: 300, height: 150, resizable: false, show: false});

Related

Trying to animate dynamically created elements with GSAP

I am trying to animate elements that are added to the DOM via javascript with GSAP.
Here is the MRE:
HTML
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="css/style.css">
<title>Recipe Search</title>
</head>
<body>
<section id="searchBackgroundImage">
<section id="searchSection">
<h1>What's In The Fridge</h1>
<button type="button" id="btn">Seach!</button>
<div id="recipeContainer"></div>
<div id="test"><h2>Test</h2></div>
</section>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
<script text="text/javascript" src="js/main.js"></script>
</body>
</html>
CSS
h2 {
opacity: 0.1;
}
JS
document.querySelector('#btn').addEventListener('click',() => {
getRecipe();
timeline.play();
});
function getRecipe(){
let recipeTitles = `<h2>Cheese Burger</h2><h2>Ham Sandwich</h2>`
document.querySelector('#recipeContainer').innerHTML = recipeTitles
}
const timeline = gsap.timeline({
duration: 1,
paused: true
});
timeline
.to(
'#recipeContainer h2', {
opacity: 1
}
)
So I would like to change the opacity of the h2s.
It is not working because the h2s don't exist when the page first loads.
I was hoping that setting it to paused and only having it play on click would fix the problem, but unfortunately not.
If I change
timeline
.to(
'#recipeContainer h2', {
opacity: 1
}
)
to
timeline
.to(
'#test h2', {
opacity: 1
}
)
Then it works fine for that element.
So it has to be the element being dynamically created but I haven't been able to find a solution.
I've been reading the docs and it seems like I might be able to use TimelineMax and onComplete but I can't figure out how to implement it here.
Here is the codepen:
https://codepen.io/acodeaday/pen/RwJbrWa
Thank you for any help.
The problem here is that the javascript file is compiled before the click event. This means that the browser encounters the following error before the event listener is called.
Solution: Defining the timeline.to() properties inside the event listener will circumvent this problem.
document.querySelector("#btn").addEventListener("click", () => {
getRecipe();
timeline.to("#recipeContainer h2", {
opacity: 1,
});
timeline.play();
});

Input fields dead after clearing them

In my electron app I have a function to clear my input fields on a button press, but after using it I can't click and type into inputs anymore. However, if I open up the inspector window, they work again.
Why does this happen and how do I fix it?
Electron app's main.js:
const { app, BrowserWindow, Menu } = require('electron');
let win;
function createWindow() {
win = new BrowserWindow();
win.loadFile('window_main/index.html');
}
app.on('ready', createWindow);
index.html
<body>
<input type="text" id="testinput" />
<button id="clear">Clear</button>
<script src="index.js" type="text/javascript"></script>
</body>
The problematic bit of JS in index.js:
document.getElementById('clear').addEventListener("click", clear);
function clear() {
if (confirm("Clear all inputs?")) {
document.querySelectorAll('input').forEach((input) => {
input.value = '';
})
}
}
I reproduced your code after removing the script which is not explained why you are using it, anyhow below is a code using jQuery does the trick, this should get you to the right place at least.. if still didn't work with you post a better explanation of your code for a better help...
mark it as answered if it solves your problem....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<input type="text" id="testinput" />
<button id="clear">Clear</button>
<script>
$(document).ready(()=>{
document.getElementById('clear').addEventListener("click", clear);
})
function clear() {
if (confirm("Clear all inputs?")) {
document.querySelectorAll('input').forEach((input) => {
$(input).val('');
})
}
}
</script>
</body>
</html>
The problem was not clearing the inputs, but rather showing the confirm box. I used the following snippet instead:
dialog.showMessageBoxSync(
title: "Clear inputs",
message: "Clear all input boxes?",
type: "warning",
buttons: ["Cancel", "Ok"]
})
And now everything works as expected.

Uncaught ReferenceError: require is not defined at add.js:1

I am trying to get set up on a simple Electron project, but am having trouble resolving this issue. I have a file add.js that is used to add an event listener to a button to close a frameless browser window. I have the add.js file imported in a script tag to the HTML like so:
<script src="add.js"></script>
The add.js file only contains this event listener:
const electron = require('electron')
const remote = electron.remote
const closeBtn = document.getElementById('closeBtn')
closeBtn.addEventListener('click', (event) => {
let window = remote.getCurrentWindow();
window.close();
})
If it is needed, here is index.js, the click event listener to open this window:
const electron = require('electron');
const path = require('path');
const BrowserWindow = electron.remote.BrowserWindow;
const notifyBtn = document.getElementById('notifyBtn');
notifyBtn.addEventListener('click', (event) => {
const modalPath = path.join('file://', __dirname, 'add.html')
let win = new BrowserWindow({
alwaysOnTop: true,
frame: false,
transparent: true,
width: 400,
height: 200
})
win.loadURL(modalPath)
win.show()
win.webContents.openDevTools();
win.on('close', () => win = null)
})
The problem that I am having is that the frameless browser window opens just fine, but I get the "Uncaught ReferenceError:" immediately and the JS code does not load.
I've tried looking up the issue on here (stackoverflow) but the answers suggest that this is caused by attempting to run a node program in the browser. However, the index.js code that I included above works just fine, with no errors.
Here is the code to the HTML files as well, just in case I'm going crazy:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>BTCAlert</title>
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<div class="row">
<div id="price-container">
<p class="subtext">Current BTC USD</p>
<h1 id="price">Loading..</h1>
</div>
<div id="goal-container">
<p><img src="../assets/images/up.svg"><span id="targetPrice">Choose a Target Price</span></p>
</div>
<div id="right-container">
<button id="notifyBtn">Notify Me When...</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
add.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/css/add.css">
</head>
<body>
<p class="notify">Notify me when BTC reaches..</p>
<div class="row2">
<div>
<input id="notifyVal" placeholder="USD">
</div>
<button id="updateBtn">Update</button>
</div>
<a id="closeBtn">Close Window</a><br>
</div>
<script src="add.js"></script>
</body>
</html>
Any help is greatly appreciated.
Adding
webPreferences: {
nodeIntegration: true
},
to the new BrowserWindow instance fixed this issue for me.
The require() function it can not be used in the client side....
Anywhere if u want to use it in client side you should look into require.js or head.js for this.

How to display a dialog box when clicking on the button

I want to display a dialog box by clicking on the button in my JSP page.
Here is my code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta charset="utf-8">
</head>
<body>
<form action="/HabilitationFaite" method="POST">
...
...
<div class="text-center">
<button type="submit" class="btn btn-default btn-lg" onclick="alerte_habilitation('Test!')">Envoyer</button>
</div>
</form>
</div>
<script type="text/javascript">
function alerte_habilitation( msg ){
var popup = $("<div></div>");
$(popup).append('<img src="img/bigWarning.png"
class="dialog-image">');
$(popup).append('<span class="dialog-msg">'+msg+'</span>');
var popupConf = {
autoOpen : true,
resizable : false,
draggable : false,
width : 500,
title : "Attention",
modal : true,
buttons : {
"OK": function () {
$(this).dialog("close");
}
}
};
$(popup).dialog( popupConf );
}
</script>
</body>
</html>
This code does not display the dialog box and i don't find a solution.
Thanks for your answers.
Finally, like as he said EduardVoid, i forget to include some jquery/bootstrap :
<script src="/js/lib/jquery-1.11.3.min.js"></script>
<script src="/js/lib/bootstrap.min.js"></script>
<script src="/js/lib/jquery-ui.js"></script>
You can use the Bootstrap Popover.
Bootstrap has many things ready for you, because if you write stuff on your own you might come up with problems already solved in popular libraries/frameworks. If you do not want to load the whole framework, bootstrap lets you load only the modules you need.
https://getbootstrap.com/docs/4.0/components/popovers/

Resolve conflict between multiple YouTube Playlist plugin instances

I have a page which uses a custom YouTube playlist plugin found here https://github.com/Giorgio003/Youtube-TV
When I have a single instance of the player on a page it works great, but if I try to add two or more players, only one will render.
This is a sample page with two playlists:
<!doctype html>
<html lang="en">
<head>
<title>YouTube TV</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="assets/ytv.css" type="text/css" rel="stylesheet" />
<style type="text/css">
body{
background: #eee;
margin: 0;
padding: 0;
}
.test-title{
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="container">
<div class="col-md-9 col-lg-11">
<div>
<h4 class="test-title">Testing Responsive YouTube Playlist</h4>
</div>
<div id="responsive1"></div>
<div id="responsive2"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="src/ytv.js"></script>
<script>
var apiKey = 'ThisIsAValidKey';
window.onload = function(){
window.controller = new YTV('responsive1', {
playlist: 'PLaK7th3DkkqgBtr94FWKF5HNlbNIHWkww',
responsive: true
});
};
window.onload = function(){
window.controller = new YTV('responsive2', {
playlist: 'PLQJ-H2JR5Kwzv7Rdx2Ob-7Af5t3c2S_MN',
responsive: true
});
};
</script>
</body>
</html>
I moved the API key out of ytv.js into a global variable.
// Set apiKey as global var
// var apiKey = 'ThisIsAValidKey';
Other than that, the js is the same as found here.
How can I modify this plugin to allow multiple instances?
Update:
I have also renamed the window vars with no change in result.
window.controller1 = new YTV(...);
window.controller2 = new YTV(...);
Solution:
As inferred from the marked answer below
window.onload = function(){
$('#responsive1').ytv({
playlist: 'PL6x-m6zFmZvueGe7XnT0z1Qlsn2zUs5_F',
responsive: true
});
$('#responsive2').ytv({
playlist: 'PLQJ-H2JR5Kwzv7Rdx2Ob-7Af5t3c2S_MN',
responsive: true
});
};
By looking at the Youtube code, I could see it already handles multiple jQuery instance.
if ((typeof jQuery !== 'undefined')) {
jQuery.fn.extend({
ytv: function(options) {
return this.each(function() {
new YTV(this.id, options);
});
}
});
}
I created a quick fiddle: https://jsfiddle.net/pj8kpbzw/
Please check the console as it prints two instances.

Categories