Uncaught ReferenceError function not found - javascript

I have a onkey on a input but it won't find the function I have in my js file. I searched through some questions on here but can't find the solution for it.
My input code:
<input id="Name" type="text" name="name" class="form-control" onkeyup="autocomplet()">
<ul id="Name_list_id"></ul>
jQuery:
function autocomplet() {
var min_length = 0;
var keyword = $('#Name').val();
if (keyword.length >= min_length) {
$.ajax({
url: "search.php",
type: "POST",
data: {keyword:keyword},
success:function(data){
$('#Name_list_id').show();
$('#Name_list_id').html(data);
}
});
} else {
$('#Name_list_id').hide();
}
}
function set_item(item) {
$('#Name').val(item);
$('#Name_list_id').hide();
}
JS files of tutorial:
<script type="text/javascript" src="js/jquery.min.js">
</script> <script type="text/javascript" src="js/script.js"></script>
and on my website:
<script src="s/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/events.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery-ui.min.js"></script>
Thanks!

Demo
<!DOCTYPE html>
<html>
<head>
<title>- jsFiddle demo by vilaskumkar</title>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/events.js" type="text/javascript"></script>
<!-- Add all you JS File in head -->
<!-- <link href="/css/result-light.css" rel="stylesheet" type="text/css"> -->
</head>
<body>
<form>
<input class="form-control" id="Name" name="name" onkeyup=
"autocomplet()" type="text">
</form>
<ul id="Name_list_id"></ul>
</body>
</html>

Related

datepicker is not a function - error on homepage but works on another

I have been struggling with this error for a while now. Checked all my includes, compared to other pages and everything looks to be fine to me. I am honestly completely lost why this is happening.
I have a jQuery datepicker function on my homepage which doesn't work, it throws the error "Function not found". However, I have the exact same function on other sub-pages and no issues at all.
css
Those are my includes from the page that works:
<link rel="stylesheet" href="./index/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="./index/style.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
Scripts
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="./index/jquery.min.js.download"></script>
<script src="./index/bootstrap.min.js.download"></script>
And to compare, includes from the homepage
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="./index/jquery.min.js.download"></script>
<script src="./index/bootstrap.min.js.download"></script>
I also thought that maybe I wrote something wrong so I copied the code exactly from the working page and still no luck. The only difference is that I am using Google Charts API on the homepage, could this be throwing off the datepicker?
My datepicker function:
JavaScript
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
And where it is used:
HTML
<label for="Audit Date">Audit Date:</label>
<input type="text" name="datepicker" id="datepicker" />
I dont know in which order you load the scripts, so here is the ay it worked for me:
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
$( function() {
$( "#datepicker" ).datepicker();
} );
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="./index/jquery.min.js.download"></script>
<script src="./index/bootstrap.min.js.download"></script>
<label for="Audit Date">Audit Date:</label>
<input type="text" name="datepicker" id="datepicker" >

Using <canvas> to draw screen in .erb file

I'm using the following javascript code to help me draw an output screen in a .erb file which doesn't render properly. The canvas tag is unhelpful.
There is no output screen. The linking is proper and I am able to get output "hello" when I add a testing line.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Programming++! Build Your Own Blocks</title>
<link rel="shortcut icon" href="favicon.ico">
<script type="text/javascript" src="morphic.js"></script>
<script type="text/javascript" src="widgets.js"></script>
<script type="text/javascript" src="blocks.js"></script>
<script type="text/javascript" src="threads.js"></script>
<script type="text/javascript" src="objects.js"></script>
<script type="text/javascript" src="gui.js"></script>
<script type="text/javascript" src="paint.js"></script>
<script type="text/javascript" src="lists.js"></script>
<script type="text/javascript" src="byob.js"></script>
<script type="text/javascript" src="xml.js"></script>
<script type="text/javascript" src="store.js"></script>
<script type="text/javascript" src="locale.js"></script>
<script type="text/javascript" src="cloud.js"></script>
<script type="text/javascript" src="sha512.js"></script>
<script type="text/javascript" src="FileSaver.min.js"></script>
<script type="text/javascript">
var world;
window.onload = function () {
world = new WorldMorph(document.getElementById('world'));
world.worldCanvas.focus();
new IDE_Morph().openIn(world);
loop();
};
function loop() {
requestAnimationFrame(loop);
world.doOneCycle();
}
</script>
</head>
<body style="margin: 0;">
<canvas id="world" tabindex="1" style="position: absolute;" />
</body>
</html>
Any help please ?

