my first question here. Hope I don't mess up too bad...
My problem is with the Wicket CheckGroupSelector. It doesn't work!
Here is the relevant code:
CheckGroup<AccountModel> groupMemberRecipients = new CheckGroup<AccountModel>("groupMemberRecipients", new ArrayList<AccountModel>());
groupMemberRecipients.add(new CheckGroupSelector("groupMemberSelector"));
ListView<AccountModel> memberRecipients = new ListView<AccountModel>("memberRecipients", groupParticipants) {
#Override
protected void populateItem(final ListItem<AccountModel> item) {
item.add(new Check<AccountModel>("groupMember", item.getModel()));
item.add(new Label("memberName", item.getModelObject().getFullName()));
}
};
memberRecipients.setReuseItems(true);
groupMemberRecipients.add(memberRecipients);
And the relevant html code:
<span wicket:id="groupMemberRecipients">
<input wicket:id="groupMemberSelector" type="checkbox"><b> Participants</b></input>
<div wicket:id="memberRecipients">
<input wicket:id="groupMember" type="checkbox"/><span wicket:id="memberName"></span>
</div>
</span>
I basically followed the wicket example of a Checkgroup word for word. On the form submit, I can retrieve the selected options just fine. Only the select/deselect all checkbox at the top doesn't work. Anyone know what I'm doing wrong?
Using wicket 6.9.1 btw
Related
I am having the following issue with Angular form arrays, I was wondering if someone could help me out as I am quite new with Angular?
Apologies I cannot provide a plunker due to the complexity of the project (lots of dependencies and complex code), but I will do my best to provide as much detail as I can!
I have a JSON response from a service call that contains a group of fields (called "myFields") such as:
0:
name: "field1"
1:
name: "field2"
I am getting this response from a call to an API, and I need to build a form using the fields from the reponse. I am currently looping through this response and attempting to build a form array as follows:
constructor(private formBuilder: FormBuilder){
this.myFormGroup = this.formBuilder.group({
aliases: this.formBuilder.array([
])
});
}
get aliases() {
return this.myFormGroup.get('aliases') as FormArray;
}
getServiceFields(){
*call to get fields and store in "myFields"*
for (let item of myFields) {
this.aliases.push(this.createGroup(item));
}
}
createGroup(item): FormGroup {
return this.formBuilder.group({
name: new FormControl(item.name)
});
}
And in my view I have:
<div [formGroup]="myFormGroup" class="example-form">
<div formArrayName="aliases" >
<div *ngFor="let field of myFormGroup.controls.aliases.controls;
let i=index">
<mat-form-field>
<input matInput placeholder="{{field.value.name}}"
formControlName="{{field.value.name"}}>
</mat-form-field>
The issue I am having is that nothing shows on the page and this is the error I see in the console window:
Error: Cannot find control with path: 'aliases -> name'
I will also attach a screenshot showing the structure of my FormGroup in the console window:
FormGroup structure
Hopefully this is enough information, if additional details are required I can provide them. Anyone have an idea where I am going wrong? Thanks!
Edit: I cannot hard code the formControlName (e.g formControlName="name") as I am looping through the list of controls in "aliases", this is why I am trying to use {{field.value.name}}
<div *ngFor="let field of myFormGroup.controls.aliases.controls;
let i=index">
<div [formGroup]="field">
<mat-form-field>
<input matInput placeholder="{{field.value.name}}"
formControlName="name">
</mat-form-field>
</div>
replace above code in your html.
Problem is you are not binding formgroup before formcontrolname. formcontrolname should work under formgroup.
Please let me know if you have any question.
I have a situation where i need to have a dynamic array, think like a booking form, where people are adding flights to the list but it could be 1 flight or 10 flights. i did up a dummy example where i have been able to replicate the issue, i'm hoping it's me and not an issue with the Angluar. anyway, here it is.
I start with an empty array with a button to add items, those items are bound with a *ngFor (code below) each of the fields below are in that array, the "Name" values i have populated 1-5 by just typing
I then Decide to delete number 3 which is successful
I then decide to add a new one, here is where everything goes wrong. as you can see below, it successfully adds the 5th item again, but the one that should have #5 in it, is now blank.
I then press "Create Array" which just dumps the array to console, and i see the below, the values are still in there, but not bound to the Input for that 1 item.
Ok, Now for the code:
This is my HTML Template file:
<form name="form" #f="ngForm">
Name: <input class="input" type="text" name="Name" [(ngModel)]="model.Name"
#Name="ngModel" />
Description: <input class="input" type="text" name="Description"
[(ngModel)]="model.Description" #Description="ngModel" />
<br>
<button (click)="addThought()">New Thought</button>
<div class="Thought" *ngFor="let Thought of myObject.Thoughts;let i=index">
Thought Name:<input name="Name-{{i}}" [(ngModel)]=Thought.Name
#Thought.Name="ngModel" type="Text" /><br>
Thought Description:<input name="Description-{{i}}"
[(ngModel)]=Thought.Description #Thought.Description="ngModel" type="Text"
/>
<br>
<br>
<button (click)="removeThought(Thought)">Remove Thought</button>
</div>
<button (click)="CreateThought()">Create Arrays</button>
</form>
and this is my component TS file:
export class CreateThoughtComponent implements OnInit {
model: any = {};
myObject: customObject = new customObject;
constructor(private guid: Guid, private staticData: StaticDataService) {
}
ngOnInit() {
}
CreateThought() {
console.log(this.myObject);
}
addThought() {
let thought: Thought = new Thought;
this.myObject.Thoughts.push(thought);
}
removeThought(t: Thought) {
this.myObject.Thoughts = this.myObject.Thoughts.filter(item => item !==
t);
}
}
And here is the declaration of the array within an object
export class customObject {
Name: string;
Description: string;
Thoughts: Thought[];
constructor() {
this.Thoughts = new Array<Thought>();
}
}
export class Thought {
Name: string;
Description: string;
}
Any help or suggestions would be greatly appreciated.
This is a tricky thing about Angular's change detection mechanism. You can solve your problem easily by creating a clone of your object. e.g.
addThought() {
let thought: Thought = new Thought;
this.myObject.Thoughts.push(thought);
// clone the object in order to force Angular to apply changes
this.myObject = JSON.parse(JSON.stringify(this.myObject));
}
I solved it by removing the name="Name-{{i}}" from the input's, and adding [ngModelOptions]="{standalone: true}" instead. at it seemed to be an issue with the dynamic way i was assigning the Name to the input using the "index"
I was able to solve it by randomly generating a guid for each name but that created a mire of other issues as well.
That being said, i have also tested DiabolicWord's solution above and it works, since it's so simple going to mark his as the answer.
I have created a function that would be able to place the array contents into a listview, Here is my progress so far.
<div id="MainPage" data-role="page" >
<div data-role="content">
RENAME
</div>
</div>
<div id="ViewPage" data-role="page" >
<div data-role="content">
<ul id="viewlist" data-role="listview" data-filter="true" data-filter-placeholder="Sample Contents" data-inset="true">
<!-- array contents goes here -->
</ul>
</div>
</div>
<script>
var sampleContent = new Array( );
displayArray( )
{
for(var scan=0; scan<sampleContent.length; detect++)
{
$('#viewlist').append('<li>' + sampleContent[scan] + '</li>');
}
}
</script>
My code works during the first press of the button but when i pressed it the second time, the list view becomes messed up.
Any help or advice will be glady accepted thanks in advance.
edited, i have figured out how to do it but I am having problems during the second press of the button.
First of i don't want to be rude but i think you should start first to read some basics about android.
Like:
Android Activities , life cycle of activities
Layout in Android (how to add button on an activity then respond to a click etc) , different existing Layout in android and android widget (like the listView for example)
of course there are a lot more to read but it s a good way to start.
However i will provide you codes that will do what you are asking for and i will try to explain as much as i can
First of all you need to create the other activity and inside the layout of that activity insert a listview
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_gravity="center_horizontal" />
</LinearLayout>
then the java code of the other activity will look like this
public class MainActivity2 extends Activity {
//create the array adapter that will input your array and convert it into a list of view
ArrayAdapter<String> arrayAdapter;
String[] list;
ListView listView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
listView = (ListView)findViewById(R.id.listView);
// get the array from ressource and insert them on an array
list = getResources().getStringArray(R.array.listArray);
// then create the arrayadpater with input your array of string if you dont get //anything here just read android documentation about arrayAdapter
arrayAdapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,list );
//then set the adapter to your listView
listView.setAdapter(arrayAdapter);
}
}
res xml file
<resources>
<string-array name="listArray">
<item>Apple</item>
<item>Banana</item>
<item>Cherry</item>
<item>Cranberry</item>
<item>Grape</item>
<item>Grape</item>
</string-array>
</resources
>
Hope it will help
Just add .listview('refresh') after you have added all items.
$('#viewlist').listview('refresh');
If you want to empty the list each time and refill it, call .empty() before the for loop:
$('#viewlist').empty();
To use better jquery mobile coding, structure your code like this:
Take the onclick out of the anchor tag and add an id:
<a id="viewPageBtn" href="#ViewPage" data-role="button" >RENAME</a>
In your script tag, handle pagecreate on the main page, and within it handle the click event of the anchor:
$(document).on("pagecreate", "#MainPage", function(){
var sampleContent = ["item 1", "item 2", "item 3"];
$("#viewPageBtn").on("click", function(){
$('#viewlist').empty();
for(var scan=0; scan < sampleContent.length; scan++)
{
$('#viewlist').append('<li>' + sampleContent[scan] + '</li>').listview('refresh');
}
$('#viewlist').listview('refresh');
});
});
Hi I am a newbie to angular js and I am hoping someone can help me out with the following problem.
I have a numeric field called numAdults and I need to show a set of field (such as name, address, telephone etc ) numAdult times to get those information for each of those person.
Here is the jsfiddle for the problem jsfiddle link
Here is also an overview of code of the controller
function bookingController($scope){
$scope.numAdults = 1;
$scope.personLoop = function(){
console.log('personLoop called')
return new Array($scope.numAdults);
//return new Array(2);
}
the html
<label for="book_num_adults">Number of adults:</label>
<input id="book_num_adults" type="text" ng-model="numAdults">
<div class="row" ng-repeat="t in personLoop()" style="border:2px solid red;margin-top:10px">
<h4>Person {{$index+1}}</h4>
<input placeholder="name"><br>
<input placeholder="address"><br>
<input placeholder="telephone"><br>
</div>
Can you also help me with how to transform this as an module ( not just a controller based )
Thank you in advance!
Your Fiddle was riddled with errors...
http://jsfiddle.net/bRgTR/5/
Under Frameworks & Extensions, you need to change the 2nd dropdown from "onLoad" to one of the "No wrap" options
Your controller definition is mangled. It's supposed to be: .controller('name', ['depname', function (depname) { })]); -- you had your closing array misplaced.
You should really use semi-colons.
You don't create an array of 5 items in JavaScript like this: var a = new Array(5), that creates an array that contains a 5. Instead, you should do var a = []; a.length = 5;
Creating a calculator-like dialog, I noticed that quickly clicking on a button in IE will not fire the click event twice (Chrome/FF work as expected), but rather throws the click event, then a double-click event. Experimenting with some simple code, I essentially want to duplicate this behavior:
<script language=javascript>
function minus(num)
{
var i = document.getElementById('0001');
if (i.value > 1)
{
i.value -= num;
return true;
}
}
</script>
<input type="button" onclick="minus(1);" ondblclick="minus(1);" value="minus">
<input type="text" id="0001" name="0001" value=10>
I need to do this in ExtJS 3.1, but my efforts have been stymied. Here is the code I have tried:
Button btn = new Ext.Button(new ButtonConfig()
.text(text)
.tooltip(tooltip)
.tooltipType("title")
.scope(this)
.handler(delgateFunction)
.x(x)
.y(y)
.tabIndex(_tabIndex++)
.width(width).height(height)
.ToDictionary());
btn.addListener("mouseenter", new EventHandler(mouseHandler));
btn.addListener("mouseover", new EventHandler(mouseHandler));
btn.addListener("mouseout", new EventHandler(mouseLeave));
if (Ext.isIE)
{
//btn.on("dblclick", new EventHandler(DoubleClick));
//btn.addListener("dblclick", new EventHandler(DoubleClick));
//btn.addListener("ondblclick", new EventHandler(DoubleClick));
}
None of those three lines seemed to work. Any suggestions?
try the following after the button is rendered:
btn.el.on("dblclick", new EventHandler(DoubleClick));
Ext.Button itself hasn't the "dblclick" event (check the api) while its underlying el(Ext.Element) has.
Complete Sample:
new Ext.Button({id:'btn', text:'dblclick', renderTo:Ext.getBody() });
Ext.getCmp('btn').el.on('dblclick', function(){alert('db click');});
Mr. Zhu led me to the correct answer:
Events.AddEvent(_zeroBtn.getEl().dom, "dblclick", DoubleClickZero);