Reset bootstrap switch state - javascript

Firstly, here is a JsFiddle: http://jsfiddle.net/VTv2j/76/
This is what I want to happen:
Switch starts in the indeterminate / in-between state (this works)
Event fires when user chooses either state (this works)
When use clicks RESET the switch goes back to the indeterminate / in-between state (this works)
Event fires when user chooses either state (this DOES NOT work)
What is happening is if the user goes back to whatever the previous state was then no event fires. So say it was on YES, they click RESET, then click YES again - no event fires (but if it was previously on YES, and the reset then went to NO then the event would fire).
I've got no idea how to approach this. I've tried things like destroying and recreating the switch:
$('input[name=test]').bootstrapSwitch('destroy');
$('input[name=test]').bootstrapSwitch();
To no avail unfortunately.
Here is the important thing for me - all I need to know is when the user moves from the indeterminate state to ANY state. I don't actually care what they choose, as long as they choose something. So if anyone can think of a different type of workaround with that in mind (maybe it makes it easier) that would definitely be welcome.
Any help is appreciated, this is driving me crazy.

Here's a working version of the code above: http://jsfiddle.net/byzwng4t/1/
function initializeSwitch(selector) {
$(selector).bootstrapSwitch('destroy', true);
$(selector).bootstrapSwitch({
'state': null
});
$(selector).on('switchChange.bootstrapSwitch', function(event, state) {
console.log('change event' + (new Date()).getTime());
});
}
$(function() {
initializeSwitch('input[name=test]');
$('.reset').click(function() {
initializeSwitch('input[name=test]');
});
});
The trick is to bind the events again after destroying the switch.

$('input[name=test]').bootstrapSwitch('state', $('input[name=test]').is(':checked'), true);
Refer: http://bootstrapswitch.site/methods.html
Stackoverflow: Bootstrap Switch - Change state after clicking on button

Related

Form freezes/crashes

I have some jQuery that resets selects/dropdowns if the user changes the option selected in the previous dropdown. But when I include this jQuery it causes my form to freeze/crash sometimes - it happens after about 30 seconds of clicking around the form.
Can anyone spot anything wrong with this code? This is the jQuery code that seems to be causing the issues:
// 1. Resetting Fields
age_select.on("change", function() {
let currentCol = jQuery(this).val();
// When age is changed reset other dropdown (by setting value to the default one)
// and trigger change for the event handler to be called
subject_select.attr("data-column", currentCol).val('subject-fill');
area_select.attr("data-column", currentCol).val('location-fill');
});
//2. Resetting Fields - BELOW PART IS CAUSING THE FORM TO CRASH SOMETIMES
// if subject is changed reset location and trigger change
subject_select.on("change", function() {
area_select.val('location-fill').trigger('change');
});
My guess is you have some issue with the area_select event handler such that you might be triggering another change that creates an infinite loop (if for example that one triggers a change event on subject_select).
Your post is too ambiguous without a working(broken) example though.

SAPUI5: Handle click events properly

