Uncaught TypeError: $(...).multiselect is not a function using bootfaces

Question

I'm starting to use Bootsfaces, but i've encountered a problem using <b:selectManyMenu> tag.

Here is my xhtml page:

<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<link rel='stylesheet' type='text/css'
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.4.1/css/bootstrap-slider.css"></link>
<link rel='stylesheet' type='text/css'
    href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css
    "></link>
<link rel="stylesheet" type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css"></link>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.4.1/bootstrap-slider.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<script
    src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script
    src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>

<div>
                                    <h:outputLabel value="Select key columns:"/>
                                    <br></br>
                                    <b:selectMultiMenu value="#{controller.keyColumns}">
                                        <f:selectItems value="#{controller.keyLista()}" var="f"
                                            itemLabel="column: -#{f}" itemValue="#{f}"></f:selectItems>
                                    </b:selectMultiMenu>
                                </div>

in which var keyColumns and keyColumns1 are List<String>. The problem is that no one element of the list is selected, but if i use <b:selectOneMenu> all works fine.

The google console says 'Uncaught TypeError: $(...).multiselect is not a function'. Ps: i need all scripts for other project functionalities, and i can't change all using bootsfaces tags. is there any way to use the right jquery code only for this case?

thanks

Just like with PrimeFaces, start by removing all js that might already be available in BootsFaces (bootstrap.js e.g.) — Kukeltje, Dec 29 '16 at 17:02
oh and wow... on the right side (related questions, the ones StackOverflow most likely has already shown you when you created the question) is a littelral duplicate https://stackoverflow.com/questions/27103898/bootstrap-multiselect-typeerror-multiselect-is-not-a-function?rq=1 and another one: https://stackoverflow.com/questions/26040431/bootstrap-multiselect-uncaught-typeerror-undefined-is-not-a-function?rq=1 — Kukeltje, Dec 29 '16 at 17:04

Stephan Rauh · Accepted Answer · 2018-06-04T19:09:45.980

Like Kukeltje already wrote, just remove all these JavaScript imports. You don't need them because they are already part of BootsFaces. Plus, they cause the problem. You're trying to initialize the selectMultiMenu before loading the jQuery file. But jQuery must be loaded first.

Update Jun 4, 2018: In the meantime, BootsFaces 1.2.0 has been released. It contains several bugfixes of <b:selectMultMenu />. So skip the snapshot version mentioned below and jump directly to 1.2.0 (or whatever the current version is when you read this).

Update: I just saw your post scriptum. You may need all of these JS and CSS dependencies, but you don't need each of them on every page. For instance, every page containing a BootsFaces component automatically includes jQuery and the Bootstrap files unless you configure BootsFaces otherwise. And every page containing the b:multiSelectMenu automatically loads the JavaScript file (and there's no way to deactivate this). Also see http://showcase.bootsfaces.net/layout/resourcemanagement.jsf and http://showcase.bootsfaces.net/miscellaneous/Configuration.jsf.

BTW, you may want to update to BootsFaces-1.1.0-SNAPSHOT. We've fixed a couple of bugs of the b:selectMultiMenu, but at the time of writing, be didn't publish an official version on Maven Central yet. See this ticket on how to get it.

That said, here's a working minimal version of your snippet:

    <?xml version='1.0' encoding='UTF-8' ?>                                                                                                
    <!DOCTYPE html>                                                                                                                        
    <html xmlns="http://www.w3.org/1999/xhtml"                                                                                             
          xmlns:h="http://java.sun.com/jsf/html"                                                                                           
          xmlns:f="http://java.sun.com/jsf/core"                                                                                           
          xmlns:b="http://bootsfaces.net/ui"                                                                                               
          >                                                                                                                                
        <h:head>                                                                                                                           
            <title>BootsFaces rocks!</title>                                                                                               
            <meta name="author" content="Stephan Rauh"></meta>                                                                             
        </h:head>                                                                                                                          
        <h:body>                                                                                                                           
          <b:selectMultiMenu value="#{formBean.combobox}">                                                                                 
            <f:selectItem itemValue="0" itemLabel="red"></f:selectItem>                                                                    
            <f:selectItem itemValue="1" itemLabel="yellow"></f:selectItem>                                                                 
            <f:selectItem itemValue="2" itemLabel="green"></f:selectItem>                                                                  
          </b:selectMultiMenu>                                                                                                             
        </h:body>                                                                                                                          
    </html>

Uncaught TypeError: $(...).multiselect is not a function using bootfaces

1 Answers1