I have been trying to figure a way to add a div inside another div using a button, but I think the logic for it may be a bit beyond my reach at the moment. Basically I have this labs facilities, and when I create one in a page it should add them to the database, that is done and working.
Then I needed a div acting as popUp to retrive the information of each lab, that also works but if I have more than one lab is displays all the information of those labs in that one popUp meant for one. Which brings me to my next point.
I needed and decided that when I click the Aceptar button the new div created should have a id=n, where for each new div added it goes n+1, so div1 has a id of 1, div 2 of 2 and so on. I think this made using arrays... in that way I can update my php code to say:
function getLabs(){
$query = "SELECT bk.idlab , bk.capacidad, bk.carrera, bk.ubicacion FROM labs as bk WHERE idDiv=bk.idlab"; (or something like that I think I have to declare idDiv first)
$result = do_query($query);
return $result;
}
Right now this is the code I have...because I am stumped:
Html code in the php. page for the list of labs:
<div class="scroll-area" id="lista"> //THIS IS THE BIG DIV CONTAINING THE LIST
<div> //THIS FOR SHOWING PURPOSES HOW IT LOOKS.
<p>Lab #1</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="box">
<p>Lab #2</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="box"> //So if I add another it would be Lab#4 with id=4
<p>Lab #3</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div
</div>
Here is the button used in ANOTHER page that I am using for adding the labs to the database which is working 100%:
<input class="formatButton verInfo2" type="button" value="Aceptar" id="btnAceptar" onclick="agregar()"/>
In both pages (list and add) the scripts as well as the includes are present.
And the code I was thinking for adding new divs (as well as removing one) goes along these lines:
function agregar() {
var div = document.createElement('div');
div.className = 'box';
'<div class="box">
<p>Lab HERE GOES NUMBER</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>';
document.getElementById('content').appendChild(div);
}
function eliminar(input) {
document.getElementById('content').removeChild( input.parentNode );
}
But I hitted a mental block about how to proceed now >.< any help would be a godsend, I tried to keep it brief and only put the relevant code but if there is anything else I could provide in order to get some help I will do it.
Thanks a lot in advance and best wishes!
I think you can do this:
div.id = querySelectorAll('lista > div').length +1;
The length varies each time you add the div. So this should work for you.
If I understand the code correctly, you want to click a button and be able to add a div inside another div with the id = to the previous id+1?
JQUERY
$(document).ready(function(){
var counter = 1;
$('#addDiv').click(function(){
$('#'+counter).html('<div id="' + (++counter) + '"></div>');
});
});
HTML
<div id="1">
</div>
<button id="addDiv">Add Div Inside</button>
Related
Here's the challenge:
We have an image and text that describes it all nested in the same div. When somebody clicks on that image, we want Google Tag Manager to return that text.
Basically, we need to:
Go up 3 parent nodes
Go down to the child node with the class "right-section"
Go down to the child node with the class "is-title"
Go down to the child node with the tag "a"
Extract the text
Using my crude, self-taught Javascript knowledge, I came up with this monstrosity of a function:
function(){
return el.parentNode.parentNode.parentNode.getElementsByClassName("right-section")[0].getElementsByClassName("is-title")[0].getElementsByTagName("a")[0].innerText;
}
... which does not work at all.
Any suggestions?
this is an example markup basically the idea is use closest function to go up to dom tree and then use 'querySelector' with that result to go down to any element inside it
const img = document.querySelector(".item_image")
img.onclick = e=>{
const root = e.target.closest(".card") // goind back to root element
const text = root.querySelector(".text") // going down to text element
console.log(text.innerText)
}
<div class="card" style="width:400px;">
<div class="sections">
<img class="item_image" style="width:200px;" src="https://2.img-dpreview.com/files/p/E~C1000x0S4000x4000T1200x1200~articles/3925134721/0266554465.jpeg" alt="">
</div>
<div class="another-seci">
<div class="text">
Despite its modest MSRP, Fujifilm's entry-level X-A3 has dual control dials, a tilting touchscreen, and the same 24MP sensor from the company's flagship models - but with a traditional Bayer color filter array instead of X-Trans. We're pushing through our full
</div>
</div>
</div>
ok, Here is an example of what you need to do. If you need an exact answer that would work by just copy pasting it, show the block of HTML exactly how Amir did. I used Amir's HTML example to do the trick. Also, if you see that it takes the same text when you click on different images, include in your html snippet the code from other images, so that we could see how they relate to the parents and could refine the selectors.
Here's your CJS code:
function(){
return {{Click Element}}.parentElement.parentElement.querySelector(".text").innerText
}
There's completely no need to hop from node to node once you got to the bottom. From the bottom parentElement, just do the query selector once and you're in good hands.
You could also use .closest, but it seems like its complexity is way over just a few parentElements. I know it's insignificant, but hey.
Here is how I debug it right on this page (in Amir's answer):
document.querySelectorAll('.item_image').forEach(item => {
item.addEventListener('click', event => {
const root = event.target.closest(".card") // goind back to root element
const text = root.querySelector(".text") // going down to text element
console.log(text.innerText)
})
})
<div class="card" style="width:400px;">
<div class="sections">
<img class="item_image" style="width:200px;" src="https://2.img-dpreview.com/files/p/E~C1000x0S4000x4000T1200x1200~articles/3925134721/0266554465.jpeg" alt="">
</div>
<div class="another-seci">
<div class="text">
Despite its modest MSRP, Fujifilm's entry-level X-A3 has dual control dials, a tilting touchscreen, and the same 24MP sensor from the company's flagship models - but with a traditional Bayer color filter array instead of X-Trans. We're pushing through our full
</div>
</div>
</div>
<div class="card" style="width:400px;">
<div class="sections">
<img class="item_image" style="width:200px;" src="https://2.img-dpreview.com/files/p/E~C1000x0S4000x4000T1200x1200~articles/3925134721/0266554465.jpeg" alt="">
</div>
<div class="another-section">
<div class="text">
BlaDespite its modest MSRP, Fujifilm's entry-level X-A3 has dual control dials, a tilting touchscreen, and the same 24MP sensor from the company's flagship models - but with a traditional Bayer color filter array instead of X-Trans. We're pushing through our full
</div>
</div>
</div>
Here's what ultimately worked, for anyone Googling this:
function (){
el = {{Click Element}};
var item = el.parentElement.parentElement.nextElementSibling.getElementsByTagName('a')[0].innerText;
return item;
}
I have this situation:
<div id="first">
<div>
<p>text</p>
</div>
</div>
<div id="second">
<div>
<button class="button">click</button>
</div>
</div>
...
<div id="first"> ... </div>
<div id="second"> ... </div>
...
and so on, the structure repeats.
This structure is created dynamically so I can't use any specific class nor id for the first div.
I need to retrieve the text in the first div when I hit the button in the second div.
(NOTE: I need a pure javascript solution, not a jQuery solution)
Thanks
Assuming you have an event handler for the button click, you could do this from that event handler:
function buttonClickHandler(e) {
var first = this.parentNode.parentNode.previousSibling;
var paragraphs = first.getElementsByTagName("p");
var text = paragraphs[0].textContent;
}
If you have common and known class names on the the divs marked first and second, then you can make your Javascript code much more insulated from markup changes which is generally a good idea.
P.S. I presume you know that you should't have duplicate id values in your HTML. This code doesn't use them, but you should be using class names instead of id values if you're going to have duplicates.
I have a working example here
http://enginiku.byethost17.com/stack.php
What I want is to copy the data to clipboard based on the block clicked. That works perfectly fine. However the problem is I need to click on the block, move cursor away from the block, click again and only then does the data gets copied. I understand that maybe it is because of the area turning into flash object.
But I want it to copy the data in one click only(the first time). Kindly suggest a way out !!
Here is my script
<script>
function copytocb(el){
var id = $(el).attr('id');
ZeroClipboard.setDefaults({moviePath:'http://enginiku.byethost17.com/ZeroClipboard.swf'});
var clip = new ZeroClipboard($('#'+id));
clip.on('complete',function(client,args){
alert('Copied');
});
}
</script>
And here is the relevant html
<div class="central">
<div class="maincontent">
<div class="leftcontent">
<span id="ss">Some text</span>
</div>
<div class="rightcontent">
<span id="block1" onclick="copytocb(this)" data-clipboard-text="Img1">Img</span>
<span id="block2" onclick="copytocb(this)" data-clipboard-text="Img2">Img</span>
<span id="block3" onclick="copytocb(this)" data-clipboard-text="Img3">Img</span>
<span id="block4" onclick="copytocb(this)" data-clipboard-text="Img4">Img</span>
<span id="block5" onclick="copytocb(this)" data-clipboard-text="Img5">Img</span>
</div>
</div>
</div>
Once the clip has been created and assigned to the span in question the click on it produces the desired result. Have you tried putting the contents of your copytocb() function in the on-document-ready section ($(function(){}))?
Edit:
$(document).ready(function() {
ZeroClipboard.setDefaults({moviePath:'http://enginiku.byethost17.com/ZeroClipboard.swf'});
var DOMarr=$('#rightcontent span').map(function(){return this;});
var clip = new ZeroClipboard(DOMarr);
clip.on('load',function(client,args){alert("Clipboard is ready for action.");});
})
Also: leave out the onclick="copytocb(this)" on the spans themselves. This should not be necessary since the overlaying flash movie will look for the click event itelf (hopefully).
Just tested this. Also look at the given examples of their page.
2. Edit:
The clipboard-texts can also be generated dynamically by setting an appropriate mouseoverevent on the underlying spans like
$('#rightcontent span').mouseover(function(){
var clip.setText($(this).text());
console.log(clip.options.text); // just to show the effect ...
});
I also tried using mousedown on the same elements but that did not work, because the clip-event will always be triggered before the mousedown event of the span.
This show-hide function attempts to do so anonymously, without the need to maintain unique IDs for the target divs.
I am having trouble understanding why my selector for the var div does not work in example #4, and how I may be able to get it working for all examples shown.
$('.expander').click(function(e)
{
e.preventDefault();
var div = $(this).nextAll('div.content').first();
if (div)
{
if (div.css('display') == "none")
{
div.show();
$(this).removeClass("closed");
$(this).addClass("open");
}
else
{
div.hide();
$(this).removeClass("open");
$(this).addClass("closed");
}
}
});
<div>
example 1<br />
<div class="content open">shown content</div>
example 2<br />
<div class="content closed">hidden content</div>
example 3<br />
<!-- comments -->
<span>other content</span>
<div class="content closed">hidden content</div>
<p>
<span>
example 4
</span>
</p>
<div class="content closed">content</div>
</div>
The first three examples work fine. But when I deployed this code, I found there were variations in how the anchor may be coded. I am looking for a solution that works regardless of how the anchor is encapsulated.
The bottom line is I want to select the next div.content to the anchor, regardless if it is next, or if jQuery must walk up the DOM tree a little to find it.
I have a working model of this code here.
Because you anchor is nested inside a span which again nested inside a ptag
And this does not make sense in case of example# 4
var div = $(this).nextAll('div.content').first();
For example#4 you need this selector
var div = $(this).closest('p').nextAll('div.content').first();
I got this working walking up the parent tree until I see the next target div.
var div = $(this).nextAll('div.content').first();
if (div.length == 0)
{
div = $(this).parentsUntil('body').nextAll('div.content').first();
}
I don't really like the conditional, but unless I find something more elegant, I'll stick with this.
I'm tinkering a bit with jquery to show a hidden div when a link is clicked. This should be fairly simple, but there's a flaw to it in this case. I have the following markup:
<div class="first-row">
<div class="week">
<p>Uge 2</p>
<p>(08-01-11)</p>
</div>
<div class="destination">
<p>Les Menuires</p>
<p>(Frankrig)</p>
</div>
<div class="days">4</div>
<div class="transport">Bil</div>
<div class="lift-card">3 dage</div>
<div class="accommodation">
<p><a class="show-info" href="#">Hotel Christelles (halvpension)</a></p>
<p>4-pers. værelse m. bad/toilet</p>
</div>
<div class="order">
<p>2149,-</p>
<p class="old-price">2249,-</p>
</div>
<div class="hotel-info">
<!-- The div I want to display on click -->
</div>
</div>
When I click the "show-info" link I want the "hotel-info" div to display.
My backend devs don't want me to use ids (don't ask me why..) and the above markup is used over and over again to display data. Therefore I need to be able to access the "hotel-info" div in the "first-row" div where the link is clicked.
I've tried to do something like:
$(document).ready(function() {
$('.show-info').click(function() {
var parentElement = $(this).parent().parent();
var lastElementOfParent = parentElement.find(".show-hotel");
lastElementOfParent.show();
});
});
But without a result :-/ Is this possible at all?
Any help is greatly appreciated!
Thanks a lot in advance!
Try this:
$('.show-info').click(function() {
$(this).closest('.accommodation').siblings('.hotel-info').show();
});
Even better imo, as it would be independent from where the link is in a row, if every "row div" has the same class (I assume only the first one has class first-row), you can do:
$(this).closest('.row-class').find('.hotel-info').show();
Reference: .closest, .siblings
Explanation why your code does not work:
$(this).parent().parent();
gives you the div with class .accommodation and this one has no descendant with class .hotel-info.
It is not a good idea to use this kind of traversal for more than one level anyway. If the structure is changed a bit, your code will break. Always try to use methods that won't break on structure changes.
You're right in not using an ID element to find the DIV you want :)
Use closest and nextAll
Live demo here : http://jsfiddle.net/jomanlk/xTWzn/
$('.show-info').click(function(){
$(this).closest('.accommodation').nextAll('.hotel-info').toggle();
});