Progress bar in Electron environment using BootstrapJS not working properly - javascript

Environment: Electron 1.6.11 (which includes NodeJS) and Bootstrap 3.3.x for the UI
Desired results:
I would like to:
Start a indeterminate progress bar when the Run button is clicked
Run a process (a Java program) -- which runs successfully
Remove the indeterminate progress bar when the process (Java program) returns
What I get in the following code is:
the process (Java program) starts
the process (Java program) ends
then the indeterminate progress bar appears
(I cannot remove it when trying -- see commented code)
Possibly, I am not synchronizing my processing correctly.
I thought the NodeJS code
resultCode = execSync(javaCmd);
would allow the page to wait for the Java program to complete.
I suspect that the code
var execSync = require('child_process').execSync;
is creating a child process in the background that does NOT wait even though I am using execSync.
Can you assist?
<!doctype html>
<html lang="en">
<head>
<script>
window.$ = window.jQuery =
require('./node_modules/jquery/dist/jquery.min.js');
</script>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<link href="light-bootstrap-dashboard-master/assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="light-bootstrap-dashboard-master/assets/css/animate.min.css" rel="stylesheet"/>
<style>
.progress {
margin: 15px;
}
.progress .progress-bar.active {
font-weight: 500;
animation: progress-bar-stripes 1.5s linear infinite;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="form-check form-group">
<button type="submit" class="btn btn-success btn-fill" onclick='runJob()'>Run</button>
<br>
<br>
<div class="progress-bar progress-bar-striped active" id="bar" role="progressbar" style="width: 100%;">
<span>Processing</span>
</div>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
document.getElementById('bar').style.display = 'none';
});
</script>
<script language='javascript' type="text/javascript">
function runJob() {
var execSync = require('child_process').execSync;
var javaCmd = 'java -jar C:/Java_Code/CountDown.jar';
alert("Run process?");
// make progress bar visible here but does not work in sequence with job
document.getElementById('bar').style.display = 'block';
var resultCode;
resultCode = execSync(javaCmd);
// would like to remove progress bar here but does not work
//document.getElementById('bar').style.display = 'none';
alert("Command succesfully executed");
}
</script>
</body>
<!-- Core JS Files -->
<script src="light-bootstrap-dashboard-master/assets/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="light-bootstrap-dashboard-master/assets/js/bootstrap.min.js" type="text/javascript"></script>
</html>

Related

CEFSharp "Uncaught ReferenceError: method is not defined\n# about:blank:1:0"

I am using CEFSharp in WPF app.
Currently i am loading local html file in chromium based browser.
xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Name="buttonTest" Content="Click me" Grid.Row="0" Width="50px" Height="30px" Click="buttonTest_Click" />
<!--<WebBrowser Name="webBrowser" Grid.Row="1" />-->
<!--<WebBrowser Name="webBrowser" Grid.Row="1" />-->
<wpf:ChromiumWebBrowser x:Name="webBrowser" Grid.Row="1"/>
</Grid>
cs
BrowserSettings browserSettings = new BrowserSettings();
browserSettings.FileAccessFromFileUrls = CefState.Enabled;
browserSettings.Javascript = CefState.Enabled;
browserSettings.UniversalAccessFromFileUrls = CefState.Enabled;
webBrowser.BrowserSettings = browserSettings;
webBrowser.Address = "file:///" + path;
Loading html is working completely fine.
Now i am trying to call javascript function on a click of WPF Button.
private async void buttonTest_Click(object sender, RoutedEventArgs e)
{
try
{
if (webBrowser.IsBrowserInitialized)
{
var task = await webBrowser.EvaluateScriptAsync("document.body.style.background = 'red';");
var task1 = await webBrowser.EvaluateScriptAsync("startInterval()", new Object { });
//webBrowser.ExecuteScriptAsync("alert(2 + 2);");
}
//webBrowser.InvokeScript("startInterval");
}
catch (Exception ex)
{
}
}
html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/site.css" />
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/site.js"></script>
<script type="text/javascript">
$(function () {
'use strict';
function startInterval() {
alert("qqf5");
}
function clearInterval() {
}
$("#buttonGetData").click(function () {
startInterval();
});
});
</script>
</head>
<body>
<div class="container">
<main role="main" class="pb-3">
<button type="button" id="buttonGetData">Get Data!</button>
</main>
</div>
</body>
</html>
From wpf if i click on button then page background color is changed but method is not called.
But if i click on from html page then it it working fine.
What i am missing here?

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.

