I tried using jQuery on my website, but it did not seem to work. this code doesn't work. When I click on #test, it doesn't hide. Please help. Thanks!
this is my Html file :
<!DOCTYPE html>
<html>
<head></head>
<body>
<p id="#test">Hello world !</p>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/code.js"></script>
</body>
</html>
this is my code.js :
$(document).ready(function() {
$('#test').click(function() {
$('#test').hide();
});
});
your html is wrong, remove hash # sign:
<p id="test">Hello world !</p> // this is right
while you have written:
<p id="#test">Hello world !</p> // this is wrong
NOTE:
you can get current element reference using this:
$(document).ready(function() {
$('#test').click(function() {
$(this).hide();
});
});
$("#test") means that select element which has id equal to test
Try to escape the meta character with \\,
$(document).ready(function() {
$('#\\#test').click(function() {
$('#\\#test').hide();
});
});
DEMO
Related
This code is trying to change a paragraph element in the html, but nothing in the script element seems to even be recognized
We have tried many different variations of this code to try to understand what isn't working, but nothing in the script element is even recognized
<!DOCTYPE html>
<html>
<head>
<h3>Final Schedule</h3>
</head>
<body>
<p id ="fs">hi2</p>
<input id="request" type="button" value="Get Final Schedule">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
</body>
</html>
I want the code to change the paragraph element to something else, but nothing is working, and the console.log()'s aren't working at all
You can't put your code inside the script element for jQuery. Instead add another script tag below it with your code.
<!DOCTYPE html>
<html>
<head>
<h3>Final Schedule</h3>
</head>
<body>
<p id ="fs">hi2</p>
<input id="request" type="button" value="Get Final Schedule">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
</body>
</html>
A script tag can't have both src and internal text code. You need two tags
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
you need 2 script tags, 1 to list the jquery library you're using and 1 to write the actual code
Try making one <script> tag for jQuery (<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>) and another one for your code:
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
You are using a rather old version of jQuery and might want to update to a more recent one
A script tag can either have an src attribute, requiring a script file, OR script content directly, not both. So just make a second script block with the code you'd like to execute:
<p id ="fs">hi2</p>
<input id="request" type="button" value="Get Final Schedule">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</head>
<body>
<h1 id="popup">dfdfs</h1>
</body>
</html>
i have a simple javascript which shows alert when the h1 id exits ,but i am not getting the alert message.code in jquery also can help.
Put your <script> tag at the end of the body:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Write your script after the element so that it runs after element is present. See the code:
<!DOCTYPE html>
<html>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Plunkr for the same is: "http://plnkr.co/edit/0fznytLHtKNuZNqFjd5G?p=preview"
Because, you're executing the script before document is completely loaded, the element #popup is not found.
Use DOMContentLoaded
Use DOMContentLoaded to check if the DOM is completely loaded.
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
if (document.getElementById("popup")) {
window.alert("hi");
}
});
</script>
Using jQuery ready
Using jQuery, you can use ready method to check if DOM is ready.
$(document).ready(function() {
if ($("#popup").length) {
window.alert("hi");
}
});
Moving script to the end of body
You can move your script to the end of body.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
// Move it here
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Your script is above the h1 element that you're trying to retrieve. Because of this, it is being run before the element actually exists.
Either move the script to the bottom of the page, or wrap it in a jQuery ready block. And consider moving it to an external file.
$(function() {
if(document.getElementById("popup")) {
window.alert("hi");
}
});
try this easy way. no need of jquery.
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if(document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
It is good practice to use the <script> tags in <body> because it improves the performance by loading it quicker.
And then use
<body>
<script>
$(function() {
if(document.getElementById("popup")) {
window.alert("hi");
}
});
</script>
</body>
Below code gives you solution
$(document).ready(function() {
if (document.getElementById("popup")) {
window.alert("hi");
}
});
I'm trying to change the text of h2 , when the user clicks a button.
Javascript :
$("#GoButton").click(function() {
$("#myDiv").html("Hello World");
});
and the html :
GO
I have tried to switch links so jQuery will load first (that solved another problem).
Still can't find what im doing wrong.
Also tried :
$("#GoButton").click(function() {
$("#myDiv").innerHtml("Hello World");
});
You need ensure if DOM is loaded already using $(function(){.. }); and prevent default behaviour of link using e.preventDefault()
$(function(){
$("#GoButton").click(function(e) {
e.preventDefault();
$("#myDiv").html("Hello World");
});
});
Demo
Your javascript (binding a function on the click) may be executed too early, like in this example : http://jsfiddle.net/ug7f0te1/
Try binding events after the DOM is fully loaded:
$(function(){
$("#GoButton").click(function() {
$("#myDiv").html("Hello World");
});
});
This should work for you
$("#myDiv").html("Hello World");
here is the code http://jsfiddle.net/utkarshk/h0vmmdn8/
HTML:
<div id="mydiv">fd</div>
<h2 id="mydiv1">4343</h2>
GO
JS.
$("#GoButton").click(function() {
$("#mydiv1").html("Hello World");
$("#mydiv").html("Hello World");
});
Might be clearer if you post all your HTML. From a guess, here's something which does what I think you want:
<html>
<body>
<div id="myDiv">
<h2 id="myHeader">Click Go</h2>
<p>GO</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#GoButton").click(function() {
$("#myHeader").html("Hello World");
});
});
</script>
</body>
</html>
if you just want to change text than you can make use of text() not of html() method
$("#myDiv").text("Hello World");
Update
this is working you need to do proper setting for this in jquery : http://jsfiddle.net/0oc53fdd/5/
<!DOCTYPE html>
<html>
<script type="text/javascript">
function here()
{
//alert(document.getElementById("myHeader").innerHTML);
document.getElementById("myHeader").innerHTML = "Hello World";
}
</script>
</head>
<body>
<div id="myDiv">
<h2 id="myHeader">Header</h2>
<button id="GoButton" onclick="here();">GO</button>
</div>
</body>
</html>
Hope you can get something from it.
I've got a quick question
So, my code is something like:
<html>
<head>
</head>
<body>
<?php
//file that contains the modals
include ('modals.php');
<button class="openCompany">
OPEN
</button>
?>
//...
</body>
</html>
and at the very end, I've got a JS script to open a modal like:
<script type="text/javascript">
$('#companyModal').modal('show');
</script>
which works perfectly, but when I do
$(".openCompany").click(function () {
$('#companyModal').modal('show');
});
it doesn't anymore.
Thanks.
try this
$(document).ready(function(){
$(document).on("click", ".openCompany", function(e) {
$('#companyModal').modal('show');
});
});
in my aspx page i have a div which contains simple html ,has some id(say 'datadiv')
using jquery i want to get the html of that div (entire div) into a JavaScript variable
how can it be done?
thank you.
var someVar = $("#somediv").html();
If you want the equivalent of Internet Explorer's outerHTML to retrieve both the div and it's contents then the function from this page that extends JQuery should help:#
jQuery.fn.outerHTML = function() {
return $('<div>').append( this.eq(0).clone() ).html();
};
Then call:
var html = $('#datadiv').outerHTML();
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<b>Hello</b><p>, how are you?</p>
<script>
$("b").clone().prependTo("p");
</script>
</body>
</html>
**Out put:**
Hello
Hello, how are you?
Finally got it working..!! the simplest way !! HTML Code
<div class="extra-div">
<div class="div-to-pull-in-variable">
// Your Content Here
</div>
</div>
JQuery Code
$(function() {
var completeDiv = $('.extra-div').html();
alert(completeDiv);
})
});