document.getElementById() is not defined when running browser code in VSCode - javascript

I was trying to use the document.getElementbyId() but when I run the console it tells me it is not defined.
My index.html and index.js are in the same folder the source should be OK.
I'm using Cmd + Shift + P in Visual Studio Code and then choose "Run: without debbuging". The error message shows in the integrated console.
let word1 = "Alex";
let word2 = "Toko";
let example = `${word1} ${word2}`;
var doc = document.getElementById("test").innerText = example;
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="test"> </p>
<script src="index.js"> </script>
</body>
</html>

The issue is the waqy you're running the code.
cmd+shift+P will run the index.js on it's own, and it won't know or care about the html.
Instead, open the html in your browser, and it should work.
The reason it won't work on vs code is that it runs the javascript file directly, and while the html links to the javascript, it won't work the other way around.
cmd+shift+P is used for server-side javascript, not client side. client side, you can just test in browser.

Related

How to import a blazor custom element in another JS application?

I have a blazor server app, with a registered custom element as below code:
builder.Services.AddServerSideBlazor(options =>
{
options.RootComponents.RegisterAsCustomElement<Counter>("my-blazor-counter");
});
I want to import this blazor custom element in another node.js application to convert it into a lit element(web component).
I have added below scripts in my node.js app
<script src="https://localhost:7075/_framework/blazor.server.js"></script>
<script src="https://localhost:7075/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>
but while initializing the Blazor it still using node app port and failing while initialization.
I am not sure I am missing anything here or if there is any other way to do it.
The following describes how I resolved an issue similar to yours: trying to register a custom element, the client not rendering the component and no error message anywhere.
I followed the instructions but the there was nothing happening client-side. After inspecting the websocket's traffic using Firefox I ran into the following message from the client to the server (slightly edited for readability):
ùÀµEndInvokeJSFromDotNetÂÚÙ[
2,
false,
"Could not find 'registerBlazorCustomElement' ('registerBlazorCustomElement' was undefined).
findFunction/<#https://localhost:5001/_framework/blazor.server.js:1:497
findFunction#https://localhost:5001/_framework/blazor.server.js:1:465
E#https://localhost:5001/_framework/blazor.server.js:1:2606
attachWebRendererInterop/<#https://localhost:5001/_framework/blazor.server.js:1:33097
attachWebRendererInterop#https://localhost:5001/_framework/blazor.server.js:1:33145
beginInvokeJSFromDotNet/s<#https://localhost:5001/_framework/blazor.server.js:1:3501
beginInvokeJSFromDotNet#https://localhost:5001/_framework/blazor.server.js:1:3475
_invokeClientMethod/<#https://localhost:5001/_framework/blazor.server.js:1:71894
_invokeClientMethod#https://localhost:5001/_framework/blazor.server.js:1:71880
_processIncomingData#https://localhost:5001/_framework/blazor.server.js:1:69922
kt/this.connection.onreceive#https://localhost:5001/_framework/blazor.server.js:1:64322
connect/</o.onmessage#https://localhost:5001/_framework/blazor.server.js:1:48638
EventHandlerNonNull*connect/<#https://localhost:5001/_framework/blazor.server.js:1:48489
connect#https://localhost:5001/_framework/blazor.server.js:1:48005
_startTransport#https://localhost:5001/_framework/blazor.server.js:1:57626
_createTransport#https://localhost:5001/_framework/blazor.server.js:1:56195
_startInternal#https://localhost:5001/_framework/blazor.server.js:1:54044
async*start#https://localhost:5001/_framework/blazor.server.js:1:51309
_startInternal#https://localhost:5001/_framework/blazor.server.js:1:66198
_startWithStateTransitions#https://localhost:5001/_framework/blazor.server.js:1:65598
start#https://localhost:5001/_framework/blazor.server.js:1:65262
Gn#https://localhost:5001/_framework/blazor.server.js:1:129904
Yn#https://localhost:5001/_framework/blazor.server.js:1:127771
async*#https://localhost:5001/_framework/blazor.server.js:1:131523
#https://localhost:5001/_framework/blazor.server.js:1:131529
"
]
In my case it was that I hadn't added <script src="/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script> to the html.
I was struggling to get this working for a Blazor serverside app. I created a test.html page in the wwwroot of the blazor project.
The fix for me was to specify the base url.
My html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- my component is here -->
<blazor-counter></blazor-counter>
<base href="http://localhost:5144">
</head>
<body>
<script src="_framework/blazor.server.js"></script>
</body>
</html>

Is there a way to run python code through a html button within an electron destop app?

