JQuery Failed to Handle Button's On Click Event - javascript

I know this question may be stupid, but I'm new to JQuery and failed to guess (even after hard search at Google) Why My Function failed to Show me Alert on Click Event of Button, (I'm trying to do more tasks but for debugging purpose I'm showing alert).
<!DOCTYPE html>
<html>
<head>
<title>WebSite Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
$(document).ready(function(){
$('#foo').click(function(){
alert('ggg');
});
});
</script>
</head>
<body>
<input type="button" name="" value="Get Data" id="foo">
</body>
</html>

As #Pranav mentioned, you should separate the scripts, so each can work.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquer‌​y.min.js"></script>
<script>
$(document).ready(function() {
$('#foo').click(function() {
alert('ggg');
});
});
</script>

I'm Totally Agreed with Answers of above two users, You have to Put Your Code away from the tags referencing the Libraries, What you need to do is place your logical code may be of Javascript or JQuery in Another Script Tags

Related

change() fires on page loading

Quick background:
I got a project that some developer worked on a couple of years ago and his code is a nightmare, let alone that almost all the software is outdated. The JQuery in the project is still 1.5.2 but I was able to work around that using the non-conflict option of JQuery.
However, I still can't seem to make the change() function work properly - it fires when the page is being loaded. Furthermore, for some strange reason, the On() function doesn't work either.
Here's the code (below the body):
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("input[id^=DepartureDay]").on('change',alert('dd'));
And here's the non-conflict function (if it's relevant):
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
I don't know if it's relevant, but wired thing about the code is that the previous programmer decided load all the HTML using JS strings. Another thing that I should note is that I'm trying to detect a change in the value of a uikit datepicker.
Thank you for your help!
I add a fiddle:
https://jsfiddle.net/vzeuhohm/1/#&togetherjs=Sietj3k5oM
Another edit:
https://jsfiddle.net/vzeuhohm/2/
Another edit:
I attach the full code in the hope that someone would be able to understand what is wrong with it -
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="uikit.docs.min.css" type="text/css">
<script language="javascript" src="https://getuikit.com/v2/vendor/jquery.js"></script>
<script language="javascript" src="https://getuikit.com/v2/docs/js/uikit.min.js"></script>
<script language="javascript" src="https://getuikit.com/v2/src/js/components/datepicker.js"></script>
<link href="example160/css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="example160/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="example160/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.js"></script>
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
<script type="text/javascript">
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("[id^=DepartureDay]").ready(function(){
jQuery_3_2_1("[id^=DepartureDay]").on('input',function(e){
alert('ff');
});
});
});
</script>
</head>
<body>
<form method="post">
<input type="text" name="DepartureDay1" id="DepartureDay1" data-uk-datepicker="{format:'DD.MM.YYYY'}" placeholder="mm/dd/yyyy" />
</form>
<div>TODO write content</div>
</body>
</html>
You're trying to use the result of calling alert('dd') as the change handler.
You probably want to wrap the alert in a function, and pass that function as the handler instead:
jQuery_3_2_1("input[id^=DepartureDay]").on("change", function() {
alert("dd");
});
Instead of using $(document).ready(), try using
$(window).on('load', function() {
$("input[id^=DepartureDay]").on('change',alert('dd');
});
EDIT
var jQuery_3_2_1 = $.noConflict(true);
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1('[id^=DepartureDay]').on('input', function(){alert('dd');});
});
Instead of .on('change'..., use .on('input'...).
You also have to say function(){alert('dd');} instead of just alert('dd').
try following code
textbox change event doesn't fire until textbox loses focus.
that's why i am posting both example
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("input[id^='DepartureDay']").on("change", function() {
alert("your change event is working !!!");
});
});
jQuery_3_2_1("input[id^='DepartureDay2']").on('change keyup paste', function() {
console.log('your change/keyup event is working !!!');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
</script>
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="DepartureDay" id="DepartureDay" />
<input type="text" name="DepartureDay2" id="DepartureDay2" />
</form>

JQuery click event on all buttons with id starting with custom text

Using JQuery, I need to write a function, called on click for any of the two buttons (edit0, edit1).
I have the following code:
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$('[id^=edit]').click(function() {
alert("1111");
});
</script>
</head>
<body>
<button id="edit0" class="edit"> edit </button>
<button id="edit1" class="edit"> edit </button>
</body>
</html>
When I run it, nothing happens on button click.
I tried to replace the script with:
$('button[class="edit"]').click(function() {
alert('1111');
});
But the result is the same.
You can simply use CSS3 [attribute^=value] Selector to implement 'click event on all buttons with id starting with custom text' as you wish, like below.
$('button[id^="edit"]').click(function() {
alert('111');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button id="edit0" class="edit"> edit </button>
<button id="edit1" class="edit"> edit </button>
<script type="text/javascript">
$('[id^=edit]').click(function() {
alert("1111");
});
</script>
</body>
</html>
And also, put your code just before the closure </body> tag to ensure your dom is ready when the code runs.
I normally see that syntax for addressing custom attributes, try this.
$('button.edit').click(function() {
alert('1111');
});
Also put your script below your HTML. Or use a jQuery on document ready. Remember JavaScript/JQuery are executed sequentially.

this jquery code doesn't work?

I found this jsfiddle code, and I need it and I want to try that in my php file, but it doesn't work, whereas it's the same code, i just copied and paste and I don't change anything, but it still doesn't work.
My Code:
<!DOCTYPE html>
<?php
?>
<html>
<head>
<title></title>
<script>
$("#update").click(function() {
$("#counter").html(function(i, val) {
return val*1+1
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.jss"></script>
</head>
<body>
<button id="update" type="button">Click Me</button>
<div id="counter">10</div>
<?php
?>
</body>
</html>
Please show me my fault. Any help would be appreciated!
You should really be able to debug this yourself. Open your javascript console, and notice it says ReferenceError: $ is not defined. This means jquery isn't loaded. Now look at the URL you put in your script-src. Why does it end with in .jss? You have a typo there.
If you correct that you'll still get the same error. Why? Because you use jquery before including it. So put the included jquery library before the custom code.
Now, it still won't work. Why? Because you attach an event before the DOM is loaded; so when your script is processed, the button doesn't exist! So have a look at http://api.jquery.com/ready/ and you should know what to add, wrap your javascript inside $(function() {...}) and you're good to go
Maybe it's just a typo in jquery.min.jss
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.jss"></script>
it must be jquery.min.js
Or you placed your javascript before the jquery reference.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#target').click(function() {
$('#output').html(function(i, val) { return val*1+1 });
});
});
</script>
</head>
<body>
<button id="target" type="button">Click Me</button>
<div id="output">10</div>
</body>
</html>

JavaScript function "not defined" after importing jQuery

I have the following (simplified) code:
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" />
<script language="javascript" type="text/javascript">
function testFunction() {
alert('It works');
}
</script>
</head>
<body>
<form method="post" action="test.html" onsubmit="testFunction()">
<input type="submit" value="Test" />
</form>
</body>
</html>
My testFunction() function works fine by it self, that is until I import jQuery with the line
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" />
Now it fails and tells me that
Uncaught ReferenceError: testFunction is not defined
I am hoping this is a newbie mistake and that I am missing something obvious. Notice that I haven't even try to use jQuery yet.
You need to close the <script> tag fully.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Works great on jsfiddle after changing:
http://jsfiddle.net/PVYM9/
Also, in HTML5 you can shorten the doctype to just <!DOCTYPE html>, and you don't need to define type properties for your <script> tags. See jsfiddle for example.
You have to close the script tag in the right way
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
(note the closing </script> tag)
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> // close the script tag properly
<script type="text/javascript"> // there is no need of writing language="javascript"
function testFunction() {
alert('It works');
}
</script>
hey man there is no need of writing language="javascript" because type already specifies it!
Despite being valid XML, many HTML elements (such as script, textarea etc) don't work well in most browsers if you close them using a trailing slash (i.e. <element />). You need to create open and close tags for them to work (<element></element>). That seems to be true for XHTML as well.
Others, like your input tag, work fine the way it is. I don't know why some require a closing tag and others not, neither a list of those elements, I just know some of them from experience...

jQuery event binding inconsistently

I thought I understood jQuery, evidently not. Why, in this example, does the first textbox register clicks but not the second?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4
/strict.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min"/>
<script type="text/javascript">
captureKeys = function(event)
{
alert("foo");
}
$(document).ready(function()
{
$('#UsingJQuery').bind('keyup', function(){alert('bar');});
});
</script>
</head>
<body id="contentText" >
<input type="text" id="UsingPlainJavaScript" onkeyup="captureKeys()"/>
<input type="text" id="UsingJQuery"/>
</body>
</html>
EDIT: OK, I've fixed the typo but it's still not working..
This is asking for trouble:
<script type="text/javascript" src="jquery-1.4.2.min"/>
You need a </script> to have a valid markup
<script type="text/javascript" src="jquery-1.4.2.min"></script>
That is a big NoNo and might be the reason for your problem. Another thing is, there is no .js in your filename? Make sure that your jQuery lib has the correct name aswell.
Reference: http://www.w3.org/TR/xhtml1/#C_3
Because the ID of the second input element is UsingJQuery (capital U), not usingJQuery.
$('#UsingJQuery').bind('keyup', function(){alert('bar');});
should do it.
Update:
The error must be somewhere else, your code is correct. See: http://jsfiddle.net/H2xye/
Maybe you did not include jQuery correctly:
src="jquery-1.4.2.min.js"
you are missing .js at the end of the path. At least this is the standard naming, maybe you renamed it.
The error console should tell you more.
Update2: See jAndy's answer regarding the </script> tag. This is probably the other problem!
Please change
from
<script type="text/javascript" src="jquery-1.4.2.min"/>
to
<script type="text/javascript" src="jquery-1.4.2.min.js"/>

Categories