Hey guys,
I have a webpage that contains several panels. Some of these panels have
WebMarkupContainers that allow the user to add stuff to a listview and be
refreshed without refreshing the page.
My problem is applying JS and CSS to the data in the WebMarkupContainer. I
am trying to use sweetTitles to give me tooltips for this data.
I have to refresh the page and it works fine but without refreshing it is
like the CSS and the JS can not communicate with the data in the
WebMarkupConatiner.
I know I am doing something wrong but I can not figure it out.
I have made a small example with a Customer already added to the listView
inside the WebMarkupContainer. I get the same results with this code. The JS
and CSS do not work on the hoverover.
I have tried adding the JS and CSS to the MarkupContainer, Panel, and the
webpage with no luck. I get the same results no mater what.
Here is the code. Any help would be much appreciated. In this example I am
adding the tooltip to the POC.
public class HoverPanel extends Panel {
ProjectData pd;
public HoverPanel(String id, final ProjectData pdata) {
super(id);
add(JavascriptPackageResource.getHeaderContribution(HoverPanel.class,
"addEvent.js"));
add(JavascriptPackageResource.getHeaderContribution(HoverPanel.class,
"sweetTitles.js"));
add(CSSPackageResource.getHeaderContribution(HoverPanel.class,
"sweetTitles.css"));
pd = pdata;
List<CustomerData> customerList = new ArrayList<CustomerData>();
CustomerData cd = new CustomerData();
cd.setId(1234);
cd.setName("Customer 1");
//create poc for customer
List<POCData> pocList = new ArrayList<POCData>();
POCData poc = new POCData();
poc.setId(10);
poc.setName("Peterson, Tracy");
poc.setPhone("555-555-5555");
poc.setTitle("Big Shot");
poc.setEmail("em...@something.com");
poc.setCustPocId(3);
pocList.add(poc);
cd.setPOCList(pocList);
customerList.add(cd);
pd.setCustomerList(customerList);
//create container to hold listview
final WebMarkupContainer listContainer = new
WebMarkupContainer("theContainer");
listContainer.setOutputMarkupId(true);
listContainer.setVisible(true);
listContainer.setOutputMarkupPlaceholderTag(true);
add(listContainer);
//get Customer List
IModel<List<CustomerData>> custList = new
LoadableDetachableModel<List<CustomerData>>() {
protected List<CustomerData> load() {
return pd.getCustomerList();
}
};
//create listview of customers
ListView<CustomerData> lv = new ListView<CustomerData>("rows",
custList) {
public void populateItem(final ListItem<CustomerData> item)
{
final int index = item.getIndex();
item.add(new AttributeModifier("class", true, new
AbstractReadOnlyModel<String>()
{
public String getObject()
{
return (index % 2 == 1) ? "even" : "odd";
}
}));
item.add(new AttributeModifier("height", true, new
Model<String>("20")));
//create modal and ajax link to edit customers
final ModalWindow editmodal;
editmodal = new ModalWindow("editmodal");
editmodal.setInitialHeight(350);
editmodal.setInitialWidth(600);
editmodal.setResizable(true);
editmodal.setPageMapName("CustomerEdit");
editmodal.setCookieName("CustomerEdit");
editmodal.setTitle("Update Customer");
editmodal.setPageCreator(new ModalWindow.PageCreator() {
public Page createPage() {
return new CustomerPopup(item.getIndex(), "update",
editmodal, pd);
}
});
editmodal.setWindowClosedCallback(new
ModalWindow.WindowClosedCallback()
{
public void onClose(AjaxRequestTarget target) {
target.addComponent(listContainer);
}
});
AjaxFallbackLink<Void> custlink = new
AjaxFallbackLink<Void>("hoverlink") {
public void onClick(AjaxRequestTarget target) {
editmodal.show(target);
}
};
//do not allow them to close the modal window by clicking
the X
editmodal.setCloseButtonCallback(new
ModalWindow.CloseButtonCallback(){
public boolean
onCloseButtonClicked(AjaxRequestTarget target)
{
return false;
}
});
//get Customer name
custlink.add(new Label("hovername", new
PropertyModel<String>(item.getModel(), "name")));
item.add(custlink);
item.add(editmodal);
//add Customer POC
CustomerData cd = (CustomerData)item.getModelObject();
//create listview of customer pocs
ListView<POCData> lv2 = new ListView<POCData>("pocs",
cd.getPOCList()) {
public void populateItem(final
ListItem<POCData> item)
{
final int count = item.getIndex();
//add Customer POC
POCData poc =
(POCData)item.getModelObject();
AttributeModifier am0 = new
AttributeModifier("showtooltip", true,
new Model<String>("true"));
AttributeModifier am1 = new
AttributeModifier("title", true, new
Model<String>(poc.getName()+" \r\n - Title: "+poc.getTitle()+" \r\n - Phone:
"+poc.getPhone()+" \r\n - Email: "+poc.getEmail()));
if(count != 0){
Label name = new
Label("hoverpoc", new Model<String>(" /
"+poc.getName()));
name.add(am0);
name.add(am1);
item.add(name);
} else{
Label name = new
Label("hoverpoc", new
Model<String>(poc.getName()));
name.add(am0);
name.add(am1);
item.add(name);
}
}
};
item.add(lv2);
}
};
lv.setOutputMarkupId(true);
//add listview to container so it can be updated
listContainer.add(lv);
if(lv.size()>0){
listContainer.setVisible(true);
}
}
}
--
View this message in context:
http://apache-wicket.1842946.n4.nabble.com/JS-and-CSS-issues-with-Panel-or-WebMarkupContainer-tp2229047p2229047.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org