I'm attempting to run python script through an html button for my electron app. However, I'm having issues with connecting the python code to the html button.
I'm using visual studio code for JavaScript and python. All the files are saved in the same folder/directory.
Here's my python code (script.py):
import sys
num1 = 3.2
num2 = 4.1
sum = float(num1) + float(num2)
print("The sum of {0} and {1} is {2}" .format(num1, num2, sum))
num3 = 5.3
num4 = 6.9
sum2 = float(num3) * float(num4)
print("The sum of {0} and {1} is {2}" .format(num3, num4, sum2))
sys.stdout.flush()
Here's my HTML code (Wifi.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" type="text/css" media="screen" href="main2.css" />
<script src="g/script.js"></script>
</head>
<body>
<h1>A</h1>
<br>
<h2>W</h2>
<ul>
<li><button id="add" class="btn btn-warning" onclick="get_script()">Run Test</button></li>
</ul>
<div class=back>
<input type=button onClick="location.href='DoS.html'" value='BACK'>
</div>
</body>
</html>
Here is the JavaScript file I'm trying to connect python with JavaScript/electron:
function get_script(){
var python = require("python-shell")
var path = require("path")
var options = {
scriptPath : path.join(/g/script.py'),
pythonPath : '/path'
}
var pleasewrk = new python("script.py", options);
pleasewrk.on('message', function(message){
swal(message);
})
}
I would like for python code to be run and appear on either the same or pop-up page.
And if you are going to check the video indicated by #kingsley solomon, please note that after release 5.0.0 of electron you have to set nodeIntegration parameter to true (the video was made with an earlier version). Check out this SO question: electron 5.0.0 "Uncaught ReferenceError: require is not defined"
You can't do that. Python does not execute in the browser. However, what you can do is use something like flask to make an accessible endpoint that accepts your parameters. Once the user selects the button on your page, it would then use node or javascript to send an HttpRequest to your python app.
Flask
What is a Flask Endpoint?
Flask - Calling python function on button OnClick event
I would argue the use case of using two separate server-side frameworks/languages here though. Unless you're doing something that absolutely only works in Python (or Node), I would just pick one or the other and stick with it. They are both highly capable of creating API's. Electron runs on Node, so I'd just stick with that (IMO).
You can child process module of node.js or python-shell module

How to connect to MSSQL by using pure javascript

I have some routine task (change some column types in MSSQL) on multiple server.
So, I'm trying to make a script program that connects to MSSQL and change structure of some tables.
What I've done so far...
I made a text file on Desktop and wrote the code below in the file
<!DOCTYPE html>
<html>
<head>
<script>
var objConnection = new ActiveXObject("adodb.connection");
var strConn = "driver={sql server};server=192.168.139.121;database=mytest;uid=testuser;password=testpw";
objConnection.Open(strConn);
var rs = new ActiveXObject("ADODB.Recordset");
(queries for changing table structure)..
</script>
</head>
<body>
</body>
After that, I saved it as HTML file and executed it with Internet Explorer.
But, No response.. I found that after executing 'objConnection.Open(strConn);' IE waits for response forever.. Is there any library or program to be installed to execute all the code above? please give me some hints
You can try this (Works only in IE) :
<!DOCTYPE html>
<html>
<head>
<script>
var connection = new ActiveXObject("ADODB.Connection") ;
var connectionstring="Data Source=<server>;Initial Catalog=<catalog>;User ID=<user>;Password=<password>;Provider=SQLOLEDB";
connection.Open(connectionstring);
//your queries here
rs.close;
connection.close;
</script>
</head>
<body>
</body>
</html>
You really shouldn´t use client side script like javascript to access databases for several reasons like bad practice, security issues etc. You can use .Net, PHP, JAVA etc which are server side language and better way to use these to interact with the databases.

Require js not loading jquery

I am a newbie to require js and faced this strange problem while creating our first :
Following is the home page :index.html
<html>
<head lang="en">
<meta charset="UTF-8">
<title>My first JS app using require</title>
</head>
<body>
<strong> This is my first require js app</strong>
<span id="output"></span>
</body>
<script data-main="js/main" src="js/lib/require.js"></script>
</html>
main.js is as follows :
require(['lib/jquery','app/message'],function($,message){
$('#output').html(message);
});
message.js is as follows :
define(function(){
return "Message from message.js";
});
When i run index.html on browser, $ in main.js comes as undefined. It does not produce any other error on console. Also all files are loaded successfully(confirmed from networks tab in browser).
If i change the main.js to be as follows :
require(['jquery','app/message'],function($,message){
$('#output').html(message);
});
And accordingly place jquery.js in appropriate directory, everything works fine.
I am not able to figure out the reason here. Can anybody please help here. Thanks in advance.

SERIALITY() plugin installation on firefox or chrome

Please help me to understand how to install the Seriality Plugin (www.zambetti.com/projects/seriality/‎) in Chrome or Firefox.
I want to read from a COM Port on the client side of a web page.
Take a look at the Google code site, this site contains the DMG file you can use to install the Seriality.plugin file.
https://code.google.com/p/seriality/
You can also see the sample source on the site that shows the javascript to use the plugin, below is a snippet shown on the site that prints "Hello World" to the first port seen on the system at a baudrate of 9600 when this HTML file is loaded.
<html>
<head>
<script type="text/javascript">
function setup()
{
var serial = (document.getElementById("seriality")).Seriality();
serial.begin(serial.ports[0], 9600);
serial.write("Hello World");
}
</script>
</head>
<body onload="setup();">
<object type="application/Seriality" id="seriality" width="0" height="0"></object>
</body>
</html>

Categories

Resources