Jquery show div when link gets clicked - javascript

Im trying to show/hide a div using jquery when a link gets clicked. I put this in my head section:
<script type="text/javascript">
$("#attach_box").click(function {
$("#sec_box").show()
});
</script>
I have a link that looks like this:
+ Add a Postal Address (If Different)
And a div that looks like this:
<div id="sec_box" style="display: none;">
Hello world!!
</div>
This doesn't work and I can't figure out why. Any ideas?

You need to attach the click handler in the document.ready in order to make sure that the DOM has been loaded by the browser and all the elements are available:
<script type="text/javascript">
$(function() {
$('#attach_box').click(function() {
$('#sec_box').show();
return false;
});
});
</script>
Also you forgot to put parenthesis () next to the anonymous function in the click handler.

Chances are the DOM isnt fully loaded yet.
<script type="text/javascript">
$(document).ready(function()
{
$("#attach_box").click(function() {
$("#sec_box").show()
});
});
</script>
put that in your head and put your initialization code in there.

Related

Issue When Dynamically Removing Script Tags With Jquery

I have created two short javascript files, each containing a $(document).ready function that has javascript to detect a button click from the html file that has included it. My main html file has the script tags pointing to each file in the header:
file1.js:
$(document).ready(function(){
$('.wrapper').on('click', '.click_1', function(){
alert('hello from the first file');
});
});
file2.js:
$(document).ready(function(){
$('.wrapper').on('click', '.click_2', function(){
alert('hello from the second file');
});
});
My goal, however, is to be able to dynamically remove one of the script tags (the javascript from the second file) from the header, and its functionality along with it. To do so, I created a script in my main html file to remove the target script tag via the src attribute. However, while an inspection of the page source reveals that the third script tag has indeed been removed, its functionality remains. For instance, even after clicking the .remove_2 button, I can still click the .click_2 button and receive the "hello from the second file" alert:
main.html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
</head>
<body>
<div class="wrapper">
<button class='click_1'>File1</button>
<button class='click_2'>File2</button>
<button class='remove_2'>Remove File2</button>
</div>
</body>
<script>
$(document).ready(function(){
$('.wrapper').on('click', '.remove_2', function(){
$('script[src="file2.js"]').remove();
});
});
</script>
</html>
In short, I wish to be able to dynamically remove a script tag so that the javascript in the file that the tag points to no longer has any affect on the html page. However, I have not been able to accomplish this. Can anyone tell me what is wrong with my code? Also, is what I am trying to accomplish even possible? Thank you.
Removing an external script does not remove event handlers. They are attached to current document.
A solution can be:
remove the script
get all html page
replace html page with new content
$('.wrapper').on('click', '.remove_2', function(){
$('script[src="file2.js"]').remove();
var html = document.documentElement.innerHTML;
document.open('text/html');
document.write(html);
document.close();
});
In jQuery, replacing only the header after removing the script:
$('.wrapper').on('click', '.remove_2', function(){
var header = $('html head');
header.find('script[src="file2.js"]').remove();
$('html head').replaceWith(header);
});
Try unbinding the click event from the second button before removing it:
$('.click_2').unbind("click");
Although unbind is now deprecated. The newer form is 'off':
$('.click_2').off( "click", "**" );
http://api.jquery.com/off/
That said, you do seem to be using a rather peculiar approach to disable click functionality.

Not able to append the div using click event of jquery

