I want to validate my extjs form. When the text field is empty, there should display an alert box and after that our cursor have to focus on the text box. I tried with the coding below. Alert is working fine. but cursor is not focusing. Can you please help me anybody to focus?
if(Ext.get('first').dom.value=='')
{
Ext.MessageBox.alert('Status', 'Enter your First Name!');
document.getElementById("first").focus();
}
The documentation states that MessageBox is asynchronous:
Note that the MessageBox is
asynchronous. Unlike a regular
JavaScript alert (which will halt
browser execution), showing a
MessageBox will not cause the code to
stop. For this reason, if you have
code that should only run after some
user feedback from the MessageBox, you
must use a callback function (see the
function parameter for show for more
details).
So, your focus() is carried out immediately after the call to Ext.MessageBox.alert, not when the user dismisses it: When the user clicks to dismiss the alert, the focus will change again.
You could try using a regular javascript alert() instead, which is synchronous.
if (Ext.get("first").dom.value == "") {
Ext.MessageBox.alert("Status", "Enter your First Name!", function() {
Ext.get("first").focus();
});
}
Try this
if(Ext.get('first').dom.value=='')
{
Ext.Msg.alert('Status', 'Enter your First Name!', function(btn, text){
if (btn == 'ok'){
Ext.getCmp('first').focus(true,10);
}
});
}
Related
I'm creating an Ionic application with a form and some required fields.
When the form is submitted and if it isn't valid, I display an alert message using Ionic's $ionicPopup service.
My problem is: the user can press "ENTER" or ("Go" button within Android) to both invoke form submission and close the popup which causes another popup to open.
You can see this happening here:
Sample Code
Focus the input, press ENTER and when the error message is displayed, press ENTER again to close it. Another popup will open (most likely because the input behind the backdrop still has focus or maybe because the modal is created within the form - having ENTER invoke submit again).
Is there any way to avoid that behavior? Maybe the ENTER within the $ionicPopup to close it without submitting the form again, or at least having some code to close any active popups before displaying a new one? Because when you open multiple popups, if you try the mouse (or tap) to close a message, the user is prompted to then close all other dialogs before being sent back to the main screen.
I know I could try to get the reference to the popup and call the close() method but it didn't quite work for me. Eventually the new alert opens before the previous one is fully closed and the backdrop gets stuck on the screen forever.
Thanks for helping.
As it turns out, my actual problem is that the $ionicPopup does not support pressing ENTER (or "go" on Android keyboard) to close the popup. For some reason, I tried to take the focus out of the inputs but it didn't work.
For anyone with the same problem, I ended up creating an angular directive to close the device keyboard when the form is submitted.
Here's the directive code:
(function () {
'use strict';
angular
.module('myModule')
.directive('closeKeyboardOnSubmit', closeKeyboardOnSubmit);
closeKeyboardOnSubmit.$inject = ['$ionicPlatform', '$cordovaKeyboard'];
function closeKeyboardOnSubmit($ionicPlatform, $cordovaKeyboard) {
var directive = {
require: '^form',
restrict: 'A',
link: link
};
return directive;
function link (scope, element) {
element.on("submit", function(){
$ionicPlatform.ready(function(){
$cordovaKeyboard.close();
});
});
}
}
})();
then I used it on the form tags like this:
<form close-keyboard-on-submit ...>
Obviously the problem still happens when testing directly on the browser but works when deploying to the devices.
I have used locationchangestart to prevent dialog close on clicking backspace key. It is working commonly for all dialogs. So it won't work for path change while closing the dialog. How can I restrict this? I need to change the $location.path when I close the dialog. Please suggest.
If your model is like
$scope.closeLoginModal = function () {
$location.path("/myhome");
});
};
I am trying to make a modal for login/register forms and wanted to make something that is reusable, I came across this blog post that goes through making a directive. I used that as well as angular-ui-bootstrap docs to make my modal. It does work, but the first time I click the button to pop the modal, it doesn't work. I can see the scope getting created using Batarang, but nothing pops. Subsequent clicks do work, and if I have 2 buttons, no matter which one I press first, it doesn't work, and after that either one works.
I made up a plnkr to show this. I am using templates etc so I added those. You can see that pressing "Register" or "Login" will not pop up the modal, but if you click again, the modals pop. You can also see the scope getting created on the first press with Batarang.
Thanks in advance for the help!
Edit:
I found some more information that might be helpful. The first time I click the link, the scope.closeFormModal gets called.
Try add:
scope.$watch(
function () {
return scope.formModal;
},
function (newData, oldData) {
if (newData === oldData) {
return;
}
if (newData) {
$compile($element.contents())(scope);
}
});
to link function that was returned from $compile function.
I want to execute function on Form submit, but I when i use $form->js('submit,array('function())` it works only when I click submit button, but doesn't work on Enter.
Is there a way to insert code in jquery function from php side of at4 like $this-js()->submit('function(){alert('sth')})
For those who will have the same problem. In atk4 when you press eneter in one of forms fields it calls atk4 function submitForm() without calling form.submit(). That is why binding something to form.submit() doesn't work with enter press. It can be solved by adding
$form->js(true)->find('input')->keypress("function(e) {
if ($(this).is('.ui-autocomplete-input')) return true;
if (e.keyCode==13) {
$(this).trigger('change');
".$this->owner->js()->submit()."
ev.stopImmediatePropagation();
});
and when you want to bind something with form submit, add:
$form->js(true)->submit($form->js(false,"function(ev){}));`
I have a form and when the user hits submit, I want to be able to display a message "Are you sure you want to do this"? and if they hit yes, I want it to be submitted?
Thanks
You can use this code in your view
echo $this->Form->create('FormName',array(
'type'=>'file','onsubmit'=>'return confirm("are you sure?");')
);
automatically in cake there is not direct solution for a button as it is for a link :S though you may do it with javascript.
Here is a code for it using jquery for the events asuming your button id is "submit"
$(document).ready(function() {
$('#submit').click(function() {
return confirm('You sure you want to continue?');
});
});
With this you are done, just load this js into your page and change it to please your needs :D hope this helps you