'moment is not defined' when using DateTimePicker in sub page with Primefaces

[TheTimeWalker]

Overview
There's currently a bug using Bootsfaces in combination with PrimeFaces when using modules like DateTimePicker in a subpage. Whenever an ajax request is done to change a content to a different sub-page, You then end up with an error in the JS console:

• jQuery.Deferred exception: moment is not defined @[url]/:1:235 j@[url]/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=6.2:2:29997 g/</k<@[url]/jquery/jquery.js.xhtml?ln=primefaces&v=6.2:2:30313 jquery.js.xhtml:2:31569

• ReferenceError: moment is not defined

It seems like that this happens in connection with Primefaces as the error exception mentions the jQuery resource from Primefaces itself.

Reproducing the error

• Create a template page with a dynamic content using <ui:include> and for example a navigation bean
• Create a subpage with <b:dateTimePicker> in it
• Add a commandLink/navLink/etc. on the main page that does an ajax request to change the content page to the one with dateTimePicker
• Run the app, the console should throw an error and the DateTimePicker is not useable as the button does nothing

Other resources
It's probably a longer standing bug as there's a StackOverflow question where an user had a similar issue with that. He managed to fix this by manually loading his own moment.js and DateTimePicker.js files.

Link: https://stackoverflow.com/questions/39620172/using-bootsfaces-datetimepicker

Using

• BootsFaces 1.2.0
• PrimeFaces 6.2
• Payara 5.181.0

[stephanrauh]

Most likely it's not the fault of PrimeFaces (although PrimeFaces has a feature addressing exactly that problem). When you JSF page is initially rendered, it doesn't know it's going to contain a b:dateTimePicker at some time in future. So it doesn't load the JavaScript libraries needed by the b:dateTimePicker.

Currently, the recommended solution is to add a hidden b:dateTimePicker to the front page (the page containing the <ui:include>). Setting rendered="false" guarantees that the extra b:dataTimePicker doesn't do anything exception loading the JavaScript libraries. In your case, it should load moment.js.

Does this solve your problem? Please report back so we can close the ticket (and answer the question on StackOverflow).

[TheTimeWalker]

Hey, thanks! Adding a hidden b:dateTimePicker in the template page does the trick. Pretty simple workaround actually, haha.

Seeing as PrimeFaces does contain a feature that addresses this, would it make sense to include a similar feature for BootsFaces components like this?

[stephanrauh]

It seems the feature has already been implemented in JSF 2.3:

javaee/javaserverfaces-spec#1423

[stephanrauh]

Summarizing what @tandraschko told me:

• JSF 2.3 does support dynamically loading JavaScript and CSS resources.
• However, the default implementation has been implemented with @ResourceDependencies in mind. As Thomas says below, our approach probably already works with Mojarra 2.3 and with PrimeFaces (regardless of the JSF version).
• We can't do that because of the theming. So the alternative is to use some low-level API. That, in turn, always bears the danger of being incompatible to either Mojarra or MyFaces.
• Many of our users use also use PrimeFaces, so it's a good idea to support the PrimeFaces API with older versions of JSF, too.
• There's no guarantee we can do it with JSF 2.3. Some of these features are still being developed.

Cutting a long story short: IMHO we should continue investigating the topic, but it's unlikely it will make it into BootsFaces 1.3.0.

[tandraschko]

Ich dont think that point 2 is correct. The API should support all cases, i just said that it doesnt work in MyFaces currently.
PrimeFaces, without jsf23, should work with bootsfaces.

[stephanrauh]

@tandraschko Thanks! My sloppy choice of words :). I've updated the point.

[tandraschko]

JFYI: https://issues.apache.org/jira/browse/MYFACES-4243

[tandraschko]

Fixed and tested with BootsFaces on MyFaces, will be included in 2.3.2.

So it should work on every JSF version when PF6.0+ is included, also it works fine if you use JSF2.3 without PF6.0+.

[stephanrauh]

Let's close the issue. Anybody who need the feature can either add PrimeFaces or migrate to JSF 2.3 (or above).