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){}));`
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 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.
(Follow on questions from Placeholder Hidden)
I'd like my form to validate existing data when it is loaded. I can't seem to get that to happen
I jQuery.each of my controls and call focus() and blur(), is there a better way than this? I tried to call ctrl.checkValidity(), but it wasn't always defined yet. When it was, it still didn't mark the controls.
I seem to have a timing issue too, while the focus and blur() fire, the UI does not update. It's as if the Webshims are not fully loaded yet, even though this fires in the $.webshims.ready event.
I also tried to call $('#form').submit(), but this doesn't fire the events as I expected. The only way I could make that happen was to include an input type='submit'. How can I pragmatically case a form validation like clicking a submit button would?
Here's a jsFiddle that demonstrates the problem. When the form loads, I want the invalid email to be marked as such. If you click the add button it will be marked then, but not when initially loaded. Why?
Focus and blur in the control will cause it to be marked.
BUT, clicking ADD will too (which runs the same method that ran when it was loaded). Why does it work the 2nd time, but not when initially loaded?
updateValidation : function () {
this.$el.find('[placeholder]').each(function (index, ctrl) {
var $ctrl = $(ctrl);
if( $ctrl.val() !== "" && (ctrl.checkValidity && !ctrl.checkValidity()) ) {
// alert('Do validity check!');
$ctrl.focus();
$ctrl.blur();
}
});
}
I see this in FF 17.0.5. The problem is worse in IE9, sometimes taking 2 or 3 clicks of ADD before the fields show in error. However, I get errors on some of the js files I've liked 'due to mime type mismatch'.
This has to do with the fact, that you are trying to reuse the .user-error class, which is a "shim" for the CSS4 :user-error and shouldn't be triggered from script. The user-error scripts are loaded after onload or as soon as a user seems to interact with an invalid from.
From my point of view, you shouldn't use user-error and instead create your own class. You can simply check for validity using the ':invalid' selector:
$(this)[ $(this).is(':invalid') ? 'addClass' : 'removeClass']('invalid-value');
Simply write a function with similar code and bind them to events like change, input and so on and call it on start.
In case you still want to use user-error, you could do the following, but I would not recommend:
$.webshims.polyfill('forms');
//force webshims to load form-validation module as soon as possible
$.webshims.loader.loadList(['form-validation']);
//wait until form-validation is loaded
$.webshims.ready('DOM form-validation', function(){
$('input:invalid')
.filter(function(){
return !!$(this).val();
})
.trigger('refreshvalidityui')
;
});
I'm using extJS 4.
I have a form pop up every time you click edit profile.
The problem is that every time you click edit Profile another form pops up so you can just keep clicking.
Is there a way to make the form only pop up if there isn't one already up.
Thanks for the help!!!
The problem sounds like you are creating a new window on every click of the "edit profile" button/link.
What you need to do is put a check in at the beginning of your form code to check to see if it exists first. If it doesn't, create the window and .show() it... Otherwise, you will just need to .show() it. Be sure to also reset the form if need be. You will also want to try and hide the window instead of destroying it. Otherwise, you will be creating new objects every time.
You can make your form modal, so to block entire interface until you close it, or you can use something like this to your controller to create form:
editProfile: function(button) {
var me = this;
if (!me.win) {
me.win = Ext.widget('editProfile');
// delete the me.win reference if the window gets destroyed
me.win.on('destroy', function() {
delete me.win;
return;
});
}
me.win.show();
}
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);
}
});
}