Develop Reference

How to trigger a function from click on document

Here's my situation: I've got a field that once the user double click, it'll edit the field. That's fine and working. I've got two functions: ok and cancel. Cancel disables the editing mode. ATM, the user has to click cancel to disable the editing mode. What I'd like to is to allow the editing mode to be disabled when the user clicks anywhere else on the page. How can I accomplish this with Angular?
EDIT: I'm adding my markup (Note: this is Jade):
tr(ng-repeat="user in users | filter:searchText"s)
td(ng-dblclick="editItem(user)", hm-double-tap="editItem(user)", ng-blur="cancelEditing()")
span(ng-hide="user.editing") {{user.name}}
form(ng-submit="doneEditing(user)", ng-show="user.editing", class="inline-editing-2", ng-blur="cancelEditing()")
input(type="text", class="form-control", ng-model="user.name")
button(class="btn btn-success mr-1", ng-show="user.editing", ng-click="doneEditing(user)")
span(ng-click="doneEditing(user)").fa.fa-check-circle
button(class="btn btn-warning mr-1", ng-show="user.editing", ng-click="cancelEditing(user)")
span(ng-click="cancelEditing(user)").fa.fa-times-circle
As you can see, I've got a hg-repeat on user. When double click on the td element it makes user.editing true so the form shows up. the cancelEditing(user) makes the variable false and only the field is displayed.
I've added ng-blur="cancelEditing()" on thetr,td,spanandform` and none of it worked.
Any ideas what am I missing?

Use ng-blur to bind your cancel event to the element. It will fire when the element loses focus.
IE: <input ng-blur="cancel()" />
Note: The cancel function must be within scope.
Angular ngBlur Docs
Update from comments:
Give the input element focus when your double tab event fires making the field editable. Your blur event is likely not firing because the input element never had focus.
You could do this from inside your editItem function or from inside the directive.
As an example:
yourApp.directive('hmDoubleTap', function(){
return function(scope, element, attr){
if(doubleTap) {
// Fire editItem(user)
// You could add your .focus() inside editItem().
// Or focus the first input element at the end of the directive.
element.find("input")[0].focus();
}
};
});

b1j's answer would work only if the element gains focus. Does hm-double-tap directive focuses the element after double click? If not you will have to trigger focus in editItem function.

Another approach would be to handle the click event on any other element like this:
$('#field-no-edit').click(function() {
$(this).hide();
$('#field-edit').show().focus();
});
$('body').on('click', function(e){
console.log($(e.target).attr('id'));
if ($(e.target).attr('id') != 'field-no-edit') {
console.log('not');
$('#field-no-edit').text($('#field-edit').val());
$('#field-edit').hide();
$('#field-no-edit').show();
}
});
JSFiddle

Safari click != focus on radio button

The Question
How can I make a hidden div (triggered by radio button) show/hide for people that click it or tab through it in all browsers (Safari is my problem).
The Story
I have an html form with hidden div's scattered throughout to hide questions that might not need to be asked in some scenarios. Most of the hidden div's are triggered by radio buttons, so I decided to build the following script. I used .on("focus") so the hidden fields will work for people tabbing through the form.
$("#loan-application").on("focus","input.toggler,span.toggler", function(){
var $show = ($(this).data("show")) ? $($(this).data("show")) : false,
$hide = ($(this).data("hide")) ? $($(this).data("hide")) : false;
if($show){
$show.stop(true).show({animation: "blind", duration: 1000}).addClass("active");
if($show.data("validate")) $show.find(":visible:input.mandatory").addClass("required");
}
if($hide){
$hide.not($show).each(function(){
var $this = $(this);
$this.stop(true).hide({animation: "blind", duration: 1000}).removeClass("active");
($this.data("validate")) ? $this.find(":input.mandatory").removeClass("required") : $this.find(":input.mandatory").addClass("required");
resetForm($this);
});
}
});
This code accomplishes the task in all browsers except Safari. If the radio button is clicked in Safari, it does not "count as focus" and the hidden field is not shown. So I tried switching the event to fire .on("click focus") which kind of works; however, if there are additional hidden divs within a previously hidden div, the content of the additional divs will expand outside of the parent into other text because the parents height does not change with the additional hidden divs.

You can create click handler set focus.
Inside the click handler, you can use document.activeElement to determine if the element has focus already.
More information here: How do I find out which DOM element has the focus?

Jquery ui dialog not closing with `Escape` keypress

When a user opens dialog, there are a bunch of ajax requests that have to be processed and therefore i have a second dialog that just displays loading information and closes once all the requests have been processed.
I am not able to close the user opened dialog with Escape key once it has opened. I have to click on the the dialog itself before I can use escape.
I have tried the following to assign the user opened dialog the focus after the loading dialog closes but to no avail, I still have to click on the dialog before it can close with the escape key.
$(document).ajaxStart(function () {
// IF loading dialog is not allready being shown show it.
if ($("#LoadingData").dialog('isOpen') === false) {
$("#LoadingData").dialog('open');
}
});
$(document).ajaxStop(function () {
//Close the loading dialog once the requests have finished
$("#LoadingData").dialog('close');
//Find the user opened dialog
$('.cmdialog').each(function () {
if ($(this).dialog('isOpen')) {
$(this).trigger('click');//set focus to dialog
// have also replaced .trigger('click') with .focus() but to no avail
}
}).on('click', function() {
//if click is triggerd set the focus of the dialog.
if ($(this).prop('id') != 'LoadingData') {
$(this).focus();
}
});
});
I have also tried setting the focus to the first element within the dialog with $('#DialogName:first-child').focus() and $('#DialogName:first-child').trigger('click') but this is also not working.
Any ideas as to why the focus is not set? Or am I misunderstanding/incorrectly using .focus() and .trigger('event')?
Thanks :)

