Remove div and replace using button onclick - javascript

i would like remove a current div and replace with another using onclick with a button
i've tried the below method but as the old and new div's both contain different scripts it doesn't load the scripts in the new div correctly
document.getElementById("div1").style.display="block";
document.getElementById("div2").style.display="none";
I guess the best way is to actually remove div1 and replace with div2 loading a fresh?
how would i do this?
i've tried the jquery solutions but my website doesn't seem to like jquery. anyone know why? i've tried pure javascript and that works but not jquery. i'm loading jquery in the head :(
i understand my template relies heavily on mootools which can conflict with jquery

jsFiddle
<div id="div1">div1 contents</div>
<div id="div2" style="display: none">div2 contents</div>
<button id="button">Button</button>
$('#button').on('click', function() {
$('#div1').remove();
$('#div2').show();
});
Or if you just want to replace the HTML
$('#button').on('click', function() {
$('#div1').html($('#div2').html());
});

You can accomplish this easier with jquery, first be sure to put the jquery include within your head tags. This is the latest version of jquery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
given this html:
<div id="div1">div1</div>
<div id="div2">div2</div>
<button id="toggle">toggle</button>
and this css:
#div2 { display:none; }
you can use this jquery:
$("#toggle").click( function() {
$("#div1,#div2").toggle();
});
this will toggle back and forth between the divs, jsfiddle here > http://jsfiddle.net/WMPx7/
if you don't want to toggle the divs, you can change the jquery to look like this:
$("#toggle").click( function() {
$("#div1").hide();
$("#div2").show();
});

I am presuming that your both div have an id attribute and have some data.
Pure Javascript
function fnChangeDivContent(){
document.getElementById("div1").innerHTML = document.getElementById("div2").innerHTML;
}
HTML
<input type ="button" value = "Replace Div Content" onclick = "fnChangeDivContent()" />
might help you.

Try this:
hideshow divs
and the js:
function elements() {
$('#div1').hide();
$('#div2').show();
}

Related

How to initialize custom html class with Javascript

I am looking to change the color of some text when the page loads but I cannot get any code to run with the custom class.
the html class used as so:
<div class="metricCardData">
the java script that is supposed to change color of some of the child attributes:
$('.metricCardData').on('load', function(e) {
alert("hello")
var cssClass = this.getElementsByClassName('severity')[0].value.toLowerCase();
this.getElementsByTagName('h2')[0].className = cssClass
});
I have also tried the below but says load isnt a function
$('.metricCardData').load( function(e) {
alert("hello")
var cssClass = this.getElementsByClassName('severity')[0].value.toLowerCase();
this.getElementsByTagName('h2')[0].className = cssClass
});
That alert doesn't get displayed. When I change out load for "click" it works on click so load must not be an event. What event do I put there or how to I initialize that custom class on load?
EDIT the Desired html looks like
<div class="metricCardData">
<h4>Average Size</h4>
<h2 class="bad">19807.0</h2>
<p></p>
<input class="severity" type="hidden" value="BAD">
</div>
I check the input class "severity" for its value in this case BAD and i have a css class that is "bad" that I apply to the h2. These metricCardData are in a thymeleaf loop
You can use $(document).ready() of jquery, so that when the DOM loads in your browser then your script will be executed.
For example:
<div class="metricCardData">Test Text</div>
<script>
$(document).ready(function(){
$('.metricCardData').css('color','red');
});
</script>
If you want to do this using class, you can use below code
<div id='divId' class="metricCardData">Test Text</div>
<script>
$(document).ready(function(){
$('#divId').addClass('ChangeColorClass');
});
</script>

Show hidden HTML elements with javascript

I have the following in the <body> of my HTML
<div class="exact">
<div> <a id ="button_some_id" href="#"> Toggle Hidden </a></div>
<div id="item_some_id" hidden>This is hided</div>
<script type='text/javascript'>
$("#button_some_id").click(function() {$("#item_some_id").toggle();});
</script>
</div>
Link to jfiddle
The idea here is I want someone to be able to click on the Toggle Hidden link and it will show some hidden content (and when it is clicked again, hide it). However the javascript is not being triggered. Any help is greatly appreciated
You haven't inputted JQuery or JQuery UI into your JSFiddle's resources. Once putting them in, it works:
https://jsfiddle.net/tj8o8gwf/2/
$("#button_some_id").click(function() {$("#item_some_id").toggle();}); //works fine
Look at the External Resources section on the left hand side of the fiddle.
You also need to make sure the DOM is loaded.
$( document ).ready(function() {
$("#button_some_id").click(function() {$("#item_some_id").toggle();});
});
You need to make sure that jQuery is inputted
$(document).ready(function () {
$("body").on("click", "#button_some_id", function () {
$("#item_some_id").toggle();
});
});
Try this
//HTML
<div class="toBeHidden" hidden>This is hided</div>
//JS inside your click
if ($(".toBeHidden").is(":visible"))
{
$(".toBeHidden").hide('slow');
}
else
{
$(".toBeHidden").show('slow');
}

How to .append text to a div using jQuery?

I'm trying to append a piece of text to a div using jQuery. I try to do this using the following code:
<html><head></head><body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sendButton").click(function(){
$("#conversation").append("<P>This is a message");
});
});
</script>
<div class="conversation"><p>some message</div>
<form><input type="button" id="sendButton" value="Send Message"></form>
</body></html>
Seeing the multitude of tutorials on the subject it seems to be such a simple thing to do, but I can't seem to figure out what I'm doing wrong here. Any help would be greatly appreciated.
You need to use class selector, As #conversation referes to element with id conversation
$(".conversation").append("<P>aergerag");
Fiddle DEMO
EDIT
You should look at this To Close or Not To Close Tags in HTML5 and a good question Closing tags in HTML5
replace # with . in your selector (conversation is a CLASS)
$(".conversation").append("<P>aergerag");
I am not any good at jQuery but from one of my projects I had to simply target the div with html as:
var someData = "This is a message";
$("#conversation").html(someData);
If some contents exists before this, then you can retrieve them, concatenate, and write it back into the target div.

