getting javascript error like
Uncaught ReferenceError: doSearch is not defined
Here am attaching code, its spring mvc
the controller code is
#RequestMapping("/ajaxSearch")
public #ResponseBody List<Book> performLooseSearch(#RequestParam("CHARS") String chars)
{
System.out.println("CHARS: "+chars);
return bookService.searchBooksByLooseMatch(chars);
}
and jsp and java script here
<html>
<head>
<title>Loose Search</title>
<script type="text/javascript" src="/BookShopping/resources/jquery-1.4.2.min.js" />
<script type="text/javascript">
function doSearch() {
// make request to server...
alert("#searchBox " + $('#searchBox').val());
$.getJSON("ajaxSearch.do", {
CHARS: $('#searchBox').val()
}, function(data) {
// the call back
alert("Response received " + data);
});
}
</script>
</head>
<body>
<h1>Loose Search</h1>
<input type="text" onKeyUp="doSearch();" id="searchBox" />
<div id="results">
</div>
</body>
</html>
Any suggestion ?
<script> cannot be self closed. Check Why don't self-closing script tags work?
Change
<script type="text/javascript" src="/BookShopping/resources/jquery-1.4.2.min.js"/>
to
<script type="text/javascript" src="/BookShopping/resources/jquery-1.4.2.min.js"></script>
Related
I'm getting an Uncaught ReferenceError when I try to load this script, any suggestions?
index.html:12 Uncaught ReferenceError: mobilenet is not defined
at index.html:12
<html>
<head>
<title>Something else Introduction</title>
<!---- Import Script---->
<script src="https://unpkg.com/#tensorflow/tfjs#1.2.8" type="text/javascript" </script>
<script src="https://unpkg.com/#tensorflow-models/mobilenet#2.0.4" type="text/javascript"</script>
</head>
<body>
<img id="img" crossOrigin src = "https://i.imgur.com/e5KD2lt.jpg">
<h1 id="message">Hello, I'm a simple web page!</h1>
<script>
mobilenet.load().then(net => {
console.log('Model loaded to memory!')
const theImage = document.getElementById('img')
net.classify(theImage).then(result=> {
document.getElementById('message').innerText = `
Detected: ${result[0].className}
Probability: ${result[0].Probability}
`
})
})
</script>
</body>
</html>
The script tags are missing closing brackets
Just change in your <head> tags as the following:
<script src="https://unpkg.com/#tensorflow/tfjs#1.2.8" type="text/javascript"></script>
<script src="https://unpkg.com/#tensorflow-models/mobilenet#2.0.4" type="text/javascript"></script>
Additional suggestion:
Use your <script> tags at the end of <body> tag and not in the <head> or just simply use async attribute. It will help the page load performance. Read further in this answer for longer explanation.
I hope this helps!
I'm making a HEX to RGB colour converter and I have done all the things I think you are suppose to do and that is my JS code and HTML code
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Colour Converter</title>
</head>
<body>
<center>
<h1>Hex - RGB</h1>
<input id="hex">
<input id="rgb">
<script src="Main.js"></script>
</center>
</body>
</html>
Javascript
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input",ToHex);
function ToHex() {
console.log("Test")
}
and I get this Error
Uncaught TypeError: Cannot read property 'addEventListener' of null
at Main.js:3
I just got started learn JavaScript and I'm fairly new
You should make a few changes:
First, you need to run your script after the entire DOM has loaded. If you run your script before the DOM has fully loaded, then your document.getElementById won't be able to find the element and will return null.
Second, you also need to change ToHEX() to ToHEX in your addEventListener. The former was executing ToHEX immediately and returning nothing. The latter will pass the function to the addEventListener. Edit: It looks like you just updated your question to address this.
Here is the corrected code:
document.addEventListener("DOMContentLoaded", function(event) {
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input",ToHEX);
function ToHex() {
console.log("Test")
}
});
Lastly, you should also move your <script src="Main.js"></script> line back into the header -- it doesn't need to be inserted after your HTML. Including the script after your HTML doesn't mean that it will run after the page has loaded.
This code seems to work. I fixed code order and typo error.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Colour Converter</title>
</head>
<body>
<center>
<h1>Hex - RGB</h1>
<input id="hex">
<input id="rgb">
<script>
function ToHex() {
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", ToHex);
</script>
</center>
</body>
</html>
Thanks Bassem Rabia It works
HTML
<!doctype html>
<html lang="en">
<head></head>
<body>
<input id="hex">
<input id="rgb">
<script src="main.js"></script>
</body>
</html>
JavaScript
document.addEventListener("DOMContentLoaded", function(event){
function toHex(){
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", toHex);
});
Also, you have 2 mistakes in this line
HexInput.addEventListener("input",ToHEX());
the name of the method is misspelled
When you attach the event handler you just pass the reference to the function and not the invocation
So this would be the correct one
HexInput.addEventListener("input",ToHex);
http://prntscr.com/ic1vom
<!doctype html>
<html lang="en">
<head></head>
<body>
<input id="hex">
<input id="rgb">
<script src="main.js"></script>
</body>
</html>
main.js
document.addEventListener("DOMContentLoaded", function(event){
function toHex(){
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", toHex());
});
It could be because its late, but I've been at this for a good while now and still getting no further and running out of time.
Basically when I move the following code:
var test = "hell";
$('#qrcodeCanvas').qrcode({ text: test });
out from the function method and into the script it works fine, but if I put it within the button click function I get the following error:
Uncaught TypeError: undefined is not a function
I need it to work on button click, Here is the main code involved:
<script type="text/javascript" src="~/js/lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.qrcode.js"></script>
<script type="text/javascript" src="~/Scripts/qrcode.js"></script>
<div id="first">
<p>hello</p>
<input type="text" id="qr-text" value="" placeholder="Enter QR Data..."/>
<br />
<br />
<button id="button">Click on button</button>
</div>
<div id="qrcodeCanvas"></div>
<script>
$(document).ready(function () {
$('#button').click(function () {
var test = "hell";
$('#qrcodeCanvas').qrcode({ text: test });
});
});
</script>
UPDATE:
Here is the js file in question: http://jquer.in/javascript-and-jquery-solutions-for-fantastic-mobile-websites/qr-code/
If you're trying to use the "un-minified" version, you need to load qrcode.js first. If you use the jquery.qrcode.min.js version, it packs the qrcode.js code into the same file.
So instead of
<script type="text/javascript" src="~/Scripts/jquery.qrcode.js"></script>
<script type="text/javascript" src="~/Scripts/qrcode.js"></script>
use
<script type="text/javascript" src="~/Scripts/qrcode.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.qrcode.js"></script>
or
<script type="text/javascript" src="~/Scripts/jquery.qrcode.min.js"></script>
I am trying to make a data exchange system between two websites at their client sides. I am using EasyXDM for this. (http://easyxdm.net/). Here is my code of parent website:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>EasyXDM Test</title>
<script type="text/javascript" src="easyXDM.debug.js"></script>
<script type="text/javascript">
var serv_socket = new easyXDM.Socket({
remote: "http://localhost:39452/EasyXDM/Default.aspx",
onMessage: function (message, origin) {
document.getElementById('msg').innerText="Received '" + message + "' from '" + origin + "'";
},
onReady: function () {
serv_socket.postMessage("ID");
}
});
</script>
</head>
<body>
<form id="form1">
<div>
<iframe src="http://localhost:39452/EasyXDM/Default.aspx"></iframe>
<input type="text" id="msgtext" />Send message
<div id="msg"></div>
</div>
</form>
</body>
</html>
And below is the child website's code that is located at localhost:39452 domain:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Server</title>
</head>
<body>
<form id="form1">
<input type="text" id="msgtext" />
<div>
<script type="text/javascript" src="easyXDM.debug.js"></script>
<script type="text/javascript">
var socket = new easyXDM.Socket({
onMessage: function (message, origin) {
//document.getElementById('msg').innerText="Received '" + message + "' from '" + origin + "'";
socket.postMessage(message);
},
onReady: function (msg) {
socket.postMessage(msg);
}
});
function send() {
socket.postMessage('this is message from server');
}
</script>
Send message
</div>
</form>
</body>
</html>
The problem is that, when I click Send message on child website and call socket.postMessage() it says Uncaught TypeError: Cannot read property 'postMessage' of undefined.. Please tell me how to solve this issue?
Update: socket is becoming null or undefined somehow.
I found the solution finally here: https://stackoverflow.com/a/13122604/1576363.
I removed the iframe from parent and added container property of the socket to the id of a div and it worked. The reason for this was that the EasyXDM code automatically adds an iframe to your document. If you add iframe with the URL of child, you will get this error. From the linked answer, here is the clear explanation:
The "consumer" is the parent document, and EasyXDM loads the
"provider" which is the child iframe.
How do I get JSONRPC working properly with JQuery on the client-side, on the referenced types of calls?
To represent my attempt, I've tried to create the smallest possible test-case:
Server[1]
from txjsonrpc.web import jsonrpc
from twisted.web import server
from twisted.internet import reactor
class Math(jsonrpc.JSONRPC):
def jsonrpc_add(self, a, b):
return a+b
def jsonrpc_echo(self, foo):
return str(foo)
def jsonrpc_hello(self):
return u"Hello World!"
reactor.listenTCP(7080, server.Site(Math()))
reactor.run()
Client[2]
<!DOCTYPE HTML>
<html>
<head>
<title>Math is fun?!</title>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/datagraph/jquery-jsonrpc/master/jquery.jsonrpc.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.jsonRPC.setup({
endPoint : 'http://localhost:7080',
namespace : ''
});
$("input#evaluate").click(function() {
$.jsonRPC.request('jsonrpc_echo', {
params : [$("textarea#input").val()],
success : function(data) {
$("<p />").text(data.result).appendTo($("p#result"));
},
error : function(data) {
$("<p />").text(data.error.message).appendTo($("p#result"));
}
});
});
});
</script>
</head>
<body>
<p id="result"></p>
<p>
<textarea name="input" id="input"></textarea>
</p>
<p>
<input name="evaluate" id="evaluate" value="evaluate" type="button" />
</p>
</body>
</html>
Adapted from https://stackoverflow.com/a/4738563/1438003
Adapted from https://github.com/filonenko-mikhail/maxima-json-rpc/blob/master/examples/js-maxima-rpc-client.html