Bootstrap Toggle checkbox not working every time - checkbox

I have a bootstrap toggle checkbox from http://www.bootstraptoggle.com/ in a partialview (bootstrap modal window). Inside the partial view, I have reference to the js file (from https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js).
The bootstrap check/uncheck seem to work alternatively. For example, if I open the popup for the first time it works, second time doesn't work, third time works etc.
Is this a known issue and a workaround exists? Can someone please guide? Thanks!

Related

How to collapse a codename one accordion component programmatically?

How to collapse a codename one accordion component programmatically?
In my App, I have an accordion that expands a body container with some radio buttons. I want to collapse (Close) the body automatically when a radio button is selected.
Adding more details about the problem:
My intention is create a component that has same behavior of a ComboBox, but using Accodion component as base class.
I wrote a minimal use case that reproduce the problem and you can get its source file here MyApplication.java.This code implements Steve Hanna answer.I suppose. And it didn't work for me. Running this code is simple.
Just create a CodeName One project and replace the MyApplication.java file generated by CodeName One Wizard and run the project (I use Netbeans IDE).
I put inside Radio Button action the command to collapse the component as you can see at lines 271 til 280. But it didn't work.
In the radio button's action listener, check if it's not selected and then call collapse(bodyContainer) on the accordion.
EDIT: There was a bug in Accordion that caused collapse() to work incorrectly. This has now been fixed, and will be available in the next plugin update.
See this sample to see correct usage.
Note that after calling collapse(component), you should call the Accordion's animateLayout() method so that the change is shown.

Angular + Bootstrap Accordion, Browser Back button action and opening the corresponding item

I have implemented Bootstrap accordion(3.*.*) using Angular JS (1.2.*). Here I have used ui-router to load template when click each item in accordion. its working fine.
But I am getting the following error whenever click any item
Error: [$compile:nonassign] Expression '$state.includes('customers')' used with directive 'accordionGroup' is non-assignable!
I am getting the error in the below line. I have checked the following condition for opening the corresponding item whenever user click browser back button. How can i fix this?
is-open="$state.includes('customers')"
Also, I have checked the above condition in each item for 2 times. one for is-open. Another one for changing glyphicon in the right corner of each item. How can i reduce the code for this lengthy checking?
I want to fix the above issue inside view itself. I don't want to fix this from controller.
Here is a fiddle
I have fixed this issue by assigning the active class in separate variable using ng-init
Working demo
ng-init="customersAccordionActive=$state.includes('customers');"
is-open="customersAccordionActive"

Kendo UI button swith angular

I have the following example.
Two kendo UI buttons and two regular buttons. Both should enable/disable the button on bottom. Only the regular buttons do and I don't understand why. Probably has something to do with the scope...
EDIT:
From another example I have, it seems like the scope is updated correctly but the ui is not updated. In my example i have another control that when I click it the ui is suddenly being updated.
Found the answer:
When clicking the kendo button the scope does change but it doesn't go through angular so angular doesn't know that the scope was changed so the digest cycle doesn't run.
So adding $scope.$apply(); at the end of the function triggers the digest.
Took the explanation from here.

ng-click stops working when using a kendo grid

I am trying to get a ng-click event to fire correctly when integrating the Angular Kendo UI.
The following Plunker shows a working example, click the button click me and a modal window appears, however if I add the kendo-grid attribute to line 18 of index.html then the pop up does not work. e.g. changing:-
<table>
to:
<table kendo-grid>
Then the modal popup does not work. I suspect that when the grid is rendered then angular loses the binding. Not sure how to fix it. Can anyone help?
The problem is the angularjs-kendo labs master file does not support command binding and a couple of issues have been raised.
Basically you need to take the javascript from the compile-kendo-grid-rows
See working plunker.

Angular Bootstrap: How to show a popover based on a child elements' trigger?

Demo Fiddle
I'd like to show some help text using a popover for the entire group of fields, not for each individual input.
In the fiddle, I'm simply using a mouseenter trigger to show how it should look like, but what I really want is to trigger it on focus for any input, but have the popover be positioned based on the parent element.
In non-angular land, I'd trigger a custom event (say groupenter) when any one of the fields is in focus, and have the popover listen to that event. I'd also debounce the corresponding groupleave event so the popover won't flicker as I tab around the inputs.
What's an angular-y way to accomplish that here?
(I think this patch helps, but it just got committed days ago)
Got it working!
I had to fork tooltip.js to add 'groupenter': 'groupleave' to triggerMap since there's no public api to add to the map.

Resources