Simple javascript code doesn't work - javascript

I am wondering why javascript alerts doesn't popup:
asp.asp file:
<html>
<head>
<meta charset="utf-8">
<title>AAA</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script class="code" language="javascript" type="text/javascript">
$(document).ready(function(){
$( "#btn-statistika" ).click({
alert('ok');
});
$( "#btn-lokality" ).click({
alert('ok');
});
});
</script>
</head>
<body>
<button class='ui-state-default' id='btn-statistika' style='' >Statistika</button>
<button class='ui-state-default' id='btn-lokality' style='' >Lokality</button>
</body>
</html>
Another asp files are working, I don't know why this cannot work...


You need to pass a function as param to click() call
$(document).ready(function () {
$("#btn-statistika").click(function () {
alert('ok');
});
$("#btn-lokality").click(function () {
alert('ok');
});
});


Here is the updated code
<html>
<head>
<meta charset="utf-8">
<title>AAA</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script class="code" language="javascript" type="text/javascript">
$(document).ready(function(){
$( "#btn-statistika" ).click(function(){
alert('ok');
});
$( "#btn-lokality" ).click(function(){
alert('ok');
});
});
</script>
</head>
<body>
<button class='ui-state-default' id='btn-statistika' style='' >Statistika</button>
<button class='ui-state-default' id='btn-lokality' style='' >Lokality</button>
</body>
</html>
Note: You need to pass a function() in click({}); event.

Related

Is there an "Update" function for jQuery?

