I am trying to use an external JavaScript function in the body tag: <body onload=function()>
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<script type="text/javascript" src="js/mqttws31.js"></script>
<script type="text/javascript" src="js/Long.min.js"></script>
<script type="text/javascript" src="js/ByteBufferAB.min.js"></script>
<script type="text/javascript" src="js/ProtoBuf.min.js"></script>
<script type="text/javascript" src="js/fs.js"></script>
<script type="text/javascript" src="js/bundle.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="cordova_plugins.js"></script>
</head>
<body onload ="heartbeat()">
<h2>A demo for showing the pub/sub between clients and the message broker</h2> <h3>IoTGateway</h3>
Topic :
<input type="text" name="pub"/>
Message:
<input type="text" name="pub"/>
<button onclick="connect()">
Connect
</button>
<br>
<button onclick="publish()">
Publish
</button>
<br>
<h3>BluetoothID</h3> Topic:
<input type="text" name="sub"/>
<button onclick="heartbeat()">
Subscribe
</button>
<br>
<p id = "test"></p>
<p id="sub"></p>
<script>
function heartbeat() {
alert("hello");
try{
MqttPlugin.subscribe({topic: "$EDC/plugin"});
}
catch(err){
alert(err.message);
}
}
/* try{
MqttPlugin.heartbeat({topic: "$EDC/tum/B8:27:EB:A6:A9:8A/HEARTBEAT-V1/mqtt/heartbeat"});
}
catch(err){
alert(err.message);
}*/
function publish() {
MqttPlugin.publish({
topic:"$EDC/plugin",
data:"Mqtt data"
});
}
function subscribe() {
MqttPlugin.subscribe({topic: "$EDC/plugin"});
}
</script>
</body>
</html>
The function heartbeat is called when I call with the event onclick but fails with onload. In case of onload, it throws an error MqttPlugin not defined. Is it because by the time it calls the function, the js files are not loaded? Could someone help me fix this?
I believe that your basic aim here is to subscribe to a topic automatically when the page is loaded. You can either try:
</script>
<style onload="heartbeat()"></style>
</body>
Or try changing the order of imports.
The first suggestion is just an hack not a full proof solution though.
The basic problem is that the heartbeat function is getting called before cordova_plugins.js is getting loaded. So either delaying the function call or loading the file early will do the trick.
Edited:
This jQuery method might just be the solution:
$( window ).load()
Please find documentation here.
Related
I am using asp.net mvc application.
From last 2 days i am trying and following some Internet solutions to call the MyPlugin function from outside the JS .
Please help me to find what wrong i am doung.
I had added myplugin JS and written some lines of code and now i am trying to access that function from View script.
My View :
<head>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/MyPlugin.js"></script>
</head>
<body>
<div id="divMain" >
</div>
</body>
<script>
$(document).ready(function () {
$("#divMain").MyPlugin();
});
</script>
MyPlugin JS:
(function ($) {
$.fn.MyPlugin= function () {
alert("ready to start!!!!");
};
})(jQuery);
And This message i got :
"Uncaught TypeError: $(...).MyPlugin is not a function"
Please help me to find a solution of this problem. I want to call that Plugin's function.
You have to add jquery prior to your plugin js.
<head>
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/MyPlugin.js"></script>
</head>
<body>
<div id="divMain" >
</div>
</body>
<script>
$(document).ready(function () {
$("#divMain").MyPlugin();
});
</script>
This code is trying to change a paragraph element in the html, but nothing in the script element seems to even be recognized
We have tried many different variations of this code to try to understand what isn't working, but nothing in the script element is even recognized
<!DOCTYPE html>
<html>
<head>
<h3>Final Schedule</h3>
</head>
<body>
<p id ="fs">hi2</p>
<input id="request" type="button" value="Get Final Schedule">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
</body>
</html>
I want the code to change the paragraph element to something else, but nothing is working, and the console.log()'s aren't working at all
You can't put your code inside the script element for jQuery. Instead add another script tag below it with your code.
<!DOCTYPE html>
<html>
<head>
<h3>Final Schedule</h3>
</head>
<body>
<p id ="fs">hi2</p>
<input id="request" type="button" value="Get Final Schedule">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
</body>
</html>
A script tag can't have both src and internal text code. You need two tags
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
you need 2 script tags, 1 to list the jquery library you're using and 1 to write the actual code
Try making one <script> tag for jQuery (<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>) and another one for your code:
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
You are using a rather old version of jQuery and might want to update to a more recent one
A script tag can either have an src attribute, requiring a script file, OR script content directly, not both. So just make a second script block with the code you'd like to execute:
<p id ="fs">hi2</p>
<input id="request" type="button" value="Get Final Schedule">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
I have a plan to create an app for JavaScript test. In here I will give a question for creating a program, for example, show the text "HTML Code Play" in alert box? The user will do the coding, and they can use any name for the functions, variable, etc.
I want to check the output, where the output show the alert box "HTML Code Play".
User Code
<script>
function showalert()
{
alert("HTML Code Play");
}
</script>
<input type="button" value="Show Alert" onclick="showalert();">
Compare with the following code(My code)
<button onclick="alertbox();">Show Alert</button>
<script>
function alertbox()
{
alert("HTML Code Play");
}
</script>
In the examples above, both produce the same output but the coding is different.
When I check both codes, I want the result true. Can I do it? Is it possible?
I found your question interesting, and created sample code using mocha and sinon.
(To exec this, you must install sinon.js modules by yourself.)
I published this code here as working code.
Please regard 'code1','code2' blocks as user-implemented codes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to test user code on broweer</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.5.3/mocha.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.5.3/mocha.css" rel="stylesheet">
<script type="text/javascript" src="../components/sinon/lib/sinon.js"></script>
<script type="text/javascript" src="../components/sinon/lib/sinon/util/core.js"></script>
<script type="text/javascript" src="../components/sinon/lib/sinon/extend.js"></script>
<script type="text/javascript" src="../components/sinon/lib/sinon/spy.js"></script>
<script type="text/javascript" src="../components/sinon/lib/sinon/call.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>How to test user code on broweer</h1>
<div id="mocha"></div>
<div id="live-code-stage"></div>
<template id="code1">
<button onclick="alertbox();">Show Alert</button>
<script>
function alertbox() {
alert("HTML Code Play");
}
</script>
</template>
<template id="code2">
<script>
function showalert() {
alert("HTML Code Play");
}
</script>
<input type="button" value="Show Alert" onclick="showalert();">
</template>
</div>
<script>
mocha.setup('bdd');
$(function () {
var assert = function (expr, msg) {
if (!expr) throw new Error(msg || 'failed');
};
describe("implement 'show alert button' test", function () {
before(function () {
window.alert = sinon.spy();
});
it("window.alert must to be called with 'HTML Code Play'", function (done) {
$("#live-code-stage").html($("#code1").html()); // testing code1
$("button, input[type='button']").click();
assert(window.alert.calledWith("HTML Code Play"));
done();
});
});
mocha.run();
});
</script>
</body>
</html>
Key Points
You can mock 'window.alert' like this:
window.alert = sinon.spy();
And you can check if it(=alert) was called with correct argument like this:
assert(window.alert.calledWith("HTML Code Play"));
If user-created code is wrong, mocha test will fail.
Introducing qunit may improve the test report appearance.
But this is just a sample. There must be many options to archive what you want.
hello I try to grab the submit event, and then I try to pop an alert that says "werks" so I know it works. Note that I have double-checked that the jquery.js file is present in the same folder, and it is the newest jquery.min.js from the jquery website.
When I submit the form, it automatically goes into "get" mode and displays this URL in the URL bar in my browser: "http://localhost/test.html?input=" instead of showing me the alert.
I think jquery is trolling me. Full code below:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('#form').submit(function(event){
event.preventDefault();
alert('werks');
});</script>
</head>
<body>
<form id="form">
<input type="text" name="input">
<input type="submit" value="Send">
</form>
</body>
</html>
Try the following code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<form id="form">
<input type="text" name="input">
<input type="submit" value="Send">
</form>
</body>
<script type="text/javascript">
$( document ).ready(function() {
$('#form').submit(function(event){
event.preventDefault();
alert('werks');
});
});
</script>
</html>
$('#form') selector returns nothing, since the markup form isn't loaded yet. Move script block after form, or wrap it in $(document).ready(function () { ... }).
You need to put it in a document ready statement:
$( document ).ready(function(){
//Code Here
});
<script type="text/javascript">
$(function(){
$('#form').submit(function(event){
event.preventDefault();
alert('werks');
});
</script>
fire your js code on document ready like this:
$(function() {
$('#form').submit(function(event){
event.preventDefault();
alert('werks');
});
});
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')"></span>
</body>
</html>
Here, I can't understand why it say always
[ReferenceError: view_more is not defined]
I got the same problem today.
My situation was like this:
.html file:
<head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<div class="lc-form-holder">
<form action="#" method="post">
[...]
<span onclick="myFunction();">NEXT</span>
</form>
</div>
</body>
and .js file:
$(document).ready(function() {
function myFunction() {
console.log('click click');
}
});
When I clicked on <span> I got an error Uncaught ReferenceError: myFuncion is not defined.
But when I do this in .js file (no document.ready):
function myFunction() {
console.log('click click');
}
Everything work just fine.
I don't know is this helpful but I wanna share it if someone check this question in future.
Try this first
<body>
<span onClick="alert('1');"></span>
if the above code works then there must exists others javascript which are actually got error prior to execute your code.
<span onClick="view_more('1')">Test</span>
Add text and then click on text
Working at my end
This is my code --
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')">gfgf</span>
</body>
</html>
EDIT
try using this code --
<html>
<head>
<script type="text/javascript">
function view_more(pg_no)
{
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="javascript:view_more('1');">gfgf</span>
</body>
</html>