I want to show a particular div with particular id on the page. I am able to show the div with class information but when I try to access it by giving div id then it is not working, this is how am trying to access it from javascript.
if((document.getElementById("apMain.stageId").value) == "11"){
doShow();
}else{
alert('else');
}
function doShow(){
$(".bill_info").show();
}
I want to access div with id= stg_Pdel, I have tried using
function doShow(){
$('#stg_Pdel').show();
}
but am not able to get the div open on the page, what should be the right approach of doing it ?
My div is:
<div class="bill_info">
<h3>Additional required fields</h3>
<div id="stg_install">
<div class="row">
<span class="label">
<form:label path="billingInfo.otc" cssClass="normalText" cssErrorClass="normalTextRed" >OTC:</form:label>
</span>
<span class="formw">
<form:input path="billingInfo.otc" cssClass="normalField" cssErrorClass="validationError" size="25" disabled='true'/>
</span>
<span class="error">Values for all charge fields must be numeric.</span>
</div>
</div>
<div id="stg_Pdel">
<div class="row">
<span class="label">
<form:label path="billingInfo.priceId" cssClass="normalText" cssErrorClass="normalTextRed" >Price Type:</form:label>
</span>
<span class="formw">
<form:select path="billingInfo.priceId" cssErrorClass="validationError" disabled='true'>
<form:options items="${priceTypes}" itemValue="key" itemLabel="value" />
</form:select>
</span>
</div>
</div>
<div id='stg_closed'>
<div class="row">
<span class="label">
<form:label path="billingInfo.billingClassId" cssClass="normalText" cssErrorClass="normalTextRed" >Billing:</form:label>
</span>
<span class="formw">
<form:select path="billingInfo.billingClassId" cssErrorClass="validationError" disabled='true'>
<form:option value="" label="--Select--" />
<form:options items="${billingTypes}" itemValue="key" itemLabel="value" />
</form:select>
</span>
</div>
</div>
<div style="clear:both"></div><br/>
</div>
You're missing a closing </div> tag right before that one, so it's inside the previous one ("stg_install"). An outer "display: none" will override (sort-of) the "display: block" (or whatever) on the inner <div>.
If it's not the <div> nesting issue that was present in the initial post of the question, then perhaps there's a hint of the problem where you mention showing the <div> with class "bill_info". If that whole thing is currently not showing, then calling .show() on another <div> (the "stg_Pdel" <div>) will have no effect. Again, the outer block will hide it no matter what it's "display" style is set to.
If the ".bill_info" <div> is hidden, you need to do something like this:
function doShow(stage) {
$('.bill_info').show()
.children('div').hide().end()
.find('#' + stage).show();
}
You'd pass "doShow" either "stg_Pdel", "stg_install", or "stg_closed", and it would make sure one of those inner <div> elements is showing. edit for more detail — The idea is to do the following things:
Make sure that the over all "bill_info" block is visible;
Find the immediate child <div> elements and hide them all;
Find the target "stg" <div> and make it visible
Note that using .find() is not really necessary because you're searching by "id" value, but it should work.
If you need the function to work on more than one stage, you could do it like this:
function doShow() {
$('.bill_info').show()
.children('div').hide();
for (var ac = 0; ac < arguments.length; ++ac) {
var stg = arguments[ac];
$('#' + stg).show();
}
}
Related
In this code, I want to extract the value "Yes, I am a Speaker"
through Javascript DOM element. By using getElementById. But, I do not
know how to access the value as it is nested inside the list element and the list doesn't have any value and attribute. And, in this code only list has a unique id to
select this element. There are several such blocks of code with unique
list id. I would appreciate if there is a quick help. I am using
this for creating GTM custom javascript variable.
<li id="u5mH6ZV1aX21" class="container step2" style="width: 232px;">
<input type="hidden" name="value" value="Yes, I am a smoker" autocomplete="off">
<div class="letter"><span>A</span></div>
<span class="label">Yes, I am a smoker</span>
<span class="tick"></span>
<div class="aux">
<div class="bg"></div>
<div class="bd"></div>
</div>
</li>
So select the element by the class or element type
var t1 = document.querySelector("#u5mH6ZV1aX21 input").value
var t2 = document.querySelector("#u5mH6ZV1aX21 .label").textContent
console.log(t1, t2);
<ul>
<li id="u5mH6ZV1aX21" class="container step2" style="width: 232px;">
<input type="hidden" name="value" value="Yes, I am a smoker" autocomplete="off">
<div class="letter"><span>A</span></div>
<span class="label">Yes, I am a smoker</span>
<span class="tick"></span>
<div class="aux ">
<div class="bg"></div>
<div class="bd"></div>
</div>
</li>
</ul>
You can use the modern querySelector API to select a specific element using the fact that you know the unique ID and the type (or "tagName") of the child element you're trying to access.
MDN article on querySelector
document.querySelector("#u5mH6ZV1aX21 input").value
My guess is what I want to achieve should be easy, but due to my lack of knowledge of front-end development, I cannot manage to solve issue. Have a page that works with AJAX-filters that users can select. Filters that are currently applied show up within <div> with id=current-filters.
HTML looks like this:
<div id="current-filters-box">
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<!-- here every single applied filter is displayed -->
</div>
</div>
</div>
Need to hide the the entire DIV current-filters-box in case no filter is applied.
The page uses a Javascript file, bundle.js which is massive, but contains the following line:
s=document.getElementById("current-filters")
Therefore tried the following if-statement to hide the DIV:
if(s.length<1)$('#current-filters-box').hide()
and
if(s=0)$('#current-filters-box').hide()
But this does not seem to have any effect. Can someone tell, what I did wrong?
Demo of page can be found here
EDIT: this is what the HTML looks like when filters are applied:
<div id="current-filters-box">
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<div class="badge-search-public">
<strong>Humanities & Languages</strong> <span class="x" data-property="disciplines" data-value="4" onclick="filter.removeFilter(this)">×</span>
</div>
<div class="badge-search-public">
<strong>January</strong> <span class="x" data-property="months" data-value="1" onclick="filter.removeFilter(this)">×</span>
</div>
</div>
</div>
Both of your conditions are incorrect or I would say they are not doing what you think they do.
s.length will always prints undefined so instead of s.length<1 you could use s.children.length
and the second one is not a condition rather it is an assignment
s==0 // condition
s=0 //assignment
the correct condition for your requirement would be
if(s.children.length<1){
I have assigned snippets for illustration.
Without filters
s = document.getElementById("current-filters")
console.log(s.children.length);
if (s.children.length < 1) {
$('#current-filters-box').hide(1000)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="current-filters-box">
filter box
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<!-- here every single applied filter is displayed -->
</div>
</div>
</div>
Without filters
s = document.getElementById("current-filters")
console.log(s.children.length);
if (s.children.length < 1) {
$('#current-filters-box').hide(1000)
}
<div id="current-filters-box">
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<div class="badge-search-public">
<strong>Humanities & Languages</strong> <span class="x" data-property="disciplines" data-value="4" onclick="filter.removeFilter(this)">×</span>
</div>
<div class="badge-search-public">
<strong>January</strong> <span class="x" data-property="months" data-value="1" onclick="filter.removeFilter(this)">×</span>
</div>
</div>
</div>
Try this .
if( $('#current-filters').is(':empty') ) {
$('#current-filters-box').hide()// or $('#current-filters-box').css("display","none")
}
You are performing an assignment, try..
if (s.children.length)
Using vanilla JavaScript, you can check if the current-filters div is empty or not and toggle the parent div current-filters-box like this:
s= document.getElementById("current-filters");
t= document.getElementById("current-filters-box");
if(s.children.length<1) {
t.style.display = 'none';
// t.style.visibility= 'hidden'; <<-- use this if you want the div to be hidden but maintain space
}
else {
t.style.display = 'block';
// t.style.visibility= 'visible'; <<-- use this if you used visibility in the if statement above
}
You can achieve this by adding your own variable which counts or maintains your applied filters, e.g.
var applied_filter_count = 0;
at every time filter is applied
applied_filter_count++;
if(applied_filter_count) {
$('#current-filters-box').show()
}
and at every time filter is removed
applied_filter_count--;
if(!applied_filter_count) {
$('#current-filters-box').hide()
}
and by default current-filters-box should be display:none
HTML
<div class="galao">
<div class="informacoesGalao invisible">
<div class="tabelaInformacoes infoGalao" style="float:right; text-align:right">
<p class="nomeGalao">Produto A</p>
<p class="invisible volumeTotalGalao">1000</p>
<p class="invisible volumeAtualGalao">800</p>
</div>
</div>
<div class="desenhoGalao">
<div class="bordasGalao">
<div class="conteudoGalao"></div>
</div>
</div>
</div>
CSS
.conteudoGalao { background-color: blue }
I'm trying to select the <div class="galao"> and change the background color of the child <div class="conteudoGalao">.
When the user clicks into the <div class="galao"> this div turns into <div id="selectedGalao" class="galao">.
I've already tried $('#selectedGalao > conteudoGalao').css('background-color','red') but it doesn't even return a error or anything. Any idea of how I can make this work? Is there a specific jquery for this kind of "grandson div"?
The '>' css selector is for direct children. Since conteudoGalao is a grandchild it will not work. Simply use $('#selectedGalao .conteudoGalao').css('background-color','red') instead unless that's not specific enough, in which case I'll need more info as to why. IF that's how your markup will always work, and you do want to be extremely explicit in your selector, $('#selectedGalao > .desenhoGalao > .bordasGalao > .conteudoGalao').css('background-color','red'). Lastly, as CalvT said, you are also missing a period in front of 'conteudoGalao' to label it as a class.
You have an error in your jQuery. Try the following:
$('#selectedGalao .conteudoGalao').css('background-color','red')
You weren't specifying that conteudoGalao was a class, so do this by adding the . As the . was missing, jQuery was looking for an element called conteudoGalao
The > is for direct children, and conteudoGalao is not.
I have an HTML page that is adding a toolbar to an item. That page is using some static IDs to make this happen. The most important line of code looks like this:
$('#tb').appendTo('.item-toolbar');
The above works as expected for a single item. But now, I'm trying to make this so that it work with multiple items. In an attempt to do this, I've created this fiddle. The most important code looks like this:
function moveNugget() {
var selected = $('#selector').val();
var tb = $('#tb');
var items = $('.item-container');
// The following line is the one that is giving me problems.
//.appendTo('.item-toolbar');
}
If you visit the Fiddle, it will be more clear. Basically, a user can choose 1, 2, or 3 from a drop down. Once selected, the tool bar should be "appended to" the corresponding item-toolbar. My challenge is, I can't figure out how to create the selector to a dynamically selected item and use the appendTo function.
I really want to use the appendTo because my actual code is more complicated. I've tried to strip it down to the part that is giving me the issue. It's clearly my approach to using appendTo. Right now, I'm trying:
$(tb).appendTo('.item-toolbar');
However, this approach completely disregards the selected item. I'm not sure how to use the selected items toolbar within the context of appendTo.
One of the variant of realization:
Add unique ids on each item-toolbar (For example view-0, view-1, view-2)
It will look like this:
<select id="selector">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
</select>
<button onclick="moveNugget();">
Move
</button>
<br /><br />
<div class="view">
<div class="item-container">
<div class="item-title">
[title]
</div>
<div id="view-0" class="item-toolbar">
[tb]
</div>
</div>
</div>
<br />
<hr />
<br />
<div class="view">
<div class="item-container">
<div class="item-title">
[title]
</div>
<div id="view-1" class="item-toolbar">
[tb]
</div>
</div>
</div>
<br />
<hr />
<br />
<div class="view">
<div class="item-container">
<div class="item-title">
[title]
</div>
<div id="view-2" class="item-toolbar">
[tb]
</div>
</div>
</div>
<br /><br /><br />
<ul id="tb" style="list-style-type: none;">
<li>[1]</li>
<li>[2]</li>
<li>[3]</li>
</ul>
Then when you click on button you can append your toolbar to appropriate block
Here is changed function code:
function moveNugget() {
var selected = $('#selector').val();
var tb = $('#tb');
var items = $('.item-container');
// Add toolbar to appropriate block
tb.appendTo('#view-' + selected);
}
Fiddle
Try:
function moveNugget() {
var selected = $('#selector').val();
var tb = $('#tb');
var items = $('.item-container .item-toolbar')[selected];
// The following line is the one that is giving me problems.
tb.appendTo(items);
}
how to hide div on object of div click
I am adding jquery path than my html code is here as it is and than after I am apply script to delete label class="main" with span and div class close1
but it's not perform
<label class="main ">
<span class="tag-value">mysql </span>
<div class="close1">X</div>
</label>
<label class="main ">
<span class="tag-value">codeigniter </span>
<div class="close1">X</div>
</label>
<label class="main ">
<span class="tag-value">ajax </span>
<div class="close1">X</div>
</label>
<label class="main ">
<span class="tag-value">jquery </span>
<div class="close1">X</div>
</label>
<script>
$(function(){
$(".close1").click(function(){
$(this).parent(".main").hide();
});
});
</script>
Check that JQ lib. is in the head of you r document, also, you can probably just use .parent()
http://jsfiddle.net/Yx4EU/
<script>
$(function(){
$(".close1").click(function(){
$(this).parent().hide();
});
});
</script>
If this does not work, I suggest adding a fiddle for someone to look at.
Check this out: http://jsfiddle.net/8436y/1/
In this fiddle you will notice I haven't defined the parent, since it is not necessary (in this case).
http://jsfiddle.net/8436y/5/
here I have used the .closest() to define the closest class="main" , which also works ;)