In the following code, I have a DIV parent container which has a SPAN container and the SPAN container containing the INPUT child elements.
When I click the gray area which is for the DIV, I see the 'I'm clicked!' message. I also see the same message when I click the white area of the SPAN or the input elements.
Shouldn't the SPAN container prevent the DIV container onclick event?
<div onclick="clicked()" style="padding: 20px; background-color: gray">
<span style="padding: 10px; background-color: white">
<label for="us">US</label>
<input type="radio" name="us" />
<label for="canada">Canada</label>
<input type="radio" name="canada" />
<label for="europe">Europe</label>
<input type="radio" name="europe" />
</span>
</div>
<script>
function clicked() {
alert("I'm clicked!");
}
</script>
Try this -
<div id="clickableDiv" style="padding: 20px; background-color: gray">
<span id='spanEle' style="padding: 10px; background-color: white">
<label class="input-area" for="us">US</label>
<input class="input-area" type="radio" name="us" />
<label class="input-area" for="canada">Canada</label>
<input class="input-area" type="radio" name="canada" />
<label class="input-area" for="europe">Europe</label>
<input class="input-area"`enter code here` type="radio" name="europe" />
</span>
</div>
<script>
$(document),ready(function(){
$("#clickableDiv").bind('click', function(e){
if(e.target.id != 'spanEle' && !$('#'+e.target.id).hasClass('input-area')){
alert("I am clicked!");
}
});
});
</script>
Related
I try to toogle div class from a span click i tried
$(this).closest(".div").find(".list-type-demandes").toggle();
but it doesn't work.
if i use :
$(".list-type-demandes").toggle();
it's works but it's showing me the two div and i need to display the div from "this" span
here HTML :
<label style="color: #1c5081">
<span id="toolbar-open" name="toolbar_open" class="toogle-toobar-open" onclick="toogleListTypeDemande(this)"><b>+</b>
</span> Organisation, support et services
</label>
<div class="list-type-demandes" style="padding-left: ; display: none">
<label style="display: inline">
<input type="radio" class="checkbox_type_demande" data-appel-projet="474" name="appel_projet[type_demande_list]" value="54" id="appel_projet_type_demande_list_54"> Architecture d'entreprise
</label>
</div>
<label style="color: #1c5081">
<span id="toolbar-open" name="toolbar_open" class="toogle-toobar-open" onclick="toogleListTypeDemande(this)"><b>+</b></span> Applications
</label>
<div class="list-type-demandes" style="padding-left: ; display: none">
<label style="display: inline">
<input type="radio" class="checkbox_type_demande" data-appel-projet="474" name="appel_projet[type_demande_list]" value="52" id="appel_projet_type_demande_list_52"> Système d'information activités recherche
</label>
</div>
here the script :
function toogleListTypeDemande(element) {
$(this).closest(".div").find(".list-type-demandes").toggle();
}
You need to modify toogleListTypeDemande(element) just a little.
Javascript offers the attribute nextElementSibling to get the next html element. Unfortunately there is no next sibling to your span element. So we need to travel one node back to get it's parent element.parentNode - which is the label - and from there the next sibling is the div.
function toogleListTypeDemande(element) {
$(element.parentNode.nextElementSibling).toggle();
}
Use ID unique and check below code,
You can use directly click also
$('.toogle-toobar-open').click(function(){
$(this).closest("label").next(".list-type-demandes").toggle();
});
label{
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
function toogleListTypeDemande(element) {
$(element).closest("label").next(".list-type-demandes").toggle();
}
</script>
<label style="color: #1c5081">
<span id="toolbar-open" name="toolbar_open" class="toogle-toobar-open" onclick="toogleListTypeDemande(this)"><b>+</b>Organisation, support et services
</span>
</label>
<div class="list-type-demandes" style="padding-left: ; display: none">
<label style="display: inline">
<input type="radio" class="checkbox_type_demande" data-appel-projet="474" name="appel_projet[type_demande_list]" value="54" id="appel_projet_type_demande_list_54"> Architecture d'entreprise
</label>
</div>
<label style="color: #1c5081">
<span id="toolbar-open2" name="toolbar_open" class="toogle-toobar-open" onclick="toogleListTypeDemande(this)"><b>+</b> Applications</span>
</label>
<div class="list-type-demandes" style="padding-left: ; display: none">
<label style="display: inline">
<input type="radio" class="checkbox_type_demande" data-appel-projet="474" name="appel_projet[type_demande_list]" value="52" id="appel_projet_type_demande_list_52"> Système d'information activités recherche
</label>
</div>
I would like to click each first child of class="cf" and should be in order, first cf first because the other radio is disabled unless you click the first one. The cf length is undetermined (in this example I put 3) so I need to first get the length of the child of ol > li and loop the clicking there.
Here is the structure of the HTML
<div id="group-attr-selects" class="grouped-select">
<ol>
<li class="opt-label">Dimensions</li>
<div id="conf-container-1549" class="cf">
<div class="optdiv">
<input name="conf-radio-0" id="conf-radio-1461" type="radio" value="1461">
<label class="optdiv-label" for="conf-radio-1461">3" H x 3" W</label>
</div>
<div class="optdiv">
<input name="conf-radio-0" id="conf-radio-1421" type="radio" value="1421">
<label class="optdiv-label" for="conf-radio-1421">4" H x 4" W</label>
</div>
</div>
<div id="err-attribute1549" style="color: red; margin-bottom: 5px"></div>
<li class="opt-label">Color</li>
<div id="conf-container-1379" class="cf">
<div class="optdiv">
<input name="conf-radio-1" id="conf-radio-12791" type="radio" value="12791">
<label class="optdiv-label" for="conf-radio-12791">Black on Almond</label>
</div>
<div class="optdiv">
<input name="conf-radio-1" id="conf-radio-12796" type="radio" value="12796">
<label class="optdiv-label" for="conf-radio-12796">Black on Brushed Aluminum</label>
</div>
<div class="optdiv">
<input name="conf-radio-1" id="conf-radio-12798" type="radio" value="12798">
<label class="optdiv-label" for="conf-radio-12798">Black on Brushed Brass</label>
</div>
<div class="optdiv">
<input name="conf-radio-1" id="conf-radio-12794" type="radio" value="12794">
<label class="optdiv-label" for="conf-radio-12794">Black on Brushed Gold</label>
</div>
</div>
<div id="err-attribute1379" style="color: red; margin-bottom: 5px"></div>
<li class="opt-label">Mounting Type</li>
<div id="conf-container-2605" class="cf">
<div class="optdiv">
<input name="conf-radio-2" id="conf-radio-76" type="radio" value="76">
<label class="optdiv-label" for="conf-radio-76">Adhesive</label>
</div>
<div class="optdiv">
<input name="conf-radio-2" id="conf-radio-762" type="radio" value="762">
<label class="optdiv-label" for="conf-radio-762">No Mounting</label>
</div>
</div>
<div id="err-attribute2605" style="color: red; margin-bottom: 5px"></div>
</ol>
Got the solution from this answer
I just made a few adjustments.
.findAllByCssSelector('#group-attr-selects > ol > div.cf')
.then(function (elementArray) {
return Promise.all(elementArray.map(function (element) {
return element.getVisibleText()
.then(function (children) {
for(var i=0; i < children.length; i++){
return element.findByCssSelector('.optdiv > input')
.then(function (inp) {
return inp.click();
});
}
});
}));
})
This should work:
jQuery:
$('.cf').each(function(i, item){$(item).find('input[type="radio"]')[0].click()})
JS:
Array.from(document.getElementsByClassName('cf')).forEach(function(item){item.querySelector('input[type="radio"]').checked = true})
I have code that displays two rows of colored inputs of type image. When one of the inputs is clicked, it is highlighted with a shadow and the shadow on the previously clicked input is removed. This jsfiddle shows it working as non-ajax code.
But this needs to work using ajax. I have setup a jsfiddle trying to show this but it fails to run so I probably don't have the ajax code correctly setup in it. But the ajax works here locally. In my local setup, the clicked on input is shadowed, as it should be, but the previously clicked input stays shadowed.
I found a post that said the div needed to be updated so I added the following but that just made the div disappear.
$("#group_one").load(location.href + "#group_one");
Here's the full code. Can someone help with this, please?
<style>
.imgStr {display:inline-block }
.selected{ box-shadow:0px 12px 22px 1px #333;}
div.shadow { border: 0px solid #3DA1D2; padding: 10px; }
div.shadow:hover {
-moz-box-shadow: 0 0 5px rgba(61,161,210,0.5);
-webkit-box-shadow: 0 0 5px rgba(61,161,210,0.5);
box-shadow: 0 0 15px rgba(61,161,210,0.5);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><img src="outside.img"></div>
<form method="post" action="/echo/html/" ajax="true">
<div class='container' id="group_one">
<div class="imgStr shadow" style="background:red">
<input id="red_1" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif">
</div>
<div class="imgStr shadow" style="background:yellow">
<input id="yellow_1" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif">
</div>
<div class="imgStr shadow" style="background:white">
<input id="white_1" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif">
</div>
</div>
<div class='container' id="group_two">
<div class="imgStr shadow" style="background:red">
<input id="red_2" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif">
</div>
<div class="imgStr shadow" style="background:yellow">
<input id="yellow_2" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif">
</div>
<div class="imgStr shadow" style="background:white">
<input id="white_2" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif">
</div>
<div id="showid"></div>
<script>
var last_selected;
$("input").click(function(){
var current_selected = $(this).closest('.container').find(".selected");
$("#showid").text('previous selected = '+current_selected.attr('id'));
$(this).closest('.container').find(".selected").removeClass('selected');
$(this).addClass("selected");
});
</script
I understood what you were saying about the jsfiddle but I didn't know how to do it. I finally found an example that got it working, I think. Here is the updated jsfiddle. For some reason it only works in FF and Chrome. And it has lost the ability to show the selected item. The original jsfiddle and my code here works fine in that respect so it is something with this new jsfiddle that is causing the problem but I don't know how to fix that.
For this new jsfiddle, I need to be able to click on one of the inputs and have it selected (shows by a shadow around it). Then when a different input in that row is clicked, the shadow moves to it. I hope this helps to see the problem.
<style>
.imgStr {display:inline-block }
.selected{ box-shadow:0px 12px 22px 1px #333;}
div.shadow { border: 0px solid #3DA1D2; padding: 10px; }
div.shadow:hover {
-moz-box-shadow: 0 0 5px rgba(61,161,210,0.5);
-webkit-box-shadow: 0 0 5px rgba(61,161,210,0.5);
box-shadow: 0 0 15px rgba(61,161,210,0.5);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showform"></div>
<script>
function ShowForm () {
$.ajax({
url: 'ajax2.php',
success: function(data) {
$("#showform").html(`
<div class="container" id="group_one">
<div class="imgStr shadow" style="background:red">
<input id="red_1" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif">
</div>
<div class="imgStr shadow" style="background:yellow">
<input id="yellow_1" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif">
</div>
<div class="imgStr shadow" style="background:white">
<input id="white_1" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif">
</div>
</div>
<div class="container" id="group_two">
<div class="imgStr shadow" style="background:red">
<input id="red_2" class="imgInput selected" name="img_front_group" value="red" type="image" src="red.gif">
</div>
<div class="imgStr shadow" style="background:yellow">
<input id="yellow_2" class="imgInput" name="img_front_group" value="yellow" type="image" src="yellow.gif">
</div>
<div class="imgStr shadow" style="background:white">
<input id="white_2" class="imgInput" name="img_front_group" value="white" type="image" src="white.gif">
</div>
<div id="showid"></div>
`);
}
});
};
$(document).ready(function() {
ShowForm();
$("input").click(function(){
var current_selected = $(this).closest(".container").find(".selected");
$("#showid").text("previous selected = "+current_selected.attr("id"));
$(this).closest(".container").find(".selected").removeClass("selected");
$(this).addClass("selected");
});
});
</script>
My check box will alert when it is by itself but when I contain it in a title pane then content pane nothing happens:
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding: 0;">
<div style="position: absolute; left: 2px; bottom: 2px; z-Index: 999;">
<div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Options', closable:false, open:true">
<div data-dojo-type="dijit.layout.ContentPane" style="width: 230px; height: 275px; overflow: auto;">
<input type="checkbox" name="checkbox" value="check" />
<input type="submit" name="email_submit" value="submit" onclick="validate()/>
</div>
</div>
</div>
</div>
<script>
function validate(){
var remember = document.getElementById('army');
if (remember.checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.");
}
}
</script>
You have missed the id attribute on <input type="checkbox">:
<input type="checkbox" id="army" name="checkbox" value="check" />
and also close the attributes:
onclick="validate()"/>
//-----------------^
I don't know how should I make a question to ask all of you , but I will try to explain. My question is that I would like to show element with which I have hidden in CSS , in my code there are same class container and result class
My expectation when I focus on the text 1 it should be shown only result of text 1 and text 2 will not make an action.
$('.examples').focus(function() {
$('div.example').show();
$(document).bind('focusin.example click.example',function(e) {
if ($(e.target).closest('.example, .examples').length) return;
$(document).unbind('.example');
$('div.example').fadeOut('medium');
});
});
$('div.example').hide();
.example{
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<p>
<label for="example">Text 1:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>reuslt</p>
</div>
</p>
<br />
<label for="example">Text2:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>result</p>
</div>
You html has a div in a p element which is not value, so use div instead of p as the container, then you need to show the next div.example of the focused input so
$('.examples').focus(function() {
$(this).next('div.example').show();
$(document).bind('focusin.example click.example',function(e) {
if ($(e.target).closest('.example, .examples').length) return;
$(document).unbind('.example');
$('div.example').fadeOut('medium');
});
});
$('div.example').hide();
.example{
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div>
<label for="example">Text 1:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>reuslt</p>
</div>
</div>
<br />
<label for="example">Text2:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>result</p>
</div>