Javascript jQuery click no result - javascript

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!");
}

Related

Why does `jQuery` `hide()` method not work?

I've done this before and yet I'm stuck in this simple implementation.
Here's the html:
<html>
<head>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
</head>
<body>
<p id='hiding'>blah</p>
<p>blahblah</p>
</body>
</html>
And the javascript:
$(document).ready(function() {
$("p").click(function() {
$(this).hide();
});
});
The hide() doesn't work, and passing in the hiding id also doesn't work.
Change the order of script
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript" src="script.js"></script>
Use .on, because it's allows for dynamically created Dom objects to be manipulated.
$(document).ready(function() {
$("p").on('click', function(){
$(this).hide();
});
});
that should to the job. :)
check this and arrange scripts file also
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript" src="script.js"></script>
https://jsfiddle.net/s8191o77/

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>

External Javascript doesn't load when called

Hi so I'm trying to like a javascript file to my web page, when it was in the HTML file it worked fine, but I won't to neaten it up a little by putting the JS in a different file
HTML:
<head>
<meta charset="utf-8" />
<title>Digital Canvas Web Designs</title>
<link rel="stylesheet" href="/CSS/Template.css"/>
<link rel="stylesheet" href="/CSS/news.css"/>
<link rel="shortcut icon" href="images/tablogo.ico" > <!-- tab logo generated at http://www.favicongenerator.com/ -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Javascript/newshide.js" type="text/javascript"></script>
</head>
<body>
and Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
And the part of HTML where the JS should work.
<span id="show">more>></span>
<p id="hidden" hidden>COOL STORY BRO
<span id="hide">less</span> </p>
wrap all into document.ready
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
Also: you have another bug, change the last script for:
<script src="Javascript/newshide.js" type="text/javascript"></script>
Docs
Change this
<script src=".\Javascript\newshide.js" type="text/javascript"></script>
To this
<script src="Javascript/newshide.js" type="text/javascript"></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?

Why this jquery code is not working for me?

I wrote very samll code in jquery, but i am unable execute it Where i am wrong?
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js">
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>
Any help will be greatly appriciated.
You forgot to close your script tag for jquery. It should be like this:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('p').click(function() {
$(this).hide();
});
});
</script>
Notice the closing </script> tag
You did not close the first script tag:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
You forgot to close script tag
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"> </script>
Close the script tag inside the head tag.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>

Categories