Javascript: Uncaught ReferenceError

<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"/>
<script type="text/javascript">
$(document).ready(function(){
$('#name').val('Name1');
});
function clickMe(){
console.log('click me called');
}
</script>
</head>
<body>
Person Name: <input type="text" id="name" data-bind="value:personName">
<input type="submit" value="Save" onClick="javascript:clickMe()"/>
</body>
</html>
In the code above neither the function inside document.ready is getting executed nor "clickMe" function is getting executed when "Save" button is clicked.
When I click on "Save" button, Uncaught ReferenceError: clickMe is not defined error message is seen.
Because you haven't closed script tag of jQuery. <script> is not self-closing tag.
<script type="text/javascript" src="https://code.jquery.com/jquery- 1.11.3.js"/>
Should be
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
Code:
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#name').val('Name1');
});
function clickMe() {
alert('click me called');
}
</script>
</head>
<body>
Person Name:
<input type="text" id="name" data-bind="value:personName">
<input type="submit" value="Save" onClick="javascript:clickMe()" />
</body>
</html>
Scripts can not be self closing. You need to have the closing </script> tag on the jQuery include.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"/>
needs to be
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
You need to refer to script like this:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>

How to use in html body a variable that's been defined in script in the head part

In the following code how can I correctly insert the val testName defined in the function initialize() in the field Name in the body?
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript">
function intialize()
{
var testName="John";
}
</script>
</head>
<body onload="intialize()">
<input id="Name" type="textbox" value=testName>
</body>
</html>
You can use document ready :
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript">
$(function(){
$('#Name').val('testName');
});
</script>
</head>
<body>
<input id="Name" type="textbox" value=""/>
</body>
</html>
Used the id, Name, and set the value to 'testName' once the document is ready.
Well, if you're using jQuery, you could just include this in the function:
$("#Name").val(testval);
You might have to put the script in $(document).ready() though.
This. It's easy, and you don't have to worry about any of this jquery mess.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript">
function intialize()
{
var testName="John";
document.getElementById("Name").value = testname;
}
</script>
</head>
<body onload="intialize()">
<input id="Name" type="textbox">
</body>
</html>
Try declaring it outside the function
<script type="text/javascript">
var testName;
function intialize()
{
testName="John";
}
</script>
But it will become a global variable.
You have jQuery available so USE it. Don't use an older version than 1.6.1 though..
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
var testName="John";
$(document).ready(function() {
$('#Name').val(testName);
});
</script>
</head>
<body>
<input id="Name" type="text">
</body>
</html>

Jquery Show() flicker

<html>
<head>
<script type="text/javascript">
var oauth = chrome.extension.getBackgroundPage().oauth;
</script>
<style type="text/css">
#note
{
display:none;
}
</style>
<script src="Task.js" type="text/javascript"></script>
<script src="Taskhandle.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
<title>TaskMan</title>
</head>
<body>
<input type="text" id="title"><input type="text" id="note">
+ N
<script type="text/javascript">
window.onload=function(){
$('#anote').click(function () {
$('#note').show();
});
}
</script>
</body>
</html>
When I run this code in chrome the input flickers in and out. I need a fix.
You have to prevent default of the link (which is reloading the page):
$('#anote').click(function (E) {
E.preventdefault();
$('#note').show();
});

Categories