Javascript: why on one page document.write('id').style.display='block' works and on another not?

I do not how can it be at all!!!
I have code:
<script type="text/javascript">
function SHOW(){document.getElementById('11').style.display='block';}
</script>
show
<div id="11" style="display:none;">Some text</div>
On one page this script works as it should be, and on another it doesn't work at all...
If this important I use jQuery on both pages.
How can it be?
Thanks!
Since you said you're using JQuery, how about you use JQuery?
CSS:
.hidden {
display:none;
}
HTML:
<span id="show">Show text</span>
<div id="foobar" class="hidden">Some text</div>
JQuery:
$(function(){
$('#show').click(function(){
$('#foobar').show();
});
});
Demo: http://jsfiddle.net/rdBkF/
Vitali, you don’t need to use JQuery for something that easy, it is just wasting resources for no reason.
The problem of the code you just gave is that the ID of the element is “11”, and ID attributes should always start with a character or underscore, never with a number.
It might work in some browsers and in others might not.
My recommendation, use an ID that begins with underscode or an a-z or A-Z character and once the page has been loaded, register an event listener to the A element.
window.addEventListener('load',
function()
{
elementA = document.getElemenById('IDOfTheelementA');
elementDiv = document.getElemenById('IDOfTheelementDiv');
elementA.addEventListener('click',
function() { elementDiv.style.display = 'block'; },
true);
}, true);

Can I assign an action from javascript dynamically?

Typically, I do this to prompt the alert box, and say Hello
<div style="color:#00FF00" onclick=alert("Hello"); id = "helloDivTag">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
But this time, I don't want to do it inside the html tag, I want to do it inside the js. How can I do so? Thank you.
i would recommend using the jquery framework then you just do this
$(function(){
$('#helloDivTag').click(function(){
alert("Hello");
});
});
implementing it would look like this you just put it in the header
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(function(){
$('#helloDivTag').click(function(){
alert("Hello");
});
});
</script>
why i recommend using jquery and not simple javascript is because there is alot of other functionality that could get in handy almost everytime you want to do something
window.onload = function() {
document.getElementById('helloDivTag').onclick = function(){
alert('hi');
}
}
when the window loads the click event is attached to your div and whenever you do the clicks the alert happens. This is called seperating behvaiour from structure and style.

Categories