Hi,
I've got a page, which includes a drop down choice box, and a panel (with a
list of images).
The drop down box holds an id (which ties back to a list of images), what
I'm wanting to be able to do is that if the user changes the drop down
choice, the panel refreshes via ajax with the new images.
Here's a few snippets of code:
-
//insert the image preview panel
final ImagePreviewPanel imagePreviewPanel = new
ImagePreviewPanel(imagePreviewPanel, generalPage.getImageCollectionId());
imagePreviewPanel.setOutputMarkupId(true);
form.add(imagePreviewPanel);
form.setOutputMarkupId(true);
//add the OnChange for the ajax call
OnChangeAjaxBehavior onChangeAjaxBehavior = new OnChangeAjaxBehavior(){
protected void onUpdate(AjaxRequestTarget target) {
FormComponent fc = getFormComponent();
fc.getForm();
GeneralPage aGeneralPage = (GeneralPage)
fc.getForm().getModelObject();
//get the drop down image collection id
if (aGeneralPage.getImageCollectionOption() != null){
String keyValue =
aGeneralPage.getImageCollectionOption().getKey();
imagePreviewPanel.setImageCollectionId(new
Long(aGeneralPage.getImageCollectionOption().getKey()));
}
target.addComponent(imagePreviewPanel);
}
};
-
Then I've got the panel (which I've cut down on the details here to make it
a bit easier to understand)
-
public class ImagePreviewPanel extends Panel
{
private Long imageCollectionId;
private String galleryCounterText = ;
private List imageList = new ArrayList();
public ImagePreviewPanel(final String componentId, Long
anImageCollectionId){
super(componentId);
//set up the instance variable from the constructor
setImageCollectionId(anImageCollectionId);
//now add the image previews
//first get the images if there are any
ImageCollection imageCollection =
imageCollectionDao.findByImageCollectionId(imageCollectionId);
WebMarkupContainer dataImagecontainer = new
WebMarkupContainer(dataimage);
dataImagecontainer.setOutputMarkupId(true);
add(dataImagecontainer);
//display the total number of images in the list
galleryCounterText = imageCollection.getImages().size();
add(new Label(galleryCounter,new PropertyModel(this,
galleryCounterText)).setOutputMarkupId(true));
//get the collection of images from the imageCollection object
imageList = imageCollection.getImages();
final PageableListView imageView;
dataImagecontainer.add(imageView = new
PageableListView(galleryList, new
CompoundPropertyModel(imageList), 20){
public void populateItem(final ListItem listItem){
final Image image =
(Image)listItem.getModelObject();
//set up default image element description
String imageElementDescription = new
StringResourceModel(noImageElementDescription, this, null).getString();
//set up image element description if a better
one exists
StaticImage staticImage = new
StaticImage(previewImage,
image.getImageHref());
staticImage.setOutputMarkupId(true);
listItem.add(staticImage);
}
});
imageView.setOutputMarkupId(true);
}
public Long getImageCollectionId() {
return imageCollectionId;
}
public void setImageCollectionId(Long imageCollectionId) {
this.imageCollectionId = imageCollectionId;
}
}
-
The only thing is, don't feel like I've got my head completely around the
wicket models and I'm having trouble working out what I need to do to the
page and panel to get the panel to refresh via ajax.
Sorry for the amount of code, but it's the only way I think to try and
describe what I've currently got.
Thanks
Andrew
--
View this message in context:
http://www.nabble.com/Using-ajax-to-update-a-panel-tf4949239.html#a14170394
Sent from the Wicket
