Why this jquery code is not working for me? - javascript

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>

Related

Javascript jQuery click no result

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

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/

jQuery code doesn't work in CodeIgniter

I'm trying to do following with jQuery:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#test').hover(function(){
alert('sub');
});
</script>
</head>
Thanks.
I'm assuming that HTML DOM element with id="test" exists.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function() {
$('#test').hover(function() {
alert('sub');
});
});
</script>
</head>
By the way, CodeIgniter has nothing to do with your issue.
Seems like you are accessing an element which does not exists.
Try this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#test').hover(function() {
alert('sub');
});
});
</script>
</head>

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>

Categories