We Keep Coding

Click is being invoked before focusOut event in js

I have input element which will take input and filter the contents and the filter event will be trigger once the user gets focused out from the input element.
When the user having the focus in the input element and he clicks in one of the button, the click event is invoked first and then the focus out event, as it creates conflicts while generating the filtered content.
I tried changing the order of code and other options such as changing the way of invocation of the click event - none of the ways worked out for me
$('body').on('focusout', '.classname', functionname);
function functionname(e) {
if (typeof e == 'object') {
}
}
$('body').on('click', '.buttonclass', function (e) {});
Could someone help me to build The FocusOut event to trigger first and then the click event.

Based on the current conditions, you have to - inside the click handler - retrieve the validation result, and based on that result, decide if button submission should or should not occur.
JS Code:
$("#input").focusout(function(){
var that = this;
valid = this.value.length ? true : false;
!valid && window.setTimeout(function() {
$(that).focus();
}, 0);
});
$("#button").click(function(e) {
if ( !valid ) { return false; }
e.preventDefault();
alert('execute your filter)');
});

sap.m.Input change event is triggered when clicking on CheckBox

I have two controls in my page i.e. sap.m.Input and sap.m.CheckBox. There is a change event attached to input field which gives an error bar if input text is not matched with the regex. This change event is triggered on clicking out of focus of the input field. Clicking on checkbox will hide this input and show a third control. Now if i enter something in input field which will not match regex and click on checkbox, It is triggering changeEvent of Input and not even selecting the checkbox. I tried many things like checking in change event whether checkbox is ticked or not, attached a click event on checkbox but no solution.
Please help me so that i will be able to determine the click on checkbox if the current focus is on input field
Here is an example at jsbin. Here error will be thrown if input text contains # and change event is triggered.
var textInput = new sap.m.Text({text:"Area:"})
var inputField =new sap.m.Input("inptId",{
change:function(oEvent){
sap.ui.getCore().byId("barId").setVisible(oEvent.getParameters().value.includes("#"));
}
});
var select = new sap.m.Select("select",
{visible:false,
items:[new sap.ui.core.Item({text:"India"}),
new sap.ui.core.Item({text:"US"}),
new sap.ui.core.Item({text:"UK"})
]
})
var hBox = new sap.m.HBox({items:[textInput,inputField,select]})
var bar = new sap.m.Bar("barId",{
visible:false,
contentMiddle:new sap.m.Text({text:"Error"})
});
var chkBox = new sap.m.CheckBox("chkBxId",{
text:"Select from dropdown",
select:function(oEvent){
var selected = oEvent.getParameters().selected;
sap.ui.getCore().byId("inptId").setVisible(!selected);
sap.ui.getCore().byId("select").setVisible(selected);
sap.ui.getCore().byId("barId").setVisible(false);
}
});
var vBox = new sap.m.VBox({
items:[bar,hBox,chkBox]
});
In this example it is happening sometimes not always but in my project its happening always as there are lot of validations are happening in change event.