Try the below code for close the dialog when Escap key is pressed:
$(document).keyup(function(e) {
if (e.keyCode == 27) { $("#LoadingData").dialog('close'); } // esc
});

I had the same issue, and found pretty elegant solution, in case you want to close dialog before actually clicking inside it:
$("#LoadingData").dialog({
...,
focus: function () {
$('#LoadingData').closest('.ui-dialog').focus();
}
});
So, we just need to set focus to parent .ui-dialog container, and in that case Esc will work for all cases. Disadvantage of $(document).keyup solution, if you have nested dialogs, Esc button will close your most top dialog and bottom one too.

the focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (, , etc.) and links. docs here
You can try moveToTop method of the dialog, maybe it will help
And in your code, I think, you should bind "click" event before triggering it.

The following code should work even for multiple modals open:
$(document).on('keydown','.modal-dialog',function(event){
if (event.keyCode == 27) {
$(this).closest('.modal-dialog').find('[data-dismiss="modal"]').click();
}
});

Trigger file selection on a click of a different button extjs4.1

How do I open the file selection dialog of a filefield using a different button or component? I tried searching over the internet but I cant find a solution. What Im trying to do is open the file selection dialog upon click of a panel.

You'll have to trigger the click event for the filefield's "Browse..." button at the DOM level.
Simply put, the idea is to get the reference to the <input> and launch its click event.
Here's an example (also on JSFiddle - http://jsfiddle.net/fa4bwp7q/3/):
var fileField = Ext.create('Ext.form.field.File', { renderTo: 'myDiv', hidden: true });
var textField = Ext.create('Ext.form.field.Text', {
renderTo: 'myDiv',
listeners: {
change: function(btn, newValue) {
fileField.fileInputEl.dom.click();
}
}
});
This should open up the file browser when typing into the textfield, while the filefield remains hidden at all times.
This works even on ExtJS 5.

Short answer is you can't. The user needs to interact with the button directly to cause it to open.
What Ext does under the hood is it puts a file input element inside a button, that invisibly matches the dimensions of said button. So when you click on the button, it triggers the file upload. That mechanism is used to provide styling.

If you need to trigger one button's click by clicking another button...then this is what you can do:
// .....
buttons:
[
{
text: 'Open File',
id: 'open_button',
handler: function()
{
// open the dialog box and
// do what you need
}
},
{
text: 'Another button',
handler: function()
{
// here you can click the Open File button
Ext.get('open_button').el.dom.click();
}
}
]
// ....
Works like a charm. You can even check this DEMO. Inside the Upload button handler I am alerting some text. If you click on test button, it will actually click the Upload button.
Only after some time, that demo is not visible in the Sencha's try website, so you can just copy my code there in the appropriate place.
Good Luck

Look at this screenshot: http://ic.pics.livejournal.com/werdender/15522933/44207/44207_original.jpg
Blue color shows the invisible <input type="file">.
The file field is above the "Browse..." button. When you click the "Browse..." button, you're actually click the invisible file field.
Programmatically click on the file field is not possible.
But you can create a dirty hack: http://jsfiddle.net/W2ffW/
Main input thus will only contain a text value, but you can override its method extractFileInput() etc - this is another question.

Resetting a form using jQuery validate from within a dialog

I'm using jQuery Validate in a form within a jQuery dialog. When the user closes the dialog I wish to clear all form fields and reset the fields which have error feedback displayed.
It is correctly resetting the fields to blank, but the error feedback is not being cleared properly.
Here's my dialog code.
// Attach dialog
$("#myDialog").dialog({
autoOpen: false,
modal: true,
close: function(){
$('#myDialog')[0].reset(); // This works in resetting the actual form values
$("#myDialog").validate().resetForm(); // Not working :(
}
});

Is the form id myDialog?
If so, I would change the structure to be:
<div id="myDialog>
<form id="myForm">
//inputs, etc...
</form>
</div>
So then your dialog call would look like:
$("#myDialog").dialog({
autoOpen: false,
modal: true,
close: function(){
//$('#myForm')[0].reset(); // This works in resetting the actual form values
$("#myForm").validate().resetForm(); // Not working :(
}
});
I think you are running into collisions with having jQuery UI act on the #myDialog in conjunction with it being the form you are trying to validate.
Another option is to destroy the dialog on close, and always recreate it on open.

If they are still not clearing, changing close to beforeClose works, so they are cleared before the dialog is closed and moved on the DOM.