if we push Html to the Dom , it will be display there but its not updated. is there any update function to jQuery ?
$(function(){
$('#add').on('click', function(){
$('.outer').append('<div class="data"><input type="text" value="enter" />Remove</div>');
});
$('.remove').on('click', function(){
alert('not working');
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="outer">
<input type="button" value="Click me" id="add" />
</div><!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
Anchor link not working when we push to the DOM , every answers must be appreciated ?

You should use the $(document).on('click', '.remove' instead:
$(function(){
$(document).on('click', '#add', function(){
$('.outer').append('<div class="data"><input type="text" value="enter" />Remove</div>');
});
$(document).on('click', '.remove', function(){
alert('not working');
});
});
This way jQuery listens for click events on the document, and if the target element is .remove (for example) - the function will be triggered. It doesn't matter if the elements are added dynamically - the click event is always on the document, and jQuery will check the target element (and act accordingly).
Here is the update to your snippet:
$(function(){
$(document).on('click', '#add', function(){
$('.outer').append('<div class="data"><input type="text" value="enter" />Remove</div>');
});
$(document).on('click', '.remove', function(){
alert('not working');
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="outer">
<input type="button" value="Click me" id="add" />
</div><!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

You are attaching click event to element that does not exist in document.
You can use jQuery() to attach the event to the element when the element is dynamically created.
$(function() {
$("#add").on("click", function() {
var div = $("<div>", {
"class": "data",
html: $("<input>", {
type: "text",
value: "enter"
}),
append: $("<a>", {
href: "#",
"class": "remove",
html: "Remove",
on: {
click: function() {
alert("not working");
}
}
})
})
$(".outer").append(div);
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="outer">
<input type="button" value="Click me" id="add" />
</div>
<!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

As per this question, I solved it by changing the line
$('.remove').on('click', function(){
to $('body').on('click','.remove', function(){
UPDATE: $('.outer').on('click','.remove', function(){
jQuery event handler .on() not working
$(function(){
$('#add').on('click', function(){
$('.outer').append('<div class="data"><input type="text" value="enter" />Remove</div>');
});
$('.outer').on('click','a.remove', function(){
alert('not working');
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="outer">
<input type="button" value="Click me" id="add" />
</div><!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

The problem is that $('.remove') is not defined at the time you attempt to assign an Event to it. Change
$(function(){
$('#add').on('click', function(){
$('.outer').append('<div class="data"><input type="text" value="enter" />Remove</div>');
});
$('.remove').on('click', function(){
alert('not working');;
});
});
to
$(function(){
$('#add').click(function(){
$('.outer').append("<div class='data'><input type='text' value='enter' /><a href='#' class='remove'>Remove</a></div>");
$('.remove').on('click', function(){
$(this).parent().remove();
});
});
});
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<meta charset='utf-8'>
<title>Untitled Document</title>
</head>
<body>
<div class='outer'>
<input type='button' value='Click me' id='add' />
</div>
</body>

$(function(){
$('#add').on('click', function(){
$('.outer').append('<div class="data"><input type="text" value="enter" />Remove</div>');
});
$('.remove').on('click', function(){
alert('not working');
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="outer">
<input type="button" value="Click me" id="add" />
</div><!-- /.outer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

Jquery Not Working on anonymous function call with ID selector

Hi I am trying to run Alert function on page load using jquery but it's not working for me.
Please let me know if I am wrong somewhere thanks.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#alertcall').load(function(d){
alert("Image loaded.");
})(document);
});
</script>
</head>
<body>
<div id="alertcall"></div>
</body>
</html>

Not sure I understand what you are doing, so you are trying to get jQuery to output an alert? Perhaps this will work.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="alertcall"></div>
<script>
$(document).ready(function () {
$('#alertcall').load(function(d){
alert("Div loaded");
})(document);
});
</script>
</body>
</html>

Try using this. You can check whether the element with id alertcall exists or not.
<script>
$(document).ready(function () {
if($('#alertcall').length){
alert("image loaded");
}
});
</script>

Looks like you are trying to perform some action when image loads. Use image instead of div.
$(function() {
$('#myImage').load(function(d) {
alert("Image loaded.");
});
}); < /script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<img id="myImage" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/03/high-resolution-wallpapers-2.jpg" alt="high resolution image">
</body>
</html>
Change image URL to test again to avoid cached image

$(function() {
$('#myImage').load(function(d) {
alert("Image loaded.");
});
}); < /script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<img id="myImage" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/03/high-resolution-wallpapers-2.jpg" alt="high resolution image">
</body>
</html>

How to manually call the js function

Does the below js function automatically being called when the html loads?
How can I manually call it? (using event or click)
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#divId").load("http://google.com");
});
</script>
</head>
<body>
<div id="divId" style="display:none;"></div>
</body>
</html>

<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$('#btn').on('click', function() {
$("#divId").load("http://google.com", function() {
$(this).show(); // it's display:none ?
});
});
});
</script>
</head>
<body>
<button id="btn">click to load</button>
<div id="divId" style="display:none;"></div>
</body>
</html>
Note that loading Google won't work due to the same origin policy and Google's headers.

When document is ready:
<head>
<script>
$(document).ready(function () {
$("#divId").load("http://google.com"); <!-- I don't know what you are trying to do here? -->
});
</script>
</head>
<body>
<div id="divId" style="display:none;"></div>
</body>
On a click
<head>
<script>
$(document).ready(function() {
$(".button a").click(function(e) {
e.preventDefault();
$("#divId").load("http://google.com"); <!-- Load Google won't work -->
});
});
</script>
</head>
<body>
<li class="button">Load</li>
<div id="divId" style="display:none;"></div>
</body>

How to test if a script load succeeded/failed?

I've got a sample script as below. I wanna see if local.js or online/latest.js failed to load. Is it possible?
<html>
<title>My JQuery Test</title>
<head>
<!--<script type="text/javascript" src="jquery/jquery.local.js"></script>-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#Buttons-theTestAlert").click(function () {
alert("`Test Alert` clicked");
});
});
</script>
</head>
<body>
<button id="Buttons-theTestAlert">Test Alert</button>
</body>
</html>

You can test
if (myFunction) myFunction()
else alert('not loaded (yet)')

jquery not working inside html file

I'm trying to do a very basic jquery tutorial but I'm not able to get it to work.
I'm calling the jquery library from google and then I try to create a script inside html.
If I do the same in a .js file I wouldn't have any problem.
What am I missing here?
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>
Link
</body>
</html>

You need to split this up:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>
...into two script elements:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>
In the snippet you gave, the code within the <script> element won't be evaluated because the browser is only evaluating the contents from the src attribute and ignoring everything else.

Move your scripts into the head element like this:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a").click(function () {
alert("Hello world!");
});
});
</script>
</head>
<body>
Link
</body>
</html>

Categories

Resources