I'm trying to call a function when a radio button is clicked but it's not working. I have this fiddle doing basically just what I want it to do, but it's not working in my code.
In the view..
<script>
$(document).ready(function () {
$(".radioGroup").click(function () {
alert("radio clicked");
});
$(".buttonGroup").click(function () {
alert("button clicked");
});
});
</script>
#* bunch of html *#
#* bunch of html *#
<div id="medicalRadioGroup" class="check-list clear">
<ul>
<li style="display:inline;">
#Html.RadioButtonFor(model => model.MedicalSeverity, "none", new { #id = "MedicalSeverity_None", #name = "radioGroup", #class="radioGroup", #checked = "checked" })
<label for="MedicalSeverity_None"><span>None</span></label>
</li>
<li style="display:inline;">
#Html.RadioButtonFor(model => model.MedicalSeverity, "minor", new { #id = "MedicalSeverity_Minor", #name = "radioGroup", #class = "radioGroup"})
<label for="MedicalSeverity_Minor"><span>Minor</span></label>
</li>
<li style="display:inline;">
#Html.RadioButtonFor(model => model.MedicalSeverity, "major", new { #id = "MedicalSeverity_Major", #name = "radioGroup", #class = "radioGroup"})
<label for="MedicalSeverity_Major"><span>Major</span></label>
</li>
</ul>
</div>
<div>
<button class="buttonGroup">Click me</button>
</div>
Which renders into...
<div id="medicalRadioGroup" class="check-list clear">
<ul>
<li style="display:inline;">
<div class="iradio_square-aero checked">
<input checked="checked" class="radioGroup" data-val="true" data-val-length="The field Medical Severity must be a string with a maximum length of 10." data-val-length-max="10" data-val-required="*" id="MedicalSeverity_None" name="MedicalSeverity" type="radio" value="none" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; cursor: pointer; background: rgb(255, 255, 255);"></ins>
</div>
<label for="MedicalSeverity_None">
<span>None</span>
</label>
</li>
<li>etc</li>
<li>etc</li>
</ul>
</div>
So here, if the button is clicked, the function fires the alert. If a radio button is clicked, nothing happens. In summary, what works in the fiddle doesn't seem to be working here. Thoughts? I also tried to use .change() to get the radio button event (this would also be an acceptable solution), but that didn't work either. Something to do with Razor maybe?
The hint here is in the rendered HTML tag...
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; cursor: pointer; background: rgb(255, 255, 255);"></ins>
The inputs are being managed by the iCheck plugin, which catches the 'click' event and stops propagation. To get this event, use the iCheck methods provided. As per the API:
$(document).ready(function() {
$('.radioGroup input').on('ifClicked', function() {
alert('Radio clicked');
});
});
Please try the following instead;
$(document).on('click', '.radioGroup', function() {
alert('Radio Clicked');
});
You can try 'change' instead of click. I believe the reason it simply does not work with your project is because you are simply rendering the buttons dynamically so the dom element does not occur at first. So there are 2 possible solutions, something that will listen to the dom elements at all times or you can include the in the rendering block. Also, if your script is in the top of your _Layout.html then move it to bottom as that could help too.
Related
I have a form (which I am incidentally generating in PHP from a database) that is using CSS to replace checkboxes. When a checkbox is checked, the containing <li> should have an outline added, and when unchecked, the outline should be removed. Using onchange events works to change these at a click, but the outlines remain when the form is reset. I added onreset events, to try to force the removal, but that doesn't seem to change anything.
I've recreated this behavior in the snippet. (I have not hidden the checkboxes, as the snippet system apparently does not duplicate the normal browser behavior of clicking on the <label> to set or clear the checkbox. [EDIT: This was my mistake; I set the wrong for on the labels, and now that behavior works. The rest stands.])
How do I make this work? I could have a function that manually sets each outline in a reset function, but, as I said, the checkboxes are created from a database, so I'd have to write the PHP to write the js function, which seems like the wrong way to go.
function doCheckboxes(clicked_id) {
if (document.getElementById(clicked_id).checked) {
document.getElementById(clicked_id).parentNode.style.outline = "2px solid black";
} else {
document.getElementById(clicked_id).parentNode.style.outline = "0 none black";
}
}
function clearCheckboxes(clicked_id) {
document.getElementById(clicked_id).parentNode.style.outline = "0 none black";
}
li {
display: inline-block;
margin: 10px;
text-align: center;
font-weight: 600;
}
.imageholder {
display: block;
height: 60px;
width: 60px;
background-repeat: no-repeat;
background-clip: content-box;
background-size: cover;
margin: auto;
}
.has-thing1 .imageholder {
background-image: url(path/to/image.png);
}
.has-thing2 .imageholder {
background-image: url(path/to/image.png);
}
.has-thing3 .imageholder {
background-image: url(path/to/image.png);
}
<form action="." method="get">
<fieldset class="subcategory">
<ul>
<li class="has-x has-thing1">
<input type="checkbox" onChange="doCheckboxes(this.id)" onReset="clearCheckboxes(this.id)" id="x_thing1" name="has[]" value="thing1">
<label for="x_thing1">
<div class="imageholder"> </div>
Thing1
</label>
</li>
<li class="has-x has-thing2">
<input type="checkbox" onChange="doCheckboxes(this.id)" onReset="clearCheckboxes(this.id)" id="x_thing2" name="has[]" value="thing2">
<label for="x_thing2">
<div class="imageholder"> </div>
Thing2
</label>
</li>
<li class="has-x has-thing3">
<input type="checkbox" onChange="doCheckboxes(this.id)" onReset="clearCheckboxes(this.id)" id="x_thing3" name="has[]" value="thing3">
<label for="x_thing3">
<div class="imageholder"> </div>
Thing3
</label>
</li>
</ul>
</fieldset>
<div>
<button type="submit">Submit</button></div>
<button type="reset">Clear Selection</button>
</form>
Create function clearAllCheckboxes
function clearAllCheckboxes(evt) {
const formEl = evt.closest('form')
const allCheckbox = formEl.querySelectorAll('[type=checkbox]')
allCheckbox.forEach(checkbox => {
checkbox.parentNode.style.outline = "0 none black"
})
}
Add an onClick handler to the button "Clear Selection"
<button type="reset" onClick="clearAllCheckboxes(this)">Clear Selection</button>
I'm trying to get a selected group of divs to change the background color based off of data set in the buttons data attribute.
I've done some digging, but I'm getting confused on how to pass the conditional against the title in the div and the data in the data attribute from the button.
I know I have to possibly .split() the data out of the button since there is more than one data attribute for each button. But then getting that info and getting to check again the set of divs is where I think I'm getting hung up on.
Here's what I have so far:
Codepen Link: https://codepen.io/ultraloveninja/pen/bmvOYB
HTML:
<section class="state-group">
<div class="state" title="Illinois">
<h2>Illinois</h2>
</div>
<div class="state" title="New Hampshire">
<h2>New Hampshire</h2>
</div>
<div class="state" title="Washington">
<h2>Washington</h2>
</div>
<div class="state" title="North Dakota">
<h2>North Dakota</h2>
</div>
<div class="state" title="South Dakota">
<h2>South Dakota</h2>
</div>
<div class="state" title="Wisconsin">
<h2>Wisconsin</h2>
</div>
</section>
<section class="btn-group">
<a data-state='New Hampshire,Illinois,Wisconsin' class="region region-one" href="">Region 1</a>
<a data-state='Illinois,Washington,North Dakota' class="region region-two" href="">Region 2</a>
<a data-state='Washington,North Dakota,South Dakota' class="region region-three" href="">Region 3</a>
</section>
JS:
var $region = $('.region').data("state");
var $single = $region.split(',');
$(".region").on("click", function(e) {
$(".state-group div").each(function() {
var $state = $(this).attr("title");
if ($state == $single ) {
$(this).css('background-color','blue')
}
});
e.preventDefault();
});
Basically, once you click the button it will check the data from the button you clicked on, find the title of the div (in this case the state) and if it matches, make the background of those specific divs blue.
Again, not sure if I'm going about this the correct way, or if I need to get the data from the divs and store that in a variable as well. Hope that make sense.
You should get state from the clicked button, not when js load. So that you will have states based on the clicked button.
$(".region").on("click", function(e) {
//Below line is important; Otherwise it won't work for other buttons.
var $single = $(this).data("state").split(",");
$(".state-group div").each(function() {
var $state = $(this).attr("title");
if ($single.indexOf($state) > -1) {
$(this).css('background-color','blue');
}else{
$(this).css('background-color','#ccc');
}
});
e.preventDefault();
});
https://codepen.io/anon/pen/PyRgEZ
Here's what you need to do:
var $region = $('.region').data("state");
var $single = $region.split(',');
$(".region").on("click", function(e) {
$(".state-group div").each(function() {
var $state = $(this).attr("title");
// HERE
if ($single.includes($state)) {
$(this).css('background-color','blue')
}
});
e.preventDefault();
});
You may not need to keep reference of each state in the data, rather than use data-state & use the same value as class of the relevant element.So on click get the data-state & from the dom get the element which have same class and highlight them.
The benefit of this length of the value of data-state will not increase with increase of new element
$(".region").on("click", function(e) {
e.preventDefault();
let getDataState = $(this).data('state')
$('.' + getDataState).css('background-color', 'blue')
});
body {
padding: 20px;
}
.state-group {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.state {
flex: 0 1 13%;
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
background: #ccc;
font-size: 16px;
text-align: center;
padding: 10px;
}
.btn-group {
display: flex;
flex-direction: column;
a {
margin: 10px 0;
text-decoration: none;
display: block;
padding: 15px 5px;
background: lighten(blue, 20%);
color: white;
text-align: center;
width: 100%;
max-width: 150px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="state-group">
<div class="state btn-1 btn-2" title="Illinois">
<h2>Illinois</h2>
</div>
<div class="state btn-1" title="New Hampshire">
<h2>New Hampshire</h2>
</div>
<div class="state btn-2 btn-3" title="Washington">
<h2>Washington</h2>
</div>
<div class="state btn-2 btn-3" title="North Dakota">
<h2>North Dakota</h2>
</div>
<div class="state btn-3" title="South Dakota">
<h2>South Dakota</h2>
</div>
<div class="state btn-1" title="Wisconsin">
<h2>Wisconsin</h2>
</div>
</section>
<section class="btn-group">
<a data-state='btn-1' class="region region-one" href="">Region 1</a>
<a data-state='btn-2' class="region region-two" href="">Region 2</a>
<a data-state='btn-3' class="region region-three" href="">Region 3</a>
</section>
I am using the jQuery library 'iCheck' for inputs and I am trying to set the color of the labels to green for those questions which were good answered. When I don't use iCheck everything works perfectly, but when I use that library, my script seems to have no effect. What am I doing wrong?
HTML document
<div class="radio" >
{% if answer.is_valid == True %}
<input type="radio" name="question-{{ question.id }}" id=" {{answer.text}}">
{% else %}
<input type="radio" name="question-{{ question.id }}" id="{{answer.text}}">
{% endif %}
<label><b>{{ answer.text }}</b></label>
</div>
JS
$('.check').click( function () {
var score = 0
var all = $('input[id^=" "]');
var checked = $('input:checked');
var good = $('input:checked[id^=" "]');
checked.siblings().css('color', 'red');
all.siblings().css('color', 'green');
good.each ( function(){
score += 1;
})
alert(score);
score = 0;
});
That is because icheck changes the DOM in such a way that your original input is not even visible anymore. Check the DOM browser to see that iCheck changed your
<input type="radio" name="question-{{ question.id }}" id=" {{answer.text}}">
To
<div class="iradio_flat-pink" aria-checked="false" aria-disabled="false" style="position: relative;">
<input type="radio" name="question-1" id="text" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;">
</ins>
</div>
Or something similar.
To change the color of the element you need to use the iCheck functions instead and give it a different class:
$('#input1').iCheck({
radioClass: 'radio-green' //or something you like.
});
try this!
$( document ).ready(function () {
if ($("input.flat")[0]) {
$(document).ready(function () {
$('input.flat').iCheck({
checkboxClass: 'icheckbox_flat-blue',
radioClass: 'iradio_flat-blue'
});
});
}
});
SwitchWindow, Frame, Alert, everything I can think of and after lots of searching. Nothing has worked so far.
When I click on an "edit" button, a new window pops up with a text box, special character selection, save and exit buttons. All I want to do is enter text in the box but for some reason webdriver can not find the element.
Here's some HTML. The
textarea name="specHeading"
is what I'm trying to edit.
<script src="/js/componentlist.js" type="text/javascript">
<script src="/js/mrinformation.js" type="text/javascript">
<script src="/js/jquery.resources.js" type="text/javascript">
<script src="/js/validateresources.js" type="text/javascript">
<div class="ckmodal-next" style="top: 9px; left: 1281.5px;"></div>
<div class="ckmodal-prev" style="top: 9px; left: 261.5px;"></div>
<div class="ckmodal-close" style="top: -225px; left: 1239px;"></div>
<div class="ckmodal-background" style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgb(51, 51, 51); opacity: 0.8; z-index: 10000000;"></div>
<div class="modal-container" style="opacity: 1; position: fixed; top: -212.5px; left: 321.5px; display: block; z-index: 10000001;">
<form class="form">
<div class="row">
<div class="col24">
<div class="box box-gray">
<h2>
<div class="content">
<fieldset class="full">
<div class="form-field full">
<label>Heading:</label>
<textarea name="specHeading"></textarea>
</div>
<div class="form-field full">
<div class="form-field bottom full">
</fieldset>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
It looks like there's no windows to switch to, and it's not an iframe, nor an alert. Here's what I think is the JavaScript from the modal.
<script src="/js/productheaders.js" type="text/javascript">
;(function($){
var $currentEditHeader = null;
function setupForm(e) {
var $this = $(this),
value = $this.siblings('span').html();
$currentEditHeader = $this.parents('.product-header');
$('#edit-header').ckmodal({
onShow: function(){
$('textarea[name=specHeading]').val(value.replace(/<br\s*[\/]?>/g, '\n')).focus();
}
});
}
function saveHeader(e) {
var $this = $(this),
value = $('textarea[name=specHeading]').last().val();
if ( value == '' ) {
var defaultValue = $currentEditHeader.attr('data-default-value');
$currentEditHeader.children('span').text(defaultValue);
$currentEditHeader.addClass('default');
} else {
$currentEditHeader.children('span').html(value.replace(/<[^>]*>?/g, '').replace(/\n/g, '<br>'));
$currentEditHeader.removeClass('default');
}
The "popup" might be not a separate window/frame/alert, but part of your main page, which is just made visible.
You can treat it as such. Hard to tell with just this excerpt.
You might have to wait for it to be visible if there is some kind of animation involved.
Additionally, there are some issues inserting text in those text fields. The following worked for us in such cases:
Call textFieldElement.clear()
Then call textFieldElement.sendKeys()
I couldn't think of any better title, so I will try to explain my question here as clear as possible. I'm quite a newbie in JQuery so this is probably a very easy question.
I have some divs with a button on it. When you click the button, another div should pop-up.
My question is: How can I make the div, which is already open, close when clicking on another button?
I made a fiddle with some example code: http://jsfiddle.net/zuvjx775/1/
And the example code here:
HTML:
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="1" value='click!' />
</div>
<div class="show_1">
</div>
</div>
<br>
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="2"value='click!' />
</div>
<div class="show_2">
</div>
</div>
JQuery:
$('.showDiv').on('click', function(){
var id = $(this).attr('id');
$('.show_'+id).show();
});
When show_1 for example is visible, and I click on the button in div2, I want show_2 to come up, which it does, but show_1 to dissapear.
Can someone point me in the right direction?
You can hide all divs that their class starts with 'show' before show the one you want. For example:
$('.showDiv').on('click', function() {
var id = $(this).attr('id');
$("div[class^='show']").hide();//find div class starts with 'show' and hide them
$('.show_' + id).show();
});
.test {
border: 1px solid black;
height: 100px;
width: 450px;
float: left;
}
.show_1 {
width: 50px;
height: 50px;
background-color: yellow;
float: left;
display: none;
}
.show_2 {
width: 50px;
height: 50px;
background-color: green;
float: left;
display: none;
}
.wrapper {
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="1" value='click!' />
</div>
<div class="show_1">
</div>
</div>
<br>
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="2" value='click!' />
</div>
<div class="show_2">
</div>
</div>
Is the structure of the document fixed?
is so... I guess the easiest way of doing this is to just do the following:
$('.showDiv').on('click', function(){
var id = $(this).attr('id');
if(id == 1){
$('.show_1').show();
$('.show_2').hide();
}else{
$('.show_2').show();
$('.show_1').hide();
}
})