recently stakantin ( https://stackoverflow.com/users/1875610/stakantin ) helped me with a question that I have made about change the text of a label with this code:
$label=$this->add('View_HtmlElement')->setElement('h4')->set('Test');
$f=$this->add('Form');
$f->addField('Checkbox','click')->js('click',$label->js()->text('hallo world'));
I'm trying to do this (I cannot figure out how to do it):
I have a label "$label=$this->add('View_HtmlElement')->setElement('h4')->set('100');"
and I have some fields of a form with check boxes. Each check box has a number.
Is it possible when the checkbox is clicked to do operations on that label ?
example:
Label: 100
field1 100 checkbox
field2 200 checkbox
If I click checkbox of field1, then label value is 200 (its original value plus 100 of field1), and so on...
I don't know if I'm very clear buy thanks for any help.
Alejandro
Example:
$f = $this->add('Form');
$l1 = $f->addField('Line','l1')->set(100);
$cb1 = $f->addField('Checkbox','cb1','100');
$l2 = $f->addField('Line','l2')->set(300);
$cb2 = $f->addField('Checkbox','cb2','300');
$cb1->js('change','
if (this.checked) {
$(this).parent().find("label")
.text(parseInt(100) + parseInt('.$l1->js()->val().'));
} else {
$(this).parent().find("label").text(100);
}
');
$cb2->js('change','
if (this.checked) {
$(this).parent().find("label")
.text(parseInt(300) + parseInt('.$l2->js()->val().'));
} else {
$(this).parent().find("label").text("300");
}
');
But but this is not very good way to add javascript. Creating of js function based on my example in .js file is much clearer way.
Related
I'm trying to adapt the Qooxdoo Playground table example's checkbox, to become a checkbox that can be clicked on and off.
I did see some code in a mailing list which seemed like it should do the job, but it's not working for me.
// Display a checkbox in column 3
tcm.setDataCellRenderer(3, new qx.ui.table.cellrenderer.Boolean());
table.addListener("cellClick",
function(cellEvent) {
var col = cellEvent.getColumn();
if (col == 3) {
oldValue = table.getTableModel().getValue(col, row);
table.getTableModel().setValue(col, cellEvent.getRow(), !value);
}
}
);
I've put that into the Playground at https://preview.tinyurl.com/y8qubmll
My intention is to have a few different checkboxes in the columns, so the code above uses the variable "col" rather than hardcoded values.
Any help would be greatly appreciated.
The event is called cellTap. See the fixed example below.
table.addListener("cellTap",
function(cellEvent) {
var col = cellEvent.getColumn();
var row = cellEvent.getRow();
if (col == 3) {
oldValue = tableModel.getValue(col,row);
tableModel.setValue(col,row, !oldValue);
}
}
);
here is a link to the working example
I have been struggling with a couple of issue so I thought I would reach out for help after doing much searching. I'm using AngularJS.
My first problem is that checkbox is not working properly when I use ng-repeat, it will only check the first box in the table code snippet below. I'm using a custom checkbox which I coded with css is the reason for the label.
My second issue is when I click on the check box it should delete any row I want but it deletes the row before it if I start from the bottom of the table up, but if I start from the top of the table down it works as expected except for the box being checked code snippet. I tried many ways to set the index but it still does not work.
$scope.removeRow = function(type) {
var index = -1;
var myArr = eval( $scope.contacts );
for( var i = 0; i < myArr.length; i++ ) {
if( myArr[i].type === type ) {
index = i;
break;
}
{
if( index === -1 ) {
alert( "Something gone wrong" );
}
$scope.contacts.splice(index, 1);
};
First off, don't use eval($scope.contacts). If that variable is a string and contains javascript it will run that javascript. if myArr isn't defined using myArr = $scope.contacts you can use myArr = JSON.parse(JSON.stringify($scope.contacts) or use angular.copy method.
I don't see your html, so I can't tell you why your checkbox doesn't work. But regarding your second problem, if it's deleting a row above when you hit splice, why not change that code to :
$scope.contacts.splice(index + 1, 1)
I have a table that displays several entries, each has an <input>. The user can dynamically add additional inputs by clicking an "add entry" button. I need to iterate over them before saving and validate each one. I simplified my example to check that the value of each input is greater than 100 (ultimately I will use a pattern-match to validate MAC and IP addresses).
I can probably handle it if I could select all <input>s, but I would really like to select a specific <input> using an index I already have in my scope. I read that angular.element is a way, but I need to select something that was dynamically created, and thus not named something easy like id="myInput". Unless I use an id of "input" and append a unique number with Angular's $index in the id attribute?
Here is my Fiddle that shows what I'm doing. Line 44 is an if() that should check if any <input> is greater than 100. The "Save Row" button validates that the input is greater than 100, but if you edit a line, I need the "Save" button to validate any that the user has edited (by clicking Edit next to it).
tl;dr:
How can I use Angular to select an <input> that has been created dynamically?
I have updated your fiddle in a clean way so that you can maintain the validation in a generic method for both add & edit.
function validateBinding(binding) {
// Have your pattern-match validation here to validate MAC and IP addresses
return binding.ip > 100;
}
Updated fiddle:
https://jsfiddle.net/balasuar/by0tg92m/27/
Also, I have fixed the current issue with editing you have to allow multiple editing without save the first row when clicking the next edit on next row.
The validation of 'save everything' is now cleaner in angular way as below.
$scope.changeEdit = function(binding) {
binding.onEdit = true;
//$scope.editNum = newNum;
$scope.showSave = true;
};
$scope.saveEverything = function() {
var error = false;
angular.forEach($scope.macbindings, function(binding) {
if(binding.onEdit) {
if (validateBinding(binding)) {
binding.onEdit = false;
} else {
error = true;
}
}
});
if (error) {
alert("One/some of the value you are editing need to be greater than 100");
} else {
$scope.showSave = false;
}
}
You can check the updated fiddle for the same,
https://jsfiddle.net/balasuar/by0tg92m/27/
Note: As you are using angular, you can validate the model as above and no need to retrieve and loop the input elements for the validation. Also for your case, validating the model is sufficient.
If you need some advanced validation, you should create a custom
directive. Since, playing around with the elements inside the
controller is not recommended in AngularJS.
You can use a custom class for those inputs you want to validate. Then you can select all those inputs with that class and validate them. See this Fiddle https://jsfiddle.net/lealceldeiro/L38f686s/5/
$scope.saveEverything = function() {
var inputs = document.getElementsByClassName('inputCtrl'); //inputCtrl is the class you use to select those input s you want to validate
$scope.totalInputs = inputs.length;
$scope.invalidCount = 0;
for (var i = 0; i < inputs.length; i++){
if(inputs[i].value.length < 100){
$scope.invalidCount++;
}
}
//do your stuff here
}
On line 46 a get all the inputs with class "classCtrl" and then I go through the input s array in order to check their length.
There you can check if any of them is actually invalid (by length or any other restriction)
I have an issue. When people click on a link, this variable add 5 to the original value:
$scope.sumareco = function(cantidad) { $scope.contadoreco += cantidad};
If i print the value {{sumareco}} you can see how the value changes.
The problem starts when I create a conditional on the controller.
if ($scope.contadoreco < 30 && $scope.contadoreco > 10) {
$scope.resultadoeco = "Opción uno";
} else {
$scope.resultadoeco = "";
}
If I print {{resultadoeco}} I expect that the phrase changes dinamically depending of the numeric value of $contadoreco. But it remains static and only shows the phrase assigned to the original value. ¿What can I do?
Thanks
I'm guessing your if statement is just sitting in your controller and not inside any method or statement that would run during a digest cycle.
The easiest way to update resultadoeco is to watch contadoreco. For example
$scope.$watch('contadoreco', function(val) {
$scope.resultadoeco = val > 10 && val < 30 ?
'Opción uno' : '';
});
See https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch
What is the best way for searching the fields AT THE MOMENT in database with angularjs?
I have a JSON inside a field of database...
I want, when a user fill a text box (TextBox1), in exact time, it search at the moment inside my database. if that entire text was equal with any field of a table, fill another textbox(TextBox2) automatically.
With below code, i can fill it. and it works properly. but i thinks its not logical. Because it reads all of my data in mentioned Table first
$scope.showFullName = function(){
$scope.Fullname="";
if($scope.MembersNationalCode.length == 10) {
for (var i = 0; i < $scope.NaturalMembers.length; i++) {
if ($scope.NaturalMembers[i].NationalNumber == $scope.MembersNationalCode) {
$scope.Fullname = $scope.NaturalMembers[i].Name + " " + $scope.NaturalMembers[i].Family;
}
}
}
};
I'm mentioning again. It works properly. But i'm looking for best way. And this question is a sample.
Thanks.