Show image via javascript after page load

I am trying to create an image which is initially hidden - but reveals itself once the document has loaded completely via the JavaScript file.
$(document).ready(function () {
document.getElementById("theImage").style.visibility = "visible";
});
#theImage {
visibility:hidden;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kami Nelson Bio </title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="KNelson-Styles.css" rel="stylesheet" type="text/css">
<script src="respond.min.js"></script>
<script src="KNelson_reveal.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="theImage">
<img src="images/Kami-100.jpg" alt="Kami Nelson Image"/>
</div>
<div id="div1" class="fluid">
<h1>Bio for Kami Nelson</h1>
<p>Text</p>
</div>
</div>
</body>
</html>
Why is this not working?
Thank you in advance.
You should either include jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Or use native window.onload() instead of $(document).ready()
window.onload=function () {
document.getElementById("theImage").style.visibility = "visible";
}
You are missing the jQuery library reference
You are not properly
using selecter to select image of id theImage.
theImage is supposed to be for the img tag.
JavaScript
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
$("#theImage").css('display':'block');
});
</script>
CSS
#theImage {
display: none;
}
HTML
<img id= "theImage" src="images/Kami-100.jpg" alt="Kami Nelson Image"/>
why don't you just draw the image when the window loads?
give your image an id i'll use "image" for this example.
<script>
window.onload = function ()
{
$('#image').css({"display":"block";});
}
</script>

progress bar in public google drive upload

I have a code that allows my website users to upload to a central Google Drive account. So far it works great, I am simply trying to add in a progress bar.
Here, is the form HTML I have, I have been able to add a progress bar, it just does not move from 0%.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS File Upload</title>
<style>
.container {
width: 500px;
margin: 0 auto;
}
.progress_outer {
border: 1px solid #000;
}
.progress {
width: 20%;
background: #DEDEDE;
height: 20px;
}
</style>
<form id="myForm">
<input type="text" name="myName" placeholder="Your name..">
<input type="file" name="myFile">
<input type="submit" value="Upload File"
onclick="this.value='Uploading..';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;">
</form>
<div id="output"></div>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
input { display:block; margin: 20px; }
</style>
Besides that, I did some more research and have found a template example, I am just not sure how to implement it correctly into my existing code. Here is what I found from Caja Playground.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 37
});
});
</script>
</head>
<body>
<div class="demo">
<div id="progressbar"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>Default determinate progress bar.</p>
</div><!-- End demo-description -->
</body>
</html>
Hm, You only put the html file , where is the gs file ? also Its not possible unless you use chunk to upload ^^
You can use external libraries like MediaUploader js file. See the following tutorial. It includes every functions such as Create folder, upload file, view images, view content image text, show share files only etc.
Demo of using Google Drive API

what does the window pop before the pages even loads or the tap happens? JQUERY MOBILE

The "Call 2062710041" pops up before the pages loads all the way and the the button isnt event touched. Whats wrong with the code?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>home</title>
<link rel="stylesheet" href="themes/style.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2 /jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> <script>
$('#phone').on( 'tap',"#phone",goto());{
function goto(event){
window.location = 'tel:2062710041'}};
</script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="inline" >
<div class="leftstyle"> <img src="message.gif" width="40" height="39"></div>
<div class="rightstyle"> <img src="call.gif" id="phone" width="40" height="39"> </div>
<div class="center"> <img src="LOGO.png" width="209" height="210" > </div>
Using this method below will allow you to wait until the page is loaded to perform anything inside of it. This is jQuery's ready function.
$(document).ready(function() { /* your code. */ });
Same process outside of jQuery.
document.onload = function(){ /* your code. */ };
Use jquery's ready() function to bind the tap on full load. Try:
$(document).ready(function () {/*your code*/})
You also have a couple of extra {} brackets
$('#phone').on('click', function(event){
event.preventDefault();
if(event.handled !== true)
{
location.href = 'tel:2062710041';
event.handled = true;
}
return false;
});`

Categories