JSF use bootstrap-datepicker change listener fires never ending change events

529 views
Skip to first unread message

Christian Hildebrandt

unread,
May 30, 2015, 4:28:58 AM5/30/15
to bootstrap-...@googlegroups.com
Hello,

i use the datepicker within a jsf page with a little customization - maybe this is the reason - maybe not. I have also included the omnifaces onLoadScript Tag which loads javascript function on every request - also ajax. Within this function i configure the datepicker. This all works fine. Whenever an ajax request is made, the page recreates also the datepicker. Now i want to have a changelistener (a bean) set on the input field. Ok. Fine. When i visit this page, the datepicker fires events in a loop and my bean function is called a million times - unless nothing happend yed. I never changed a value!!! This also happens when i use the dateChange event function in the datepicker configuraion. So what is the problem? Below is a simple example:

JSF page:

[...]
<body>
<o:onloadScript>externalJavascriptFileFunction();</o:onloadScript>
[...]
<h:inputText id="monthDatepicker" value="#{bean.selectedMonth}" styleClass="form-control datepicker monthPicker">
    <f:ajax event="valueChange" execute="monthDatepicker" listener="#{bean.selectedEmployeeChanged}" render=":datatable" />
    <f:convertDateTime pattern="MM.yyyy" />
</h:inputText>

Javascript File:
externalJavascriptFileFunction(){
$('input.datepicker').each(function() {
$(this).datepicker('remove');

// full age datepicker
if ($(this).hasClass("fullAge")) {
var dt = new Date();
dt.setFullYear(new Date().getFullYear() - 18);
$(this).datepicker({
format : "dd.mm.yyyy",
endDate : dt,
todayBtn : "linked",
language : displayLanguage,
todayHighlight : true,
immediateUpdates : true,
autoclose : true,
calendarWeeks : true,
daysOfWeekHighlighted : [0, 6]
});
}

// standard datepicker
if ($(this).hasClass("standard")) {
$(this).datepicker({
format : "dd.mm.yyyy",
todayBtn : "linked",
language : displayLanguage,
todayHighlight : true,
immediateUpdates : true,
autoclose : true,
calendarWeeks : true,
daysOfWeekHighlighted : [0, 6]
});
}

// no future datepicker
if ($(this).hasClass("noFuture")) {
$(this).datepicker({
format : "dd.mm.yyyy",
endDate : new Date(),
todayBtn : "linked",
language : displayLanguage,
todayHighlight : true,
immediateUpdates : true,
autoclose : true,
calendarWeeks : true,
daysOfWeekHighlighted : [0, 6]
});
}
// month datepicker
if ($(this).hasClass("monthPicker")) {
$(this).datepicker({
format : "mm.yyyy",
language : displayLanguage,
immediateUpdates : true,
autoclose : true,
minViewMode : 1
});
}
          });
}

Reply all
Reply to author
Forward
0 new messages