I am using in one of the lightning components and I am using it to filter a table. But when I'm trying to get its value in JS controller with the keyup function, it's giving one less value than actual.
This question has been already asked for HTML here , But for HTML, we have a solution that we can use onkeyup instead of keyup.
But in salesforce lightning, we don't have any onkeyup function for ui:inputText Source ,
So how to solve this issue?
I have already tried keypress, keyup, keydown.
All are giving one less value than actual one
Component :
<ui:inputText aura:id="search-phrase" class="slds-input" keyup="{!c.filterTable}" placeholder="Search Table" />
JS Controller :
, filterTable :function(component, event, helper) {
var dynamicVal = component.find("search-phrase");
var week = dynamicVal.get("v.value") ;
alert((week+'').toLowerCase());
var searchTerm = (week+'').toLowerCase() ;
$('#userTbl tbody tr').each(function(){
var lineStr = $(this).text().toLowerCase();
if(lineStr.indexOf(searchTerm) === -1){
$(this).hide();
}else{
$(this).show();
}
});
}
I found it's solution.
Just need to add updateOn="keyup" in <ui:inputText>
So new one will become :
<ui:inputText aura:id="search-phrase" class="slds-input" updateOn="keyup" keyup="{!c.filterTable}" placeholder="Search Table" />
Include updateOn attribute to ui:inputtext control. By default, it is mapped to change event so you will get only the exact value when the change event fires. updateOn="eventName"
event details : enter link description here
Related
I have a dropdown with values-Name,MobileNumber and a input text-box related to the selected dropdown.
I want to limit the textbox entry values with only alphabet when Name is selected from the dropdown and only Numbers when MobileNumber is selected. This I am achieving by adding the below thing.
*
On(dom.byId("dropdownid"), "keypress", function(e)){
if(dom.byId("dropdownid").value=="Name"){
On(dom.byId("textboxid"), "keypress", function(e){
if(RegularExpressionAlphabetOnlyCondition == e.charCode){
Stopping the event using e.stopEvent();
}
});
}
if(dom.byId("dropdownid").value=="MobileNumber"){
On(dom.byId("textboxid"), "keypress", function(e){
if(RegularExpressionNumbersOnlyCondition == e.charCode){
Stopping the event using e.stopEvent();
}
});
}
});
*
Now on change of the dropdown value I am adding change event for dropdown and adding similar keypressevent with regularexpression condition of only numbers.
But its not working and accepting only alphabet still. It is apparently not replacing the already placed keypressevent.
How to remove the Keypress event in dojo for a textbox on change of a dropdown value?
The on Function returnes a handle
var h = On(dom.byId("textboxid"), "keypress", function(e){console.log("do Stuff"});
You can then use the handle to cancel it listener before doing a new one
if(h)h.remove();
I have an OpenUI5 form consisting of a number of Inputcontrols. These Inputcontrols are bound to a model using the OpenUI5 DataBinding as described in the documentation.
For example:
new sap.m.Input({
value: {
path: "/Position/Bezeichnung",
type: new sap.ui.model.type.String(null, {
minLength: 1,
maxLength: 128
})
}
})
As in the example above I'm using constraints on the stringlength.
When a User changes the Value of the Input, the Validation is triggered and according to the Validationresult one of the functions descripted here is called.
In these functions I'm setting the ValueState of the control like this:
setupValidation: function() {
var oCore = sap.ui.getCore();
oCore.attachValidationError(function (oEvent) {
oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.Error);
});
oCore.attachValidationSuccess(function (oEvent) {
oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.None);
});
oCore.attachFormatError(function (oEvent) {
oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.Error);
});
oCore.attachParseError(function (oEvent) {
oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.Error);
});
},
Let's assume the bound model variable is initial.
I'm loading the view, the property value is parsed and displayed as empty.
The Validationerror/Parseerror method is not called although the constraints are not met.
This seems to be standard behaviour of OpenUI5. Only changes in the Control will be a validated.
Now let's assume I've a submit button and the Value of the Inputcontrol is still empty. When the user hits the submit button I'd like to trigger the DataBinding Validation for all childcontrols of my view. This would validate the above mentioned input and would result in an errorstate.
My question is: How can I trigger the databinding validation for all childcontrols of my view?
There is another question on SO where the poster asks for a way to define required fields. The proposed solution is to call getValue() on the control and validate the value manually. I think this is kind of cumbersome as formating and constraint information and logic is already present.
I suggest looking into field groups.
An example here in the UI5 docs
Field Groups allow you to assign group IDs to the input fields. Then you can call all of the input fields at once. You can set the name property and required property on each <Input> separately in your view, allowing you to handle some logic when you perform validation.
You can call this.getView().getControlsByFieldGroupId("fieldGroupId"), which will return an array of the input controls. Then you can loop through the controls, pass them through your logic, and use setValueState() to show the results.
Or, you can assign the validateFieldGroup event on the parent container, which is usually a form, but can be anything like a <VBox> that contains the controls. When the users focus moves out of the field group, the event is fired. You can then use the event handler in your controller to perform the validation.
In your case, I would assign a press event to your submit button, and in the handler, call the field group by ID and loop through the controls. At the end of your function, check to see if all fields are validated before continuing.
View
<Input name="email" required="true" value="{/user/email}" fieldGroupIds="fgUser"/>
<Input name="firstName" required="false" value="{/user/firstName"} fieldGroupIds="fgUser"/>
<Button text="Submit" press="onSubmit"/>
Controller
onSubmit: function() {
var aControls = this.getView().getControlsByFieldGroupId("fgUser");
aControls.forEach(function(oControl) {
if (oControl.getRequired()) {
//do validation
oControl.setValueState("Error");
oControl.setValueStateText("Required Field");
}
if (oControl.getName() === "firstName") {
//do validation
oControl.setValueState("Success");
}
});
var bValidated = aControls.every(function(oControl) {
return oControl.getValueState() === "Success";
});
if (bValidated) {
//do submit
}
}
The concept goes like this.
Use custom types while binding, to define validations. Validation
rules go inside these custom types (in the method 'validateValue').
When Submit is pressed, loop through the control hierarchy and
validate each control in your view. (By calling 'validateValue'
method of the Custom Type).
Validator (https://github.com/qualiture/ui5-validator ) uses this concept and it is a small library to make your life easy. Its main advantage is that it recursively traverses through the control library.
Using Message Manager (using sap.ui.get.core().getMessageManager() ) is the way to show the validation messages on the UI control.
Triggering data binding validations is not possible. Rather for empty fields that are having required property true you can do a work around using jQuery.
Please refer my answer to this same problem at Checking required fields
Normally ng-model updates bound model each time user pushes the key:
<input type="text" ng-model="entity.value" />
This works great in almost every case.
But I need it to update when onchange event occurs instead when onkeyup/onkeydown event.
In older versions of angular there was a ng-model-instant directive which worked same as ng-model works now (at least for the user - i don't know anything about their implementations).
So in older version if I just gave ng-model it was updating the model onchange and when I specified ng-model-instant it was updating the model onkeypup.
Now I need ng-model to use on "change" event of the element. I don't want it to be instant. What's the simplest way of doing this?
EDIT
The input still has to reflect any other changes to the model - if the model will be updated in other place, value of the input should reflect this change.
What I need is to have ng-model directive to work just like it worked in the older versions of angularjs.
Here is an explanation of what I'm trying to do:
http://jsfiddle.net/selbh/EPNRd/
Here I created onChange directive for you. Demo: http://jsfiddle.net/sunnycpp/TZnj2/52/
app.directive('onChange', function() {
return {
restrict: 'A',
scope:{'onChange':'=' },
link: function(scope, elm, attrs) {
scope.$watch('onChange', function(nVal) { elm.val(nVal); });
elm.bind('blur', function() {
var currentValue = elm.val();
if( scope.onChange !== currentValue ) {
scope.$apply(function() {
scope.onChange = currentValue;
});
}
});
}
};
});
See also: the AngularJS ngChange directive.
When applied to an <input> the changes occurs after each key press not on the blur event.
http://docs.angularjs.org/api/ng.directive:ngChange
Angularjs: input[text] ngChange fires while the value is changing : This answer provides a much better solution that allows the custom directive to work with ngModel so you can still use all of the other directives that go along with ngModel.
Also, an even more flexible solution that allows for specifying the event to use (not just blur) and other properties should be built in to angular very soon: https://github.com/angular/angular.js/pull/2129
I'm not sure if there is a better way to do this, but you can achieve this using a custom directive (on any jquery event you want)
<input type="text" ng-model="foo" custom-event="bar" />
<p> {{ bar }} </p>
// create the custom directive
app.directive('customEvent', function() {
return function(scope, element, attrs) {
var dest = attrs.customEvent;
$(element[0]).on('any-jquery-event', function(e) {
e.preventDefault();
// on the event, copy the contents of model
// to the destination variable
scope[dest] = scope.foo;
if (!scope.$$phase)
scope.$apply();
});
}
});
I use a tabView component with many tabs. In many of them, I have form which are submitted by primefaces commandButton component.
By default, PF commandButton using ajax mode but when I submit my form, my page seems to be fully loaded and my tabView component lost its index view (index 0 is rendered).
Is that normal behaviour please ?
I though that I would stay in the same index because it's ajax...
Looks like there is some naming container (p:tabView maybe) that you better assign an id to it , so instead of getting prefix like j_idt16 (which could vary from time to time) you will get myTab0 , myTab1 etc prefix...
for example <p:tabView id="myTab"
Another thing you could do to be on the safe side is checking if the element exists before trying to select it with jquery and access its value, like this
if($('#j_idt16\\:register_location_choice_2_input').length > 0){
//some code here
}
Ok, my problem is the JS validateRegisterForm function. When I remove it, it works but I need it...
I use it to check if validation form can be launched.
function validateRegisterForm(){
if($('#j_idt16\\:register_location_choice_2_input').attr('checked')){
if($('#j_idt16\\:register_galaxies_input').val() == 0){
var galaxie = MUST_CHOOSE_GALAXY;
alert(galaxie.charAt(0).toUpperCase() + galaxie.slice(1));
return false;
}
if($('#j_idt16\\:register_solar_systems_input').val() == 0){
var ss = MUST_CHOOSE_SOLAR_SYSTEM;
alert(ss.charAt(0).toUpperCase() + ss.slice(1));
return false;
}
if($('#j_idt16\\:register_positions_input').val() == 0){
var position = MUST_CHOOSE_POSITION;
alert(position.charAt(0).toUpperCase() + position.slice(1));
return false;
}
}
return true;
}
So how can I check fields values before sending and allowing or not validation form with ajax please ?
EDIT :
Ok, I solved my problem by launching validation inside my JS function with button type passed to button not submit and using remoteCommand component :
My JS function :
function validateRegisterForm(){
if(...)
validateForm();
}
And my remoteCommand :
<p:remoteCommand name="validateForm" actionListener="#{login.registerAccount()}"/>
Edit formatter action button is placed to jqgrid column:
colModel: [{"fixed":true,"label":" change ","name":"_actions","width":($.browser.webkit == true? 37+15: 32+15)
,"align":"center","sortable":false,"formatter":"actions",
"formatoptions":{"keys":true,"delbutton":false,"onSuccess":function (jqXHR) {actionresponse = jqXHR;return true;}
,"afterSave":function (rowID) {
cancelEditing($('#grid'));afterRowSave(rowID,actionresponse);actionresponse=null; }
,"onEdit":function (rowID) {
if (typeof (lastSelectedRow) !== 'undefined' && rowID !== lastSelectedRow)
cancelEditing($('#grid'));
lastSelectedRow = rowID;
}
}}
New row is added to jqgrid in loadcomplete event
var newRowData = {};
var newRowId = '_empty' + $.jgrid.randId();
$('#grid').jqGrid('addRowData', newRowId, newRowData);
and its id is updated if save action button is clicked:
function aftersavefunc(rowID, response) {
restoreActionsIcons();
$('#grid').jqGrid('resetSelection');
var json = $.parseJSON(response.responseText);
$("#" + rowID).attr("id", json.Id);
lastSelectedRow = json.Id;
$("#grid").jqGrid('setSelection', lastSelectedRow);
}
After clicking save action button edit action button clicks are ignored. It is not possible to re-enter to edit mode after first editing.
How to fix this so that row can edited by edit button click again after saving ?
Update
I added $(this).focus() as suggested in Oleg answer and also wrapped id change into setTimeout as Oleg recommends in other great answer:
function aftersavefunc(rowID, response) {
restoreActionsIcons();
$(this).focus();
$('#grid').jqGrid('resetSelection');
var json = $.parseJSON(response.responseText);
setTimeout(function () {
$("#" + rowID).attr("id", json.Id);
lastSelectedRow = json.Id;
$("#grid").jqGrid('setSelection', lastSelectedRow);
}, 50);
}
Problem persists. The problem may related to row id change since:
It occurs only in last row (where id is changed after save). It does not occur for saved rows where responseText returns same id and row id is actually not changed.
It does not occur if cancel action button is pressed.
Maybe row id needs additional reset id addition to resetSelection or needs updated in somewhere other place also.
Update2
I added code form updated answer to errorfunc and used only english characters and numbers id ids. This allows to click multiple times but introduces additional issue:
extraparam is no more passed. If rowactions() calls are commented out, extraparam is passed with with rowactions calls extraparam is not passed.
I changed jqGrid source code and added alert to rowactions method:
alert( cm.formatoptions);
if (!$.fmatter.isUndefined(cm.formatoptions)) {
op = $.extend(op, cm.formatoptions);
}
In first clicks alert outputs 'Object'. In succeeding clicks to Save button it outputs undefined. So for unknown reason formatoptions is cleared.
Remarks to comment:
Absolute url in testcase is not used. Datasource is set to localarray.
I verified that testcase works in IE and FF without external url access.
For extraparam issue I can create new testcase.
Without image directory buttons are shown in cursor is moved over them.
Missing image directory still allows to reproduce the issue.
FormData function is defined in js file.
Since new issue occurs after adding rowactions() calls and does not occur if those calls are removed, this seems to be related to the code proposed in answer.
I suppose that the problem exist because one hide a button which has currently focus. Look at the code from the answer. If one remove the line $(this).focus(); // set focus somewhere one has the same problem as you describes. So I suggest that you just try to set somewhere, for example in restoreActionsIcons the focus to any the table element of the grid after hiding the button having currently the focus. I can't test this, but I hope it will help.
UPDATED: I examined your problem one more time and I hope I can suggest you a solution.
You problem can be divided on two sub-problems. The main your problem is the the changing of the id of the row. So it is not common problem which everybody has.
The problem is that "actions" formatter create onclick functions directly in the HTML code (see for example here):
ocl = "onclick=$.fn.fmatter.rowactions('"+rowid+"','"+opts.gid+"','edit',"+opts.pos+");..."
So the functions will contains the original rowid. To fix the problem you can modify the code fragment of your aftersavefunc inside of setTimeout from
$("#" + rowID).attr("id", json.Id);
lastSelectedRow = json.Id;
$("#grid").jqGrid('setSelection', lastSelectedRow);
to something like the following:
var $tr = $("#" + rowID),
$divEdit = $tr.find("div.ui-inline-edit"),
$divDel = $tr.find("div.ui-inline-del"),
$divSave = $tr.find("div.ui-inline-save"),
$divCancel = $tr.find("div.ui-inline-cancel");
$tr.attr("id", json.Id);
if ($divEdit.length > 0) {
$divEdit[0].onclick = function () {
$.fn.fmatter.rowactions(newId,'grid','edit',0);
};
}
if ($divDel.length > 0) {
$divDel[0].onclick = function () {
$.fn.fmatter.rowactions(newId,'grid','del',0);
};
}
if ($divSave.length > 0) {
$divSave[0].onclick = function () {
$.fn.fmatter.rowactions(newId,'grid','save',0);
};
}
if ($divCancel.length > 0) {
$divCancel[0].onclick = function () {
$.fn.fmatter.rowactions(newId,'grid','cancel',0);
};
}
lastSelectedRow = json.Id;
$("#grid").jqGrid('setSelection', lastSelectedRow);
The second problem is that you use special characters inside of ids. I found a bug in the $.fn.fmatter.rowactions which need be fixed to support special characters in ids. The problem is that in the line 407 of jquery.fmatter.js the original rowid parameter rid will be changed:
rid = $.jgrid.jqID( rid )
and later everywhere will be used modified id. For example in the id is my.id the encoded version will be my\\.id. It's correct for the most places of the $.fn.fmatter.rowactions code (see here), but it' s incorrect as the rowid parameter of the editRow, saveRow, restoreRow, delGridRow, setSelection and editGridRow (see the lines 433-453). So the code must be fixed to use the original not escaped (not encoded) rid value with which the $.fn.fmatter.rowactions was called.
I think I will post tomorrow the corresponding bug report with the suggestions in the trirand forum.
UPDATED 2: The code $.fn.fmatter.rowactions(newId,'grid','edit',0); which I wrote above is just an example. I took it from the test demo which you send me. You should of course modify the code for your purpose. How you can see for example from the line the second parameter of the $.fn.fmatter.rowactions in the id of the grid which you use: 'grid', 'list' of something like myGrid[0].id. The last parameter should be the index of the column having formatter:'actions' in the colModel. You can use getColumnIndexByName function from the answer on your old question to get the index by column name.