Hello guys I want to dynamically append the div to the div that i click. Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="query.js">
$('.hello').click(function(){
$(this).append('<div>I am the new one</div>');
});
</script>
</head>
<body>
<div class="hello1">Hello guys</div>
<div class="hello2">Hiiiiiiii</div>
<div class="hello3">Awesome</div>
</body>
</html>
Can anyone tell me whats the issue with my code
There are 3 problems in your code
You can't have src and contents for an script tag
Since your script is placed before the elements are loaded, you need to put your script in a dom ready handler
There is no class called hello in your html
so
<div class="hello">Hello guys</div>
<div class="hello">Hiiiiiiii</div>
<div class="hello">Awesome</div>
<script src="query.js"></script>
<script>
jQuery(function ($) {
$('.hello').click(function () {
$(this).append('<div>I am the new one</div>');
});
})
</script>
Try wrap your jquery code in document.ready like
$(document).ready(function(){ // this will execute when DOM is ready
//your code
$('.hello1').click(function(){ //updated class name
$(this).append('<div>I am the new one</div>');
});
})
As i can see you are using hello class to bind click event your it
doesn't present in your HTML. So if you want to attach event to all
class start with hello use this:
$(document).ready(function(){
$('div[class^="hello"]').click(function(){
$(this).append('<div>I am the new one</div>');
});
});
DEMO
Instead of this
<script src="query.js"> //don't use src here
Use:
<script type="text/javascript">
Try this : You don't have div with class="hello" but class which starts with hello viz hello1, hello2, hello3. Hence use start with selector as shown below. Also put your code inside $(document).ready(function... or $(function(){... so that it will ensure DOM is ready and will attach click event handler.
You must include jquery library first and then put jquery script in another script tag.
<script src="query.js"></script>
<script>
$(function(){
$('div[class^="hello"]').click(function(){
$(this).append('<div>I am the new one</div>');
});
});
</script>
You need to include jQuery before and for using it. Use
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
You cannot load script and define script inside it. So, following is not valid
<script src="query.js">$('.hello')...</script>
Use ready() or DOMContentLoaded event or move the script to the bottom of <body>
There is no element with hello class in the markup, but you're binding the event on it.
Code:
<script src="query.js"></script>
<script>
$(document).ready(function() {
$('.hello').click(function() {
$(this).append('<div>I am the new one</div>');
});
});
</script>
Demo
$(document).ready(function() {
$('.hello').click(function() {
$(this).append('<div>I am the new one</div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="hello">Hello guys</div>
<div class="hello">Hiiiiiiii</div>
<div class="hello">Awesome</div>
First of all, in order to use $() selectors you need to include a proper version of jquery. Then, you need to select an element: you have any element with hello class, instead, you have hello1, hello2, and hello3. You could remove the numbers, so all of them will have a hello class. And finally, because these elements doesn't exist when the js code is executed, you need to wrap your code within a document ready event, or move it to the end of your html body tag. Good luck!
There is no .hello class in your code, you use hello1, hello2 and hello3 as classnames, they should all just be hello.

How to execute script written in main html file from another html page loaded using jquery load()

I have two files index.html and subpage.html. Using jquery load() i am loading subpage.html into a div #result in index.html.
I have written js in index.html for both index.html & subpage.html.
Pages goes like this:
index.html:
<script type="text/javascript">
$("document").ready(function(e) {
$("#result").load('subpage.html');
});
</script>
<div id="result"></div>
subpage.html:
<p>Sub page</p>
<input type="button" id="clickMe" value="Click" />
But here, click function written in index for button #clickMe is not triggering while clicking the button.
Is there any possible way to make this happen?
If you want to use the .on delegation, you have to attach the event to a higher level element and specify the object or class as the delegate.
$('body').on('click',"#clickMe", function(){
alert('clicked dynamic dom element');
});
http://api.jquery.com/on/
You can make a function to set your Event handler, and do not forget to use .off for setting triggers. and afer $("#result").load('subpage.html');, call that function.
function setEventHandler(){
$('#clickMe').off('click').on('click',function(){
// codes here
alert('Clicked');
});
}
and your codes will be :
<script type="text/javascript">
$("document").ready(function(e) {
$("#result").load('subpage.html');
setEventHandler();
});
</script>
<div id="result"></div>

jQuery just not working

For some reason my jQuery script just doesn't want to work, and it's really really simple, I've taken everything away except the actual jquery script, it's really annoying please help.
Thank you!
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$("#click").click(function () {
alert("works!");
});
</script>
</head>
<body>
Button
</body>
</html>
P.S. jQuery JS file is valid.
Change your code to this. It ensures that the JavaScript is executed once all your HTML elements have been loaded to the page:
$(document).ready(function () {
$("#click").click(function() {
alert("works!");
});
});
However, you should move your script tags to the bottom of the page, to ensure that they do not block. This will also mean you don't actually need the $(document).ready callback.
You need to wrap your code within
$(function(){
// your code here which relies on DOM elements
});
Otherwise you DOM has not been loaded and events will not be bound to elements.
Wrap your functions into the $(document).ready()
$(document).ready(function(){
$("#click").click(function() {
alert("works!");
});
});
Add your code inside document.ready like this
$(document).ready(function () {
$("#click").click(function () {
alert("works!");
});
});
or add your code at the end of the document like this
<body>
Button
// Other elements...
<script type="text/javascript">
$("#click").click(function () {
alert("works!");
});
</script>
</body>
$(document).ready(function(e) {
//TO DO your code goes here
});
Just change your script tag to the "/body" tag.
That will let the browser create the DOM and read script's one by one!
Cheers!
Try this:
$("#click").live("click",function() {
alert("works!");
});

Why doesn't the following jquery script work?

I have a simple single page setup. Under a root folder, I have 3 subfolders (js, css, and images). In the root folder, I have an index.html page with the following content:
<html>
<head>
<title></title>
<script language="javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="javascript" src="js/myscript.js"></script>
</head>
<body>
<a onclick="doSomething()" href="#" class="doSomething">Click!</a>
</body>
<html>
myscript.js contains the following code:
$('a.doSomething').click(function(){
//Do Something here!
alert('You did sometihng, woo hoo!');
});
When I click the link, nothing happens. What am I missing?
Wrap document.ready around the code:
$(document).ready(function() {
$('a.doSomething').click(function(){
//Do Something here!
alert('You did sometihng, woo hoo!');
return false; // return false to prevent default action
});
});
As it is right now, you are trying to bind an event to an element that does not yet exist in the DOM.
Also, not sure why you have the onclick on the link itself, as the whole point of jQuery is to be able to take those ugly inline events out of there and bind them cleanly in the javascript. If you do this:
yay click me
And then use the code above, it should work fine.
At first I thought you were just missing a function named "doSomething". Then I realized you where expecting your selector to find the anchor tag anyway. However, that won't happen. At the time your script runs, the anchor hasn't been added to the DOM yet.

Categories

Resources