I have these two DropDownChoice (DDC) objects that work perfectly fine: when one element is chosen from the first DDC, the list for the second gets update with related choices. The first is strumListDDC, the latter is controlListDDC.
controlListDDC.setOutputMarkupId(true);
controlListDDC.setChoiceRenderer(new ChoiceRenderer<>("name"));
controlListDDC.add(new AjaxFormComponentUpdatingBehavior("change") {
@Override
protected void onUpdate(AjaxRequestTarget target) {
QCControl qcc = controlListDDC.getModelObject();
lotList = QCLot.getLotsForCtrl(qcc.getId());
if (!lotList.isEmpty()) {
target.add(lotListDDC);
}
}
});
searchForm.addOrReplace(new Label("strumListLabel", "Strumento:"));
searchForm.addOrReplace(strumListDDC = new DropDownChoice<>("strumList", InstalledStrum.loadAllStrum(false)));
strumListDDC.setDefaultModel(new Model<>());
strumListDDC.add(new AjaxFormComponentUpdatingBehavior("change") {
@Override
protected void onUpdate(AjaxRequestTarget target) {
InstalledStrum is = strumListDDC.getModelObject();
controlList = QCControl.loadQCControlPerStrumType(is.getStrumType());
lotList = new ArrayList<>();
if (!controlList.isEmpty()) {
target.add(controlListDDC);
target.add(lotListDDC);
}
}
});
For niceness reasons, I added this little bit of Javascript to the page template from which all my HTML pages are derived:
$(function filtersScroll() {
var $filters = $(".viewANfilters");
detailsPos = $filters.position().top;
$(window).on("scroll", function () {
if ($(window).scrollTop() > detailsPos)
$filters.css("position", "fixed").css("top", 0);
else
$filters.css("position", "fixed").css("top", detailsPos -$(window).scrollTop());
});
});
I add the javascript through using Wicket (but the problem is still there if I insert the code directly in the HTML, I just post it for completeness):
response.render(JavaScriptContentHeaderItem.forScript(Costants.JS_FILTERS_SCROLL, "filters_scroll"));
When I add the javascript, the onUpdate function of the first DDC never gets called (checked with debugger). As soon as I remove the javascript, the autoupdating behavior starts working fine again. Not that this javascript is fundamental to the page, I can still go on without it, but I fear the same thing will happen again when I will need to add some serious javascript.
Since I'm pretty new at javascript, can anybody give me a hint on what's stopping the AjaxFormComponentUpdatingBehavior from working? Can it be some sort of conflict between different script tags? There are others in the final page, added by Wicket itself, but since they have always been more than one I didn't think a new script would cause any trouble...
Check your selector ".viewANfilters" - if no element with that class is present, position() will be undefined, your JavaScript fails and Wicket won't be able to register any event handlers.