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>
Related
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.
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.
I've got a quick question
So, my code is something like:
<html>
<head>
</head>
<body>
<?php
//file that contains the modals
include ('modals.php');
<button class="openCompany">
OPEN
</button>
?>
//...
</body>
</html>
and at the very end, I've got a JS script to open a modal like:
<script type="text/javascript">
$('#companyModal').modal('show');
</script>
which works perfectly, but when I do
$(".openCompany").click(function () {
$('#companyModal').modal('show');
});
it doesn't anymore.
Thanks.
try this
$(document).ready(function(){
$(document).on("click", ".openCompany", function(e) {
$('#companyModal').modal('show');
});
});
I want to alert something in the onclick event of a div .
This is my code:
<script type="text/javascript">
document.getElementById('new_div').click(function() {
alert(1);
});
</script>
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
But when loading the page it displays an error:
document.getElementById("new_div") is null
What is the problem in my code?
Edit: This should be a better solution, I'm a bit rusty in JavaScript.
You need to load your JavaScript event handlers after the page is loaded. The simplest way is making your code load when the document finishes loading and the window casts an onload-event.
<script type="JavaScript">
window.onload = function(){
document.getElementById('new_div').onclick = function() {
alert("Good morning, you are very beautiful today!");
}
}
</script>
you defined that div after your javascript code, so when you add your handler the div doesn't exist yet
reverse your code like so
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
<script type="text/javascript">
console.log(document.getElementById('new_div'))
</script>
to correctly attach an event use addEventListener (and attachEvent for IE<9)
or simply use document.getElementById('new_div').onclick = ... (but not recommended since you remove any previous defined handler, if any)
The new_div is not yet loaded when your javascript executes.
Try something like this:
$(document).ready(function()
{
$('#new_div').click(function()
{
alert(1);
});
});
Edit
I assume you use jQuery because you use .click(function() {
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function clicked(item) {
alert($(item).attr("id"));
}
</script>
<div onclick="clicked(this);" id="test">test</div>
I think you jquery solves your problem beautifully.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#new_div').click(function() {
alert(1);
});
});
</script>
your HTML stays the same
try this
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("#new_div").click(function(){
alert(1);
});
});
</script>
</head>
<body>
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
</body>
</html>
As a jquery-beginner, i should bind a javascript object into my jquery functions, like:
<div title="StackOverflow" onclick="javascript:action(this)">Content</div>
and in action i will handle the "this" :
function action(instance){
example=instance.attr("title");
}
but the "instance" is not a jquery object so i can't work with it. The syntax
example=$(instance).attr("title");
doesn't help me either.
I'd be glad of any suggestions
If you're using jQuery then you should completely separate the definition of your HTML and associated JavaScript. For example
HTML:
<div id="soDiv" title="StackOverflow">Content</div>
JavaScript:
$(document).ready(function() {
$('#soDiv').click(function() {
var example = $(this).attr('title');
...
});
});
this should work...
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
function action(instance){
example=$(instance).attr("title");
alert(example);
}
</script>
</head>
<body>
<a id="test" title="StackOverflow" onclick="javascript:action(this)" href="#">Content</a>
</body>
</html>
// HTML file
<div title="StackOverflow" id="stackoverflow">Content</div>
// JS File
document.getElementById("stackoverflow").addEventListener("click", function () {
var example = this.getAttribute("title");
});
Seperations of concerns
HTML:
<div title="StackOverflow" id="stack">Content</div>
Javascript (with jQuery):
$('#stack').click(function(){
alert(this.title);
});