Object not supported error in chrome - javascript

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>

Related

Getting Error: [$injector:modulerr] when adding angularjs.min.js - Angularjs

When I am adding
<script src="/js/angular.min.js"></script>
in my html page, then I am getting this strange error
Error:-
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.0/$injector/modulerr?p0=letsendorse&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.0-rc.0%2F%24injector%2Fnomod%3Fp0%3Dletsendorse%0AP%2F%3C%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A6%3A421%0Age%2F%3C%2F%3C%2F%3C%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A24%3A99%0Ab%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A23%3A149%0Age%2F%3C%2F%3C%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A23%3A1%0Ag%2F%3C%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A39%3A201%0An%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A7%3A342%0Ag%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A39%3A49%0Afb%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A42%3A360%0Azc%2Fc%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A19%3A421%0Azc%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A20%3A225%0Abe%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A19%3A41%0A%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A303%3A112%0Ab.Callbacks%2Fc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.9.1%2Fjquery.min.js%3A3%3A7852%0Ab.Callbacks%2Fp.fireWith%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.9.1%2Fjquery.min.js%3A3%3A8658%0A.ready%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.9.1%2Fjquery.min.js%3A3%3A3264%0AH%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.9.1%2Fjquery.min.js%3A3%3A693%0A
Here is my html -
<html ng-app="letsendorse">
<head>
<script src="/js/jquery.min.js"></script>
<script src="/js/angular.min.js"></script>
</head>
<body>
<div ng-controller="indexCtrl">
abc
</div>
</body>
</html>
Please help
Without declaring module in js you are assing it in view
Try like this
<html ng-app="letsendorse">
<head>
<script src="/js/jquery.min.js"></script>
<script src="/js/angular.min.js"></script>
<script>
var app=angular.module("letsendorse",[]);
app.controller("indexCtrl",function($scope){
});
</script>
</head>
<body>
<div ng-controller="indexCtrl">
abc
</div>
</body>
</html>

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>

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>

TyperError: i is not a function (FireBug)

My code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>View Initialization</title>
<script type="text/javascript" src="js/jqyery.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>
</head>
<body>
<script>
SearchView = Backbone.View.extend({
initialize: function(){
console.log("View is initialized");
}
});
var search_view = new SearchView();
</script>
</body>
</html>
Firebug is showing me following error:
TypeError: i is not a function
What is wrong with my code?
You appear to have a syntax error. You need to replace:
<script type="text/javascript" src="js/jqyery.js"></script>
with:
<script type="text/javascript" src="js/jquery.js"></script>
Note the spelling mistake in the first <script> has been replaced (jqyery).

Categories