#Ashish for focus out try following code.
this.getView().byId("input").addEventDelegate({
onfocusout: function() {
console.log("focus lost !!");
}
}
and for enter key press use following code
.addEventDelegate({
onkeypress: function(e) {
if (e.which === 13) {
do your stuff;
}
}
})
once focus is out it will trigger function provide in onfocusout and while on focus if enter key is pressed it will trigger function provide in onkeypress event.
Also you can merge this in one.
addEventDelegate({
onkeypress: function(e) {
console.log("Enter pressed fouse out", e.which);
},
onfocusout: function() {
do your stuff!
}
})

JQuery clockpicker not triggering change event on input

In a codebase I'm working on there's this type of callback binding where something has to happen whenever any input gets changed
$(document.body).on('change', '.input-sm', function (){
...
})
The thing is, some input-sms are changed via a clockpicker, which does not trigger the 'change' event. How would I make this work? Ideally, I'd like clockpicker to trigger the change event.
http://jsfiddle.net/4zg3w5sj/7/
EDIT: A callback is being bound to multiple inputs with clockpickers at once, so I can't use the input variable to trigger the change event (except if I explicitly iterate over the inputs I guess)

you can use the clockpicker callbacks
beforeHourSelect : callback function triggered before user makes an
hour selection
afterHourSelect : callback function triggered after user makes an
hour selection
beforeDone : callback function triggered before time is written to
input
afterDone : callback function triggered after time is written to input
input.clockpicker({
autoclose: true,
afterDone: function() {
input.trigger("change");
}
});
I've figure out the issue
The plugin trigger the change event but they use triggerHandler instead of trigger that mean you can't add listener on body , you have to listen directly on the input
// Hours and minutes are selected
ClockPicker.prototype.done = function() {
raiseCallback(this.options.beforeDone);
this.hide();
var last = this.input.prop('value'),
value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
if (this.options.twelvehour) {
value = value + this.amOrPm;
}
this.input.prop('value', value);
if (value !== last) {
this.input.triggerHandler('change');
if (! this.isInput) {
this.element.trigger('change');
}
}
if (this.options.autoclose) {
this.input.trigger('blur');
}
raiseCallback(this.options.afterDone);
};
see here a fix
var input = $('#input-a');
var value = input.val();
// bind multiple inputs
$('.myinput').clockpicker({
autoclose: true,
afterDone: function() {
console.log("test");
}
});
// in the actual code it's not tied to an id but to a non-unique class
// does not trigger if changed by clock-picker
$(".myinput").on('change', function(){
console.log("!!!!")
})

Jquery disabled an event, and re activate it later

1 - I've gat an html tag with data-needlogged attribute.
2 - I would like to disable all click events on it.
3 - When the user click on my element, I want to display the authentification popin.
4 - When the user will be logged, I would like to launch the event than I disabled before.
I try something like the following code but it miss the "...?" part.
Play
<script>
// 1 - some click events has been plug on the tag.
jQuery('[data-btnplay]').on('click', function() {
alert('play');
return false;
});
// 2 - disabled all click events
jQuery('[data-needlogged]').off('click');
// 3 - Add the click event to display the identification popin
var previousElementClicked = false;
jQuery('body').on('click.needlogged', '[data-needlogged]="true"', function() {
previousElementClicked = jQuery(this);
alert('show the identification popin');
return false;
});
jQuery(document).on('loginSuccess', function() {
// 4 - on loginSuccess, I need to remove the "the show the identification popin" event. So, set the data-needlogged to false
jQuery('[data-needlogged]')
.data('needlogged', 'false')
.attr('data-needlogged', 'false');
// 4 - enable the the initial clicks event than we disabled before (see point 2) and execute then.
// ...?
jQuery('[data-needlogged]').on('click'); // It doesn't work
if (previousElementClicked) {
previousElementClicked.get(0).click();
}
});
</script>
Thanks for your help

Thank for your answer.
It doesn't answer to my problem.
I will try to explain better.
When I declare the click event on needlogged element, I don't know if there is already others click event on it. So, in your example how you replace the alert('play'); by the initial event ?
I need to find a way to
1 - disable all click events on an element.
2 - add a click event on the same element
3 - and when a trigger is launch, execute the events than I disabled before.
So, I found the solution on this stackoverflow
In my case, I don't realy need to disable and enable some event but I need to set a click event before the other.
Play
<script>
// 1 - some click events has been plug on the tag.
jQuery('[data-btnplay]').on('click', function() {
alert('play');
return false;
});
// [name] is the name of the event "click", "mouseover", ..
// same as you'd pass it to bind()
// [fn] is the handler function
jQuery.fn.bindFirst = function(name, fn) {
// bind as you normally would
// don't want to miss out on any jQuery magic
this.on(name, fn);
// Thanks to a comment by #Martin, adding support for
// namespaced events too.
this.each(function() {
var handlers = $._data(this, 'events')[name.split('.')[0]];
// take out the handler we just inserted from the end
var handler = handlers.pop();
// move it at the beginning
handlers.splice(0, 0, handler);
});
};
var previousElementClicked = false;
// set the needlogged as first click event
jQuery('[data-needlogged]').bindFirst('click', function(event) {
//if the user is logged, execute the other click event
if (userIsConnected()) {
return true;
}
//save the click element into a variable to execute it after login success
previousElementClicked = jQuery(this);
//show sreenset
jQuery(document).trigger('show-identification-popin');
//stop all other event
event.stopImmediatePropagation();
return false;
});
jQuery(document).on('loginSuccess', function() {
if (userIsConnected() && lastClickedElement && lastClickedElement.get(0)) {
// if the user has connected with success, execute the click on the element who has been save before
lastClickedElement.get(0).click();
}
});

Populate Dropdown only if dropdown is clicked

I can't manage to find out how to initiate a click event by a user clicking on a dropdown. I want to populate the dropdown ONLY if the user clicks the dropdown which will be rare. In addition, it depends on several other values selected on the page. So basically, how do I fire off an event if a user just simply clicks on the dropdown to see the options.
I've tried, $('select').click but to no avail.
It works if you don't have any options. But if there are current options, no luck.

Try using the focus event instead, that way the select will be populated even when targeted using the keyboard.
$('select').on('focus', function() {
var $this = $(this);
if ($this.children().length == 1) {
$this.append('<option value="1">1</option><option value="2">2</option>');
}
});​
View simple demo.
UPDATE
Here is a new version that uses unbind to only fire the event handler once. This way you are able to use your alert without adding any option elements to change the outcome of the condition as the previous solution required.
$('select').on('focus', function() {
var $this = $(this);
// run your alert here if it´s necessary
alert('Focused for the first time :)');
// add the new option elements
$this.append('<option value="1">1</option><option value="2">2</option>');
// unbind the event to prevent it from being triggered again
$this.unbind('focus');
});​
Hope that is what you are looking for.

It should work. Here I've done it and its working.
$("select").on("click", function() {
$(this).append("<option>1</option><option>2</option>");
});
Updated: http://jsfiddle.net/paska/bGTug/2/
New code:
var loaded = false;
$("select").on("click", function() {
if (loaded)
return;
$(this).append("<option>1</option><option>2</option>");
loaded = true;
});

Getting the dropdown to automatically open after the click is trickier:
// Mousedown is used so IE works
$('#select_id').on('focus mousedown', function (e) {
var data;
$(this).off('focus mousedown');
$.ajax({async: false,
type: 'GET',
url: 'url that returns the options',
success: function (d) { data = d; }
});
$(this).find('option').remove().end().append(data);
// Prevent IE hang by waiting awhile
var t = new Date().getTime(); while(new Date().getTime() < t + 200) {}
return true;
});