Javascript: Uncaught ReferenceError - javascript

<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>

Related

Javascript jQuery click no result

This question has surely been asked a million times but I can't find anything specific to what I'm stuck with.
It seems that nothing inside my <script> tags is working, but I'm not sure why.
Here's the setup:
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/workflow.css" rel="stylesheet" />
<title></title>
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript">
$(function(){
$('#btn-cancel').click(function(){
alert("Button click worked!");
});
});
</script>
</head>
<body>
<div class="text-center" style="margin:20px 0 0 60%;">
<input type="button" class="form-btn" id="btn-cancel" value="Cancel" style="margin-right:50px" />
</div>
</body>
There are some other bits and bats of script and HTML in there, but for neatness I've left them out. The general layout is as shown above.
Clicking the cancel button has no effect.
I've tried for various buttons, singled out various bits, deleted whole sections of script, etc etc, and nothing works, so I think the script section itself is setup wrong in some way.
Any guidance much appreciated.
Cheers!
In your last script tag, you should replace this
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript">
with this:
<script type="text/javascript">
And so, your custom script tag should look like this:
<script type="text/javascript">
$(function(){
$('#btn-cancel').click(function(){
alert("Button click worked!");
});
});
</script>
Do this instead:
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#btn-cancel').click(function(){
alert("Button click worked!");
});
});
</script>
you can't add like this
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript">
$(function(){
$('#btn-cancel').click(function(){
alert("Button click worked!");
});
});
</script>
change it into
<script>
$(function(){
$('#btn-cancel').click(function(){
alert("Button click worked!");
});
});
and remove <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"> because you already defined it in the first.
Your code should look like this
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script>
$(function(){
$('#btn-cancel').click(function(){
alert("Button click worked!");
});
});
</script>
moreover besides i prefer using onclick() with button,
<input type="button" class="form-btn" id="btn-cancel" value="Cancel" style="margin-right:50px" onclick="BtnClick()"/>
function BtnClick(){
alert("Button click worked!");
}

Functions with alert boxes from an outside JQuery file don't work

Here is my HTML excerpt:
<html>
<head>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript" src="alert_box.js">
</script>
<title></title>
</head>
<body>
<input type="button" id="name" value="click" >
</body>
</html>
Here's what's in my alert_box.js
$('#name').click(function(){
alert('alert box working');
});
Both JQuery and alert_box.js are imported
Based on the answers given, this should be solved. But I will summarize it. You may also want to just use a remote jquery script hosted somewhere else, which you can reference like so:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Otherwise...
<html>
<head>
//make sure your path here is correct
<script type="text/javascript" src="jquery.js"></script>
//make sure your path here is correct
<script type="text/javascript" src="alert_box.js"></script>
<title></title>
</head>
<body>
<input type="button" id="name" value="click" >
</body>
</html>
alert_box.js
(function() {
$('#name').click(function() {
alert('alert box working');
});
});
When you call that, the DOM isn't yet ready therefore, there is no #name element which you're looking for. Wrap your code in DOM ready like this
$(document).ready(function() {
$('#name').click(function() {
alert('alert box working');
});
});
Or bring the <script src="alert_box.js"> before </body>
Learn about DOM Ready
Now, after EternalHour provided me with an external JQuery source, some of the functionality resumed to normal. However, this would not work and I have no idea why:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="alert_box.js"></script>
<script type="text/javascript">
if(window.jQuery){ <!--this is a small test I ran ti see if jquery is loaded/-->
alert('jquery functional');
}else{
alert('jquery not loaded');
}
</script>
</head>
<body>
<input type="button" value="submit">
</body>
</html>
Now back to alert_box.js ...
$(window).ready(function(){
$(':button').click(function(){
$(this).attr('value','loading...');
});
});
The button won't change value, what's causing this?

Something wrong with jquery watermark plugin

I’m trying to implement this in my code but I don’t know what is the matter. I searched a lot but I could not discover where is the problem in my code. Thank you in advance.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js" />
<script type="text/javascript" src="jquery.watermark.js" />
</head>
<body>
<input type="text" width="300px" id="input">
<script type="text/javascript">
$("#input").watermark("Heee");
</script>
</body>
</html>
Update:
I have edited my code and still get this result:
My edited code:
<html>
<body>
<input type="text" width="300px" id="input">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js" />
<script type="text/javascript" src="jquery.watermark.js" />
<script type="text/javascript">
$("#input").watermark("Heee");
</script>
</body>
</html>
Make sure you always wrap your jQuery code around a document ready function, like this...
$(document).ready(function() {
$("#input").watermark("Heee");
});
Hi i tried with your code but i wont work, I added the head tag and use the ready function and now works well. I hope it helps. Regards
Regards
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.watermark.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$('#inputId').watermark('Required information');
});
</script>
<body>
<input type="text" width="300px" id="inputId">
</body>
</html>

Object not supported error in chrome

Here is my code:
<html>
<head>
<script type="text/javascript" language="javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
alert('hei');
});
</script>
</head>
<body>
<input type="button" id="btn" />
</body>
</html>
I'm getting an "object not supported" error on $(document).ready. I'm also getting this error: Uncaught SyntaxError: Unexpected token ILLEGAL
Your code seems to be correct, it looks like jQuery file is not loaded, verify that it has correct path.
This works:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { alert('hi'); });
</script>
</head>
<body>
</body>
</html>

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>

Categories