I am using JQuery for this:
Taking complete html and appending into a new div
My JQuery code:
$(document).ready(function(){
$("#addNew").click(function(){
var maindiv = document.getElementById('nestedFeilds').html();
$("#showhere").append('maindiv');
});
});
The HTML is pretty complex and lengthy so take just reference
<div class= "row" id="mainContainer">
<label for="Education" style="margin-left: 30px ; float:left;">Education</label>
<div class="col-xs-4 inner"></div>
<div class="col-xs-8 verticalLine" id="nestedFeilds" style=" margin-left: 10px ;float:left; display: none;">
In the last div, it is actually a form and I need its complete html to be shown with different name attribute when ever I click button
I am calling my function like this
<div id= "showhere"></div>
<div style="margin-left: 133px;float:left;">
<a id="addNew"> Add Education</a>
</div>
If you want to get innerHTML, you should use element.innerHTML, and if you want to append previously saved inner HTML, you can use element.append(variableWithPreviousInnerHTML). Here is the working example:
$(document).ready(function() {
$("#addNew").click(function() {
var maindiv = document.getElementById('nestedFeilds').innerHTML;
$("#showhere").append(maindiv);
});
});
div {
width: 100px;
height: 100px;
border: 1px gray solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nestedFeilds">Content from #nestedFeilds</div>
<div id="showhere"></div>
<button id="addNew">Click</button>
If anything isn't clear, feel free to ask.
Related
I'm trying to insert a wrapper around two divs, one with a dynamically generated ID. The div with the random ID is dynamically generated. No matter what I try, the wrapper is getting inserted after the target div though.
Before wrapper
<div id="search">Search</div>
<div id="234234">Unknown</div>
<div id="list">List</div>
After wrapper
<div id="search">Search</div>
<div id="wrapper">
<div id="234234">Unknown</div>
<div id="list">List</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="search">Search</div>
<div id="wrapper">
<div id="234234">Unknown</div>
<div id="list">List</div>
</div>
EDIT
I have decided to use CSS to reposition the elements so that I no longer need the wrapper.
Simply wrap the children!
$("#wrapper").children().wrapAll("<div class='wrapper'/>")
#wrapper { padding: 20px; }
.wrapper { background-color: gold; outline: 2px solid red; }
<div id="wrapper">
<div id="123456">has whatever ID</div>
<div id="list">has id</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Or, to target elements that actually have any ID attribute use the "[id]" selector:
$("#wrapper").children("[id]").wrapAll("<div class='wrapper'/>")
#wrapper { padding: 20px; }
.wrapper { background-color: gold; outline: 2px solid red; }
<div id="wrapper">
<div id="list123456">has id</div>
<div id="list">has id</div>
<div>Foo bar</div>
<div id="list234">has id</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Before Edit:
Use the :not([id]) or / and [id=""] selectors if you want to target "no ID attribute" / or / "empty ID attribute" respectively:
$("#wrapper").children("div:not([id]), div[id='']").wrap("<div class='wrapper'/>")
#wrapper { padding: 20px; }
.wrapper { background-color: gold; outline: 2px solid red; }
<div id="wrapper">
<div id="">has no id</div>
<div>has no attribute id</div>
<div id="list">has id</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
If you do not know the element id, you can still use a class attribute to access it. Give the element with the random id (and any other elements you want to move) a class attribute so you can access via JavaScript and manipulate the DOM. You can do it simply with no jQuery, like this:
// Create the `div.wrapper` element
const wrapperEl = document.createElement('div');
wrapperEl.classList.add('wrapper');
// Create a reference to each element you want to make a child of `div.wrapper`
const childEls = document.querySelectorAll('.wrapped');
// Move the elements from `body` to `div.wrapper` parent
wrapperEl.replaceChildren(...childEls);
// Append the `div.wrapper` to the body element
const bodyEl = document.querySelector('body')
bodyEl.appendChild(wrapperEl);
console.log(wrapperEl.outerHTML);
<div id="search">Search</div>
<div id="234234" class="wrapped">Unknown</div>
<div id="list" class="wrapped">List</div>
I've logged the wrapperEl HTML in the console, but you can also inspect the HTML in your dev tools "Elements" tab to see the wrapper.
Reference: https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/replaceChildren#transferring_nodes_between_parents
I want to dynamically change the class of the element #sidePanel from .compact to .expanded, in this code:
<div id="sidePanel" class="compact"></div>
<div id="topbar">
<div id="buttonContainer">
<div id="button"></div>
</div>
</div>
I'm stuck here, I can't apply the class to the correct <div>, I can just add the class to the topbar:
$(document).ready(function(){
$("#button").mouseover(function(){
$("this").parent().eq(2).addClass(".expanded").removeClass(".compact");
});
});
I also tried this:
$(document).ready(function(){
$("#button").mouseover(function(){
$("#sidepanel").addClass(".expanded").removeClass(".compact");
});
});
Your second example was pretty close. When you $.addClass() and $.removeClass(), or are referring to classnames outside of using a selector to target something, just reference the class name (no need for the leading .). Also JS (and CSS) are case-sensitive, so $('#sidepanel') won't target #sidePanel - the cases need to match.
$("#button").mouseover(function() {
$("#sidePanel").addClass("expanded").removeClass("compact");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
<div id="buttonContainer">
<div id="button">button</div>
</div>
</div>
In your first example, $(this) is how you reference this in jQuery. If you put this in quotes, the word this is treated as a string literal instead. And since to use $.parent() you would need to go up 2 levels, you should use $.parents() with the ID of the parent you want to target, then use $.prev() to select the previous element, which is #sidePanel. So to traverse the DOM like that, this is how I would do it.
$("#button").mouseover(function() {
$(this).parents('#topbar').prev().removeClass('compact').addClass('expanded');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
<div id="buttonContainer">
<div id="button">button</div>
</div>
</div>
Your problem is you used $("#sidepanel") instead of $("#sidePanel")
Here's a working example after the change is made:
$(document).ready(function(){
$("#button").on('mouseover', function(){
$("#sidePanel").addClass("expanded").removeClass("compact");
});
});
#topbar > div {
width: 100px;
height: 30px;
background: #ccc;
margin-top: 20px;
}
#sidePanel {
width: 100%;
height: 40px;
background: #ccc;
}
#sidePanel.expanded {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidePanel" class="compact"></div>
<div id="topbar">
<div id="buttonContainer"></div>
<div id="button"></div>
</div>
first: the solution
$(document).ready(function()
{
$("#button").mouseover(function()
{
// class names - without the dot
$("#sidepanel").addClass("expanded").removeClass("compact");
});
});
then: why you were really close on your first attempt
$(document).ready(function()
{
$("#button").mouseover(function()
{
// $(this) selector uses the `this` keyword (not as a string)
$(this).parent().eq(2).addClass(".expanded").removeClass(".compact");
});
});
I have a div whose display is "none" in css: display:none;. And it is supposed to stay hidden even after the page loads but while the page is loading it is being displayed like a flash, for a second, and hiding again.
Is there any way, with JQuery, that I can override it to stay hidden during the entire operation?
<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7" >
<div id="documentStatus_div">...</div>
</div>
This code defiantly work for you...
CSS Code :
<style>
.display_none {
display: none;
}
</style>
HTML Code:
<div id="dispnone" class="display_none">123</div>
JQuery Code:
$("#dispnone").removeClass("display_none");
setTimeout(
"$('#dispnone').addClass('display_none');",
2000);
First, be sure to add your css link between <head> tag.
Please clear cache and test again. If your css file is too large, you can set inline style for hidden this div.
If you want to hide with jquery, you can disable like this $("#documentStatus_div").prop("disabled").
Try setting the style as display:none for both the divs :-
<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7" style="display:none">
<div id="documentStatus_div" style="display:none>...</div>
</div>
Are you looking for some like this? Cause this is what I understand. If not, pls tell me.
function showDiv(){
$('.div-flash').slideToggle(300)
$('.div-flash').delay(500).slideToggle(500);
};
showDiv();
body{
background: #000;
color: #fff;
}
.div-flash{
display: none;
background: #fff;
color: #000;
border-radius: 10px;
width: 100px;
padding: 25px;
margin: 50px auto;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
This is all doc
</div>
<div class="div-flash">
This will show and hide
</div>
The possible reason for this is your CSS file is taking time to load.
Method 1: Use an inline style
<div id="documentStatus_div" style="display:none>...</div>
Method 2: Check CSS link is present in <head> section
<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7" style="display:none;">
<div id="documentStatus_div">...</div>
</div>
I am looking for way to change 'GetElementById' div inside the div, which I am targeting.
Here's the example:
Let's say I have this
<div onclick="runscript()">
<div id="insider">
</div>
</div>
<div onclick="runscript()">
<div id="insider">
</div>
</div>
<script>
function runscript(){
document.getElementById('insider').style.color='red';
}
</script>
If I would like to change exactly the same div, which I am clicking on, I could use this.style.color='red', but I need to change "insider" div inside exactly 'this' div I'm clicking on.
I am looking only for javascript solution, no jquery.
<div onclick="runscript(this)">
<div class="insider">
Sample text
</div>
</div>
Give the insider div a class name called insider and do this:
function runscript(object){
object.querySelector("div[class='insider']").style.color='red';
}
This works by passing the parent div to the runscript function with the keyword this. Then querySelector will try to find the element based upon the selector div[class='insider']. If found it will set the color of the text to red.
<div onclick="runscript(this)">
<div class="insider">
</div>
</div>
<div onclick="runscript(this)">
<div class="insider">
</div>
</div>
<script>
function runscript(object){
object.querySelector('.insider').style.color='red';
}
</script>
like in the comments above
id is an unique identifier - so it is not valid to have an id twice in your DOM
I recommend you to use addEventListener instead of the onclick attribute
I made a fiddle in pure javascript: http://jsfiddle.net/53bnhscm/8/
HTML:
<div onclick="runscript(this);">
<div class="insider"></div>
</div>
<div onclick="runscript(this);">
<div class="insider"></div>
</div>
CSS:
div {
border: 1px solid black;
height: 100px;
}
.insider {
border: 3px solid green;
height: 20px;
}
Javascript:
function runscript(x) {
x.firstElementChild.style.border = '1px solid red';
}
you can view the following code on
jsfiddle too my full code is below
<html>
<head>
<title>Test Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
.darkContent{
position: fixed;
background-color: white;
border: 5px solid black;
padding: 8px;
overflow: hidden;
color: #333;
font-family: arial;
}
.darkCover{
position: fixed;
left: 0px;
top: 0px;
z-index: 900;
background-color: black;
opacity: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
Show Box1
<form action="save.php" method="post">
<div id="useThisDiv1" width="500" height="500">
<h3 class="breadcrumb">Div TWO</h3>
<div class="row" id="popup3">
<div class="col-md-12">
<div class="portlet">
<div class="portlet-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea rows="2" cols="50" name="notification_text"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 ">
<div class="portlet-body form">
<div class="form-body pull-right">
Cancel
save
<input type="submit" value="save" name="savethis">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script>
$(function(){
function darkBox(div){
var w = (div.attr('width')) ? div.attr('width') : div.width();
var h = (div.attr('height')) ? div.attr('height') : div.height();
var box = $('<div></div>').addClass('darkCover');
$('body').prepend(box);
box.fadeTo('fast', 0.8);
$(this).keydown(function(e){
if(e.keyCode == 27){
box.hide();
contentBox.hide();
}
});
var contentBox = $('<div></div>').html(div.html());
contentBox.addClass('darkContent');
var x = $(window).width()/2;
var y = $(window).height()/2;
var endTop = y - h/2;
var endLeft = x - w/2;
contentBox.css("left", endLeft+"px");
contentBox.css("top", endTop+"px");
contentBox.css("z-index", "910");
contentBox.css("width", w+"px");
contentBox.css("height", h+"px");
$('body').prepend(contentBox);
contentBox.show();
}
$('.darkBox').each(function(){
var div = $($(this).attr('data-target'));
div.hide();
$(this).click(function(){
darkBox(div);
});
});
$('.add_case_note_cls').click(function(){
alert('foo');
console.log('foo');
});
});
</script>
</body>
</html>
If i click on any of them three buttons I don't get any response what so ever, I've two anchor tags and one submit button, they're not working. Their click events are not registering I tried both by calling them with their class names like $('.classname).click(function(){alert('foo);}); and by using calling them id's like $('#cancelbtn).click(function(){alert('foo);});.
once again jsfiddle link
I don't know what i'm doing wrong here, any Idea?
The main problem here is that you're essentially cloning your HTML when you show it. I'm not sure if that's what you're intending to do or not, but that's what you're doing when you do var contentBox = $('<div></div>').html(div.html());. So when you initially bind your click handler to the elements with the add_case_note_cls class, that only applies to the elements that currently exist in the DOM. However, the elements that you end up seeing, are created during the execution of your darkBox() function, and therefore do not have a click handler attached.
There are a few ways that you could go about rectifying this.
Move the binding of the click handler to be within the darkBox() function. Maybe right at the end of it.
Switch to using .on() instead of .click() for attaching click handlers. This will allow you to use delegated events, which will allow the click handler to fire on elements that are added to the DOM later. So instead of $('.add_case_note_cls').click(function(){ you'd have something like $('body').on('click', '.add_case_note_cls', function(){.
Use the original HTML instead of cloning it. This may or may not be an option depending on what your ultimate goal is here. If you're trying to use the same base HTML, but copy it to multiple places, then this won't work. But if you're not, then you should be able to do it.
Also, it's not the cause of your problem, but you have a typo here <a href="javascrip:;" id="saveNotification". You're missing a "t".
And if you want your click handler to fire on both of the links and the button, you need to make sure that you have the appropriate class on all of them.