this jquery code doesn't work? - javascript

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>

Related

Load div from external file using JQuery

I'm running into a problem with JQuery, I've read multiple threads about this but I cannot for the life of me figure out what is wrong with my code. I've gotten it down to a pretty simplistic version of what I was trying to do, but it still will not work. Here is the code that I'm trying:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function() {
$('#content').load("import.html");
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
and here is the page that I'm trying to import:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="test-div">
<p>This is some text.</p>
</div>
</body>
</html>
can somebody please point out what I might be doing wrong here?
The DOM is likely not fully loaded when the .load function is being run. Change to this.
<script>
$(document).ready(function() {
$('#content').load("import.html");
});
</script>
Note - as in the comment, this only works on a server.
It should ideally work. There must be some other issue
Check if jquery library file is loading correctly
HTML page name is import.html or not.
At last, Are you getting any error on console?

JQuery Failed to Handle Button's On Click Event

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

The onmousedown Event Doesn't Seem to be Triggering

In one of my projects the onmousedown event didn't seem to be doing anything when it was meant to trigger a function in a separate JavaScript file.
I tried incorporating both onmousedown and onClick on a button in a small test file to see if it was just a problem in the project, and it didn't work either, leading me to believe that I must be doing something wrong...
Here is my test.html file:
<!DOCTYPE html>
<html>
<body>
<button onmousedown="click()">Click</button>
<span id="testSpan"></span>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
And here is my main.js file:
function click() {
document.getElementById("testSpan").innerHTML = "SUCCESS";
}
To explain, the HTML button is supposed to trigger the click() function in main.js, and then cause "SUCCESS" to appear through the span element beside the button in the webpage; which it doesn't for me.
I have tried to do the same in a pen on codepen.io where it didn't seem to work either. Even weirder is the fact that I don't have any errors showing up at all... what am I missing?
It isn't working because you named your function 'click'. I changed the name to 'press' and your code works fine!
function press() {
document.getElementById("testSpan").innerHTML = "SUCCESS";
}
<!DOCTYPE html>
<html>
<body>
<button onmousedown="press()">Click</button>
<span id="testSpan"></span>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Try it :
<!DOCTYPE html>
<html>
<body>
<button onmousedown="window.click()">Click</button>
<span id="testSpan"></span>
<script>
function click() {
document.getElementById("testSpan").innerHTML = "SUCCESS";
}
</script>
</body>
</html>

Issue with JQuery DOM and .click()

This is the code:
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("#favorite").click(function(){
alert('click!')
});
});
</script>
</head>
<body>
<h4>Favourites <small><%= photo.fav %></small></h4>
<button id="favorite" class="btn btn-inverse">Favorite</button>
</body>
</html>
When I click the button, I don't get the alert window, so I think is a problem with the DOM tree, How can I resolve this...?
Thank's advance!
Or... You're not including jquery...
EDIT: Sarcasm aside, include the JQuery library before your code to be able to use it.
https://developers.google.com/speed/libraries/devguide
Here's an example of how it should looks... It works fine.
http://jsbin.com/osijok/1/edit
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#favorite").click(function(){
alert('click!')
});
});
</script>
</head>
<body>
<h4>Favourites <small><%= photo.fav %></small></h4>
<button id="favorite" class="btn btn-inverse">Favorite</button>
</body>
</html>
Pretty simple.
You don't have the JQuery library loaded on your page prior to executing methods from that library it looks like.
You need to import the jQuery JS Library to be able to use functions such as
$(document).ready(function(){ .. etc.
How can I resolve this...?
Use plain JavaScript
(function(){
document.getElementById("favorite").onclick = function() { alert('clicked'); }
}());

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