This is my first post on Stackoverflow. Please guide if I miss something.
I'm trying to do HTML5 development with external javascript file and testing the same on XAMPP 3.2.1 server.
I have stored "HF_Chapter10_WebWorkers_Example1" in "C:\xampp\htdocs" of XAMPP installation and the Javascript file "manager.js" is also residing in the same folder. The 'manager.js' internally creates a worker thread and invokes the same.
Issue: When I'm opening the HTML file in Google Chrome, I see 404 (in Dev chrome tools) stating the server can't find the external Javascript file referenced. Also, I see that the server is load the javascript file as 'text/HTML' instead of 'text/javascript'. I have tried appending type='text/javascript' in the call to the javascript but that didn't help either.
I'm trying to understand the reason of this issue.
This is what goes into the HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Wed, 08 Jan 2014 05:07:11 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>HF_Chapter10_WebWork_Example1</title>
<LINK REL="stylesheet" HREF="theme.css" TYPE="text/css">
<script type="text/javascript" src="manager.js"> </script>
</head>
<body>
<p id="output"> ![enter image description here][1]</p>
</body>
</html>
This is what goes into the javascript file 'manager.js'
window.onload = function() {
//create the worker thread
var worker = new Worker("worker.js");
//send the message to the worker thread
worker.postMessage("ping");
//create an event listener to act on the messages arriving from the worker thread
worker.onmessage = function(event) {
var message = "Worker says" + event.data;
document.getElementById("p").innerhHTML = message;
}
}
This is what goes into the worker.js file:
onmessage = pingPong;
function pingPong(event) {
//based on the type of data, respond back with the 'postMessage'.
//Note that the message will go to the main javascript handler
if (event.data == "ping") {
postMessage("pong");
}
}
not clear what generates the 404 but this might help you
http://w3-video.com/Web_Tools/XAMPP/xampp_example_htdocs.html
I am attaching the image of the folder structure.
Related
I'm new in Javascript world, currently I'm trying to implement a GUI using electron js framework.
Trying to reproduce the code from a tutorial, I got stuck on a code which seems not to work on my PC, basically even if I click on a button, the console is not logging anything (when it should have!!); the aim of the code is to refer to a button defined in an index.html file from a index.js containing the script and log a sentence when the button is clicked, but it seems like the script in the html file cannot access the .js file at all. Here I'm reporting the code from index.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">
<title>my-app</title>
<link rel = "stylesheet" href="styles.css">
</head>
<body>
<button id = "button1" > START </button>
<script>
require('./index.js');
</script>
</body>
</html>
Here the code belonging to index.js file:
const electron = require("electron");
const button1 = document.getElementById("button1");
button1.addEventListener("click", startApp);
function startApp(){
console.log("Button clicked!");
};
Note:
I've tried to debug this code based on my very little knowledge of Javascript and electron:
I used document.getElementById("button1"); in index.html and it does work (the variable obtained was used to change button text color), but the same is not working when reported in the index.js file;
I tried console.log("In index.js"); in index.js but still it is not working!
From these results I thought the problem may be the .html and .js file communication; they are in the same folder. One more thing: I downloaded the tutorial code from GitHub and the problem is still present with the same actions at points 1 and 2.
Edit: I've omitted that I'm linking index.html window and displaying it in the main.js file, in fact the windows does show up, but the the click on the button doesn't produce any action.
Seemed to be a problem with the require module not working in .html file.
Solved by replacing it with <script src="index.js"></script>.
It appears that you shoud be using electron to load the index.html via BrowserWindowonce it is ready. app and BrowserWindow are from the electron module.
`const { app, BrowserWindow } = require('electron')`
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
From the quick start
In Electron, browser windows can only be created after the app module's ready event is fired. You can wait for this event by using the app.whenReady() API. Call createWindow() after whenReady() resolves its Promise.
For futher info see https://www.electronjs.org/docs/tutorial/quick-start
Hope this proves useful.
All I am trying to do at this point is get the quick example working as shown here - https://cloudinary.com/documentation/upload_widget
This is my code -
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
</head>
<body>
<button id="upload_widget" class="cloudinary-button">Upload files</button>
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
<script type="text/javascript">
var myWidget = cloudinary.createUploadWidget({
cloudName: 'cloudname',
uploadPreset: 'uploadPreset'}, (error, result) => {
if (!error && result && result.event === "success") {
console.log('Done! Here is the image info: ', result.info);
}
}
)
document.getElementById("upload_widget").addEventListener("click", function(){
myWidget.open();
}, false);
</script>
</body>
</html>
When I click on the "Upload files" button the grey box of the upload widget does appear but all I see inside is a loading icon.
your code is working perfectly fine for me locally and on Codepen without making a single change to the code. I even uploading two pictures using it, which you should check if they appeared in your Cloudinary account. Don't worry, they are clean.
Since I can't check if the images were uploaded to your account, I created a Cloudinary account of my own and verified that the widget is indeed working fine. I only checked it by changing to my cloudName and preset.
Here's the Codepen Link
Your code below since Codepen Links need to have code accompany them.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
</head>
<body>
<button id="upload_widget" class="cloudinary-button">Upload files</button>
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
<script type="text/javascript">
var myWidget = cloudinary.createUploadWidget({
cloudName: 'dw62s0tlm',
uploadPreset: 'rossm67'}, (error, result) => {
if (!error && result && result.event === "success") {
console.log('Done! Here is the image info: ', result.info);
}
}
)
document.getElementById("upload_widget").addEventListener("click", function(){
myWidget.open();
}, false);
</script>
</body>
</html>
This is from their support (which worked) -
The most common reason why that would happen is if the HTML file that contains the code for the widget is opened in the browser directly, via the file:// protocol. In order for this to work, the file should be opened from within your localhost through a web server via HTTP.
For example, if your system has Python installed you can quickly run a simple HTTP server in the same directory as your file which would make it accessible.
For example in Python 3:
python3 -m http.server
Python 2.7:
python -m SimpleHTTPServer
Then navigating to http://localhost:8000/index.html would run the code and should allow you to launch the widget.
I'm using the "async" property of Html.AppendScriptParts method in nopcommerce 3.80 like that Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js",false,true);
The google PageSpeed Tools give it a high score which is i expected:
But it seems effect to the other functionalities of website (nivo slider, ajax filter which comes from Seven Spikes plugin,... )
I'm not using js and css bundling feature in nopcommerce.
Can you guys please tell me what is the best solution in my scenarior now ?
Any helps are very appriciated.
Thank you so much.
Here is my code of _Root.head.cshtml:
#using Nop.Core.Domain.Common;
#using Nop.Core.Domain.Seo
#using Nop.Core.Infrastructure;
#{
var displayMiniProfiler = EngineContext.Current.Resolve<Nop.Core.Domain.StoreInformationSettings>().DisplayMiniProfilerInPublicStore;
Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
Html.AppendScriptParts("~/Scripts/public.common.js");
Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");
Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js",false,true);
var commonSettings = EngineContext.Current.Resolve<CommonSettings>();
if (commonSettings.RenderXuaCompatible)
{
Html.AppendHeadCustomParts(string.Format("<meta http-equiv=\"X-UA-Compatible\" content=\"{0}\"/>", commonSettings.XuaCompatibleValue));
}
var seoSettings = EngineContext.Current.Resolve<SeoSettings>();
if (!string.IsNullOrEmpty(seoSettings.CustomHeadTags))
{
Html.AppendHeadCustomParts(seoSettings.CustomHeadTags);
}
}
<!DOCTYPE html>
<html#(this.ShouldUseRtlTheme() ? Html.Raw(" dir=\"rtl\"") : null) #Html.NopPageCssClasses()>
<head>
<title>#Html.NopTitle()</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta name="description" content="#(Html.NopMetaDescription())" />
<meta name="keywords" content="#(Html.NopMetaKeywords())" />
<meta name="generator" content="nopCommerce" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
#Html.NopHeadCustom()
#Html.Partial("Head")
#Html.Widget("head_html_tag")
#Html.NopCssFiles(this.Url, ResourceLocation.Head)
#Html.NopScripts(this.Url, ResourceLocation.Head)
#Html.NopCanonicalUrls()
#Html.Action("RssHeaderLink", "News")
#Html.Action("RssHeaderLink", "Blog")
#Html.Action("Favicon", "Common")
#if (displayMiniProfiler)
{
#StackExchange.Profiling.MiniProfiler.RenderIncludes()
}
</head>
<body>
#RenderBody()
#Html.NopCssFiles(this.Url, ResourceLocation.Foot)
#Html.NopScripts(this.Url, ResourceLocation.Foot)
</body>
</html>
First, it's not related to Seven Spikes plugins. This issue is because of async behavior. When you make jquery file to an async, it means application will not wait to load that file and going to load next js file. But other js file are depended on first main file, and that's way you're getting errors.
Let's understand it with current scenario, the default code is:
Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
Html.AppendScriptParts("~/Scripts/public.common.js");
Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");
Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");
In this case the order of js files are:
Now load jquery min js file asynchronously.
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js", false, true);
And check console:
With this change you will get an error(s).
To resolve this issue, you have to load js min file in one particular order on basis of dependency.
Side Note: this issue is with default code too!! I've tested with nopCommerce 3.80 and 3.90
Esri ArcGis Javascript API 3.18
I'm issuing a new Portal("myUrl") command and getting back an error.
It's a dojo error, "CancelError" "All requests canceled."
It's a new https installation of the api on a new federated portal.
I have code that works when calling the esri portal so I think my code is probably correct. That would leave a installation configuration problem.
So far, I'm stumped.
My test web site is on the same webserver as the portal.
Here's a link to the plunkr with working code:
https://plnkr.co/edit/RFlStZbHA5axAD3J2KQt?p=preview
Any ideas?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>New Portal</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.18/esri/css/esri.css">
</head>
<body>
<div id='mainContent'>
<input id='message' value='initial value' />
</div>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.18/"></script>
<script>
dojo.require('esri.arcgis.Portal');
dojo.require("esri.IdentityManager");
dojo.require("dojox.lang.aspect");
var portalUrl = 'https://www.arcgis.com';
var portal = null;
var message = document.getElementById('message');
var init = function() {
message.setAttribute('value', 'pre new portal');
portal = new esri.arcgis.Portal(portalUrl);
message.setAttribute('value', 'past new portal');
portal.on("error", function(errorMsg) {
message.setAttribute('value', 'error=' | errorMsg.message);
});
portal.on("load", function (data) {
message.setAttribute('value', 'success');
});
};
message.setAttribute('value', 'pre init');
dojo.ready(init);
</script>
</body>
</html>
Changing the portal settings per this document made the api work for maps.
All the examples online show using this:
var portal = new Portal('www.myurl.com');
I found that using this worked:
var portal = new Portal('www.myurl.com/arcgis');
Basically, since some of this may be due to configuration settings I haven't seen, I would recommend determining what url gets called by the Portal object's internal code, and then trying increasingly long fragments of the initial url until you get success.
I am working on a project to provide facebook autentication to an existing captive portal. This captive portal has one option to customize the template so... I can edit the html code to show one of my own.
The problem is that for some reason every time I import a script on the template like this
<script src="external http or https script"></script>
it fails and the result is a blank page with nothing loaded from the template...
I had found a solution by importing the script after the page has loaded like this....
var script=document.createElement('script');
script.src="http://code.jquery.com/jquery-latest.min.js";
var head=document.getElementsByTagName('head')[0]
head.appendChild(script);
It is working ... I can confirm on console that calling $('body') for example return the body element of html.. so jquery is ready...
My problem:
If, after loading jquery ussing the workaraound I load other scripts (angular and socket.io in this case) those scripts fail with jquery issues
Uncaught ReferenceError: $ is not defined
My question:
How can i do to load those scripts after the jquery has finish loaded...
Do I need to initialize jquery some how to use it?
Thanks in advance
FULL CODE
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="expires" content="-1"/>
</head>
<body onload="initialFunction()">
<script>
function initialFunction(){
document.getElementsByName('username')[0].placeholder="Nombre de Usuario"
document.getElementsByName('password')[0].placeholder="Contraseña"
var script=document.createElement('script');
var angularScript=document.createElement('script');
var socketScript=document.createElement('script');
var angularFacebookScript=document.createElement('script');
var appScript=document.createElement('script');
var materializeScript=document.createElement('script');
script.src="http://code.jquery.com/jquery-latest.min.js";
angularScript.src="http://192.168.1.5/js/angular.js";
socketScript.src="http://192.168.1.5:8080/socket.io/socket.io.js"
angularFacebookScript.src="http://192.168.1.5/angular-facebook-master/lib/angular-facebook.js"
appScript.src="http://192.168.1.5/js/app.js"
materializeScript.src="http://192.168.1.5/js/materialize.min.js"
var head=document.getElementsByTagName('head')[0]
var body=document.getElementsByTagName('body')[0]
head.appendChild(script);
body.appendChild(angularScript);
body.appendChild(socketScript);
body.appendChild(angularFacebookScript);
body.appendChild(appScript);
body.appendChild(materializeScript);
}
</script>
<center>
<style>
body {
background-color:#298eea;
}
....some other stuff...
</style>
<div>
<h3>{company_logo}</h3>
<h2>Captive Portal</h2>
<div id="__loginbox"></div>
//here I want to insert the facebook button with an angular controller to pass info to a backend via socket io.... I have already do that before ussing the "normal way"
</div>
</center>
</body></html>
Try using onload event at script variables
script.onload = function() {
console.log(jQuery().jquery);
// do stuff with jQuery script
}
angularScript.onload = function() {
// do stuff with angular script
}
similarly with socketScript, angularFacebookScript, appScript, materializeScript