I'm building a couple of toggle buttons for Highcharts in Angular. However, my question is more of a general javascript question and not about Angular or Highcharts since I've seen this problem pop up when working in strictly jQuery with checkboxes as well.
Here is my problem: When toggling checkboxes, I sometimes click the outer edge of the checkbox or have another dropdown open nearby and find that the box state does not change although the function on the click fires anyway.
For example, if you open a nearby bootstrap dropdown box and then click a checkbox while the dropdown is open, the input checkbox acts weird and does not change the state but still fires the intended function.
In order for the checkbox correct itself thereafter, I have to re-toggle the button for the state to match the function that is supposed to fire on that state.
Here is a small video clip that illustrates my example:
http://screencast.com/t/YRaDchstI
<input type="checkbox" ng-model="check1" ng-click="toggleGrp(check1)" value="{true: check1 == true}">
Despite using value="{true: check1 == true}" as a failsafe in determining if the box is in the checked state or not, the results are inconsistent.
Is there something I can do in JS to stop this, or will this require more of a hack on my part? I'm thinking if I can't fix the issue, I'll have to create an invisible box that sits on top of the buttons and becomes displayed when the nearby dropdown box is open.
I've found that if I toggle the scope from a button, I can trigger the input checkbox remotely and the button behaves the same with or without an expanded dropdown nearby.
<button type="button" class="btn"
ng-click="check1 = !check1"
ng-class="{active: check1}"></button>
<input type="checkbox"
ng-model="check1"
ng-click="toggleGrp(check1)"
style="visibility: hidden;">
Related
JSFiddle Live Demo
Script Explanation
My script is to sort and/or filter a mailbox whereas you can select one of each options and the sort option upon clicking, if it's active it'll switch the icon indicating going from A-Z to Z-A and visa-versa.
The filter option changes the button text and upon clicking on the button it'll animate the button width to the drop down width and then slide down the drop down. Upon clicking again, it'll reverse the process, checking to see if the text has been changed to adjust for the width.
What I Wish To Implement
Upon clicking one of the options apart from the .Active filter/view options, I wish to trigger the click event to reverse the show progress. I have tried to trigger this click hover with using e.target, I'm not sure how to trigger this correctly as my attempts have been doing nothing.
Your trigger event seems to be working fine, you're only triggering it on the wrong element. This seems to be working:
$('.dropdown-toggle').trigger("click");
I've updated the plunker
You can trigger the click this way.
if ($(e.target).closest('.Sort').length) {
if ($(e.target).hasClass('Active')) {
$(e.target).parent().find('i').toggleClass("fa-arrow-down fa-arrow-up");
} else {
$('.dropdown-menu .Sort').find('.Active').removeClass('Active');
$('.dropdown-menu .Sort').find('i').remove();
$(e.target).addClass('Active');
$(e.target).prepend('<i class="fa fa-arrow-down" aria-hidden="true"></i> ');
}
//Here.
//Ideally add another unique class to the main dropdown button and use that instead, otherwise you will have problems when there are multiple elements with dropdown-toggle class.
$('.dropdown-toggle').click();
}
I have a <select> element in my HTML that is bound via ng-model to an object in the scope.
Initially I want the dropdown to read "Group..." but when the user clicks on the control I want "Group..." to be renamed to "All" so that "Group..." can never be selected, in the same sense that sites use text boxes with default text that gives you a hint to what the form is for and disappears when it gets user focus (e.g. A "Search..." field).
Here is my JSFiddle example which isn't working as I expected: http://jsfiddle.net/TXPJZ/561/
I figured that ng-onclick="myOptions[0].label = 'All'" would work, it should change the value of the data structure that populates the dropdown and thus change the dropdown options but it doesn't.
How do I make this work like I want?
ng-click is the directive you want, not ng-onclick. Using that it seems to work the way you want it to:
http://jsfiddle.net/TXPJZ/562/
I have a table and within this table there is a column that is entirely check boxes. This table is going to be visible on mobile devices so it would be nice if the check boxes were easy to use. So I am attempting to figure out how to have the table cell parent, td, control the checking of the check box. So the user isn't actually clicking on the check box itself but rather the table cell. To do this I setup an onclick function for the td which checks or un-checks the corresponding check box. This works fine so long as the user doesn't click on the check box itself. If that happens then the box checks itself and then un-checks itself because it is following what it normally does and then calls the custom listener afterwards. I've attempted to set the check box to disabled but a giant prohibited (no-smoking like) symbol appears when run in Chrome. So is there a way to leave the check box as a whole enabled but disable the checking functionality of it?
Edit:
I tried using the higher z-index and it didn't like that at all. Here's what the code looks like:
<td style="text-align:center; width: 20%;">
<div id="checkboxCell{{:#index}}" onclick="PageConfigHome.toggleCheckboxes({{:#index}});" style="position:absolute; z-index: 999;">
<input type="checkbox" style="z-index: 1" onclick="PageConfigHome.toggleCheckBoxes(null);" id="checkbox{{:#index}}" class="HomeScreenCheckbox"/>
</div>
</td>
Solution:
I found this post that resolved my issue: Tick a checkbox in a table cell by clicking anywhere in the table cell
have you tried passing an event to the click event and use event.stopPropagation(); which prevents events from bubbling up? See this
Put an absolutely-positioned DIV in the same cell, with a higher z-index. Put the click event on the DIV instead.
http://plnkr.co/edit/rO1cev9Pw7TNbeGLioVk?p=preview
How should I prevent the dropdown from closing If I want to have multiple checkboxes and check or uncheck more than one at a time?
Since the dropdownToggle observes click events to close the dropdown menu, you will need to stop propagation of click events on checkbox elements. This can be easily done like so:
<input type="checkbox" ng-click="$event.stopPropagation()">
And the working plunk: http://plnkr.co/edit/AcbhOkKr2rGrPeoge26H?p=preview
I had a similiar issue with bootstraps dropdown and I wanted a native ( angular only ) implementation of a multi- dropdown select ( Basically I wanted to replace chosen since it depends on jquery ) . So I wrote one myself .
Here is the plunker demonstrating the dropdown :
http://plnkr.co/edit/lxewJUN8li9YQj9h1cIz?p=preview
It has support for Select All as well if you are in need of something like that.
Hope this helps.
NOTE : For some reason it only works with the unstable branch.
So far I have found out how to create radio buttons, hide the response until a selection is made and finally display the selection along with another radio button (this secondary radio button is where I'm stuck). Here is what I'd like:
A user selects yes/no:
If Yes selected
Text appears below the radio buttons asking another yes/no question which results in more text based on answer and yes/no
If No selected
Different text appears below the radio buttons asking a different yes/no question which results in more text based on answer and yes/no
I have been able to create the first yes/no which brings up another question and a yes/no radio button but I don't understand how to make responses for the second yes/no the one that comes up with the result of the first radio button.
I'm so sorry this is confusing but I don't know of any better way to explain it.
Here is my code in jsfiddle: http://jsfiddle.net/richerdk/a9fJ5/
I'm assuming I need something like this:<div id="div1" class="tab">
<p>Why do you think the sky is blue, is blue your favorite colour?</p></div> The issue is I don't know what the <div id=" " class=" "> should be.
The Yes/No buttons are located on lines 35,38,45,48 in the html portion of the jsfiddle and look like this <input type="radio" name="another" value="anotherNo" />
My question is how do I get the radio button included in the response of the first radio button selection to display information based on its selection (yes or no).
Here's a fork of your jsfiddle, with only the radio buttons and using jQuery
http://jsfiddle.net/Lfxry/
What I did, was simply bind an event handler to the change events of the radio buttons inside tabs
(function ($) {
$('#tabs').on('change',':radio', function () {
//read target id from data attribute
var targetId = $(this).data('target');
//hide all tabs
$('.tab').addClass('hidden');
//show the one you want
$("#"+targetId).removeClass('hidden');
});
})(window.jQuery);
Note that I am now hiding the previous question
There are a lot of way to improve the code. this is just a basic example