I am using the SAPUI5 control GenericTile and added both headerImage and click event. When this icon is clicked, the event handler of the tile is triggered first so that I am not able to react on the icon click itself (which should perform another action of course).
var oGenericTile = new sap.suite.ui.commons.GenericTile({
frameType: "TwoByOne",
header: "My HEader",
headerImage: "sap-icon://settings",
tileContent: oTileContent
});
oGenericTile._oImage.attachPress(function(oEvent) {
sap.m.MessageToast.show("Icon has been pressed");
oEvent.cancelBubble();
oEvent.preventDefault();
});
oGenericTile.attachPress(function() {
sap.m.MessageToast.show("I am always triggered first!!! :-(");
});`
Any idea how I can avoid this?
you could e.g. also cancel the event on the tile manually in order to avoid this behavior... you'd just need to track whether the icon has been pressed, see a simplified example on JSBin:
http://jsbin.com/daqifomoge/3/edit
Extending existing controls and overriding methods always bears the potential to break things when the original control gets an update from the developers...
Maybe there's a more elegant way to do it, though.
Best,
Christiane

Not able to understand how the domEvent works

Scenario:
I have a RadCombobox and I have attached functions to most of the events.
One event of the combobox is OnClientBlur and I am using this to check whether value in Combo is "Unassigned" or not. If it is "Unassigned" I need to cancel the onblur event and keep the focus on to the same combo.
This is the javascript which I has been used to cancel the event.
if (sender.get_text() === "Unassigned") {
eventArgs.get_domEvent().preventDefault();
return false;
}
Problem:
When the user tabs out first time of the ComboBox the event gets cancelled and the focus stays on the same combo box (in this case it is the 3rd Combo).
But when the user hits the tab button again the focus moves to the next control.
When I debugged the code I found that when the user first hits the tab button, following line works
eventArgs.get_domEvent().preventDefault();
I can see the preventDefault function, see following snapshot.
but when the user hits the tab button again I get an error and cannot see preventDefault function, see following snapshot
I am not able to understand what is going wrong here. Anyhelp would be appreciated.
Your problem, revolves around the difference between MouseEvents and KeyEvents. And also the way Telerik implement the OnClientBlur event. As far as it doesn't point to a specific type of browser event, each time it gets triggered
As you see in the first snapshot you got clientX and clientY, which means your OnClientBlur derived from a MouseEvent.
Whereas in the second one you got altKey, altLeft, and also there is no button property, which means that this one is a KeyEvent.
The other point here is as you have these fields in the output:
e.bookmarks
e.behaviorPart
e.behaviorCookie
Means you are using one of the old versions of IE4+ to IE7 or IE8, which they have cancelBubble instead of preventDefault.
Sometimes events are not cancelable, and using event.cancelable you can make sure if the current event is cancelable or not.
At the end to fix you code you can simply do this:
if (sender.get_text() === "Unassigned") {
var domEvent = eventArgs.get_domEvent();
if(domEvent.cancelable){
if(typeof(domEvent.preventDefault)==="function")
domEvent.preventDefault();
else
domEvent.cancelBubble = true;
return false;
}
else{
//you can not cancel the event, do something else to make it manageable
}
}

Why is jQuery .prop not working, seemingly?

Sql Fiddle example
$('#myBox').click(function(e){
e.preventDefault();
e.stopPropagation();
$('#myBox').prop("checked", !$('#myBox').prop("checked") );
});
I'm attaching this to a checkbox so that the check toggling is controlled by my javascript instead of by the default behavior, and it just won't work. I can't figure out why!
My reason for doing this: IE has a double-click filter, so to speak, so that double-clicking checkboxes only registers as a single click. This happens to stop people from toggling checkboxes really fast, which is a feature I need for my application, strangely enough. So I'm just canceling its default functionality and catching clicks by hand with JavaScript/jQuery and toggling it that way, thus eliminating the "speed limit." Except I don't know how to stop the clicks from toggling it in the first place, hence this question.
setTimeout(function() {
$('#myBox').prop("checked", !$('#myBox').prop("checked") );
}, 1);
The delayed timer of 1 millisecond is all it takes.
See this in your jsFiddle, modified.
I'm guessing you want to run something when your checkbox changes...
In that case you should be catching the change event:
$('#myBox').bind('change', function() {
// Do checks here, if you don't want it to change, then deal with it then
});

JavaScript/jQuery: global variable inexplicably being reset, causing menu contraction issue

http://jsfiddle.net/VhjR7/1/
When you click the my lists menu once, it expands, but if you click it again, it doesn't contract.
The problem is listsExpanded being inexplicably reset to false after it is set properly to true by listsExpand(). This causes the check within $('#mid-wrap').delegate() to inappropriately call listsExpand() again, instead of listsContract() like it should.
I can't figure out where or why this reset is occurring, but I think it has something to do with the sticky light blue menu functionality. Before I started removing and replacing this blue bar after scrolling to fix an IE7 bug, there was no issue with expansion/contraction of the little white menu.
Any ideas on what's causing this?
The issue is that the hover event does not support both function arguments (in and out) when used with .delegate(). You will need to use mouseenter and mouseleave instead of hover.
Change to this:
$('#mid-wrap').delegate('#lists', 'mouseenter', function() {
listsMouseIn = true;
}).delegate('#lists', 'mouseleave', function() {
listsMouseIn = false;
});
FYI, if these HTML objects are static, not added dynamically, you could significantly simplify your code by using direct event handlers on that actual objects rather than .delegate and just stopPropagation() when you've processed the click. Then, you'd see the click first in the object and wouldn't be processing the same click multiple times causing you to need all these global flags to keep track of state.
You could also just use the visibility of the object as your detection mechanism for whether the menu is open/closed too rather than a global variable.
The first part of your hover handler (with listsMouseIn = true;) never actually fires so whenever you click, your $('body').mouseUp() handler assumes that you are not hovering the lists button, and therefore hides the menu just for the $('#mid-wrap').delegate(...) handler to show it again milliseconds later.
Replacing
$('#mid-wrap').delegate('ul#lists', 'hover', funcIn, funcOut);
with
$('#mid-wrap').delegate('ul#lists', 'mouseover', funcIn).
delegate('ul#lists', 'mouseout', funcOut);
seems to do the trick.

Categories

Resources