BootsFaces selectMultiMenu not rendering with ajax

Question

i am using a selectMultiMenu from bootsFaces, the initial values are showed perfectly, but after rendered, with the new values the combo doesnt open, if I check the source code in my browser it shows that the bean loeaded the values correctly. It only happens with this bootsFaces's element, the rest of my project with jsf render with no problems with ajax. Any clue? Thanks!

            <h:form id="form-Principal">
            <h:panelGroup id="panel-Principal" layout="block" >
                <div class="col-md-12">                                 
                    <div class="col-md-1">
                        <label for="servicio" class="control-label">Servicio:</label>
                    </div>
                    <div class="col-md-2">
                        <h:selectOneMenu disabled="#{empty testops.ambiente}" id="servicio" class="combobox form-control" value="#{testops.servicio}" >
                            <f:selectItem itemValue="" itemLabel="Seleccione..."/>
                            <f:selectItems value="#{testops.listServicios}" />
                            <f:ajax event="change" listener="#{testops.obtenerOperaciones}" render="cboperacion" execute="@this"></f:ajax>
                        </h:selectOneMenu>
                        <h:message for="servicio" class="error"/>
                    </div>
                    <div class="col-md-1">
                        <label for="operacion" class="control-label">Operación:</label>
                    </div>
                    <div class="col-md-2">
                        <b:selectMultiMenu id="cboperacion" value="#{testops.operacion}" nonSelectedText="Seleccione...">
                             <f:selectItems value="#{testops.operaciones}"/>
                        </b:selectMultiMenu>
                    </div>
                    <div class="col-md-1">
                    </div>
                    <div class="col-md-1">
                        <f:ajax render=":salida form-Principal:panel-Principal" execute="@form" onevent="loading">
                            <h:commandLink class="btn btn-danger boton_rojo pull-right" value="Ejecutar" action="#{testops.ejecutarOperaciones()}"></h:commandLink>
                        </f:ajax>
                    </div>
                </div>                      
            </h:panelGroup>
        </h:form>enter code here

Onload:

After rendering, it has diffent values, but combo is not display.

Yes, as you can see in the code, when the first combo is selected it calls and ajax to render the second one. — user3285427, Jan 18 '18 at 12:18
Most likely you've found a bug. I'll try to reproduce and solve the bug ASAP (but this might take a few days). In the meantime, try to update the parent of `cboperación`. In your particular case, that's the principal panel, which is probably too much because updating the panel moves the focus to another input field. But if my theory is correct, the `` is initialized correctly. — Stephan Rauh, Jan 18 '18 at 22:04
If so, wrap the `` in a `
`, and update this `
` in the AJAX request. That should do the trick. — Stephan Rauh, Jan 18 '18 at 22:05
Unfortunatly neither of the options worked. It is still doesnt display the combo after render. — user3285427, Jan 19 '18 at 17:35

score 3 · Answer 1 · answered Jan 19 '18 at 22:04

I've tried to reproduce your bug without success. Or rather: the code works as intended. The <b:selectMultMenu> is updated with the new values.

[meta] I know this isn't an answer (yet)... I just chose the answer because it's the only way to include source code. [/meta]

So I suggest you

copy me example code below into your project and see if it works
or you send me a "reproducer", i.e. a tiny but complete project showing the problem. For instance, you could upload a Maven project to GitHub. Please reduce the reproduces as much as possible. For instance, I need to be able to run it without configuring a database.

Here's the sourcecode I used to reproduce your bug:

As a basis, I used our showcase.
I copied your JSF code snippet into the empty.xhtml.

I created a JSF bean as follows:

package de.beyondjava.jsf.sample.carshop;                                                                                                                                                                       

import java.util.ArrayList;                                                                                                                                                                                     
import java.util.List;                                                                                                                                                                                          

import javax.faces.bean.ManagedBean;                                                                                                                                                                            
import javax.faces.bean.SessionScoped;                                                                                                                                                                          

@ManagedBean                                                                                                                                                                                                    
@SessionScoped                                                                                                                                                                                                  
public class Testops {                                                                                                                                                                                          
  private String ambiente = "que";                                                                                                                                                                              

  private List<String> listServicios = new ArrayList<>();                                                                                                                                                       

  private String operacion;                                                                                                                                                                                     

  private List<String> operaciones = new ArrayList<>();                                                                                                                                                         

  private String servicio;                                                                                                                                                                                      

  {                                                                                                                                                                                                             
    listServicios.add("Servicio 1");                                                                                                                                                                            
    listServicios.add("Servicio 2");                                                                                                                                                                            
    shuffleOperaciones();                                                                                                                                                                                       
  }                                                                                                                                                                                                             

  public void ejecutarOperaciones(Object o) {                                                                                                                                                                   

  }                                                                                                                                                                                                             

  public String getAmbiente() {                                                                                                                                                                                 
    return ambiente;                                                                                                                                                                                            
  }                                                                                                                                                                                                             

  public List<String> getListServicios() {                                                                                                                                                                      
    return listServicios;                                                                                                                                                                                       
  }                                                                                                                                                                                                             

  public String getOperacion() {                                                                                                                                                                                
    return operacion;                                                                                                                                                                                           
  }                                                                                                                                                                                                             
  public List<String> getOperaciones() {                                                                                                                                                                        
    return operaciones;                                                                                                                                                                                         
  }                                                                                                                                                                                                             

  public String getServicio() {                                                                                                                                                                                 
    return servicio;                                                                                                                                                                                            
  }                                                                                                                                                                                                             

  public void obtenerOperaciones(Object o) {                                                                                                                                                                    
    shuffleOperaciones();                                                                                                                                                                                       
  }                                                                                                                                                                                                             

  public void setAmbiente(String ambiente) {                                                                                                                                                                    
    this.ambiente = ambiente;                                                                                                                                                                                   
  }                                                                                                                                                                                                             

  public void setListServicios(List<String> listServicios) {                                                                                                                                                    
    this.listServicios = listServicios;                                                                                                                                                                         
  }                                                                                                                                                                                                             


  public void setOperacion(String operacion) {                                                                                                                                                                  
    this.operacion = operacion;                                                                                                                                                                                 
  }                                                                                                                                                                                                             

  public void setOperaciones(List<String> operaciones) {                                                                                                                                                        
    this.operaciones = operaciones;                                                                                                                                                                             
  }                                                                                                                                                                                                             

  public void setServicio(String servicio) {                                                                                                                                                                    
    this.servicio = servicio;                                                                                                                                                                                   
  }                                                                                                                                                                                                             

  private void shuffleOperaciones() {                                                                                                                                                                           
    operaciones = new ArrayList<>();                                                                                                                                                                            
    for (int i = 0; i < 4; i++) {                                                                                                                                                                               
      operaciones.add("opción " + Math.ceil(Math.random()*1000));                                                                                                                                               
    }                                                                                                                                                                                                           
  }                                                                                                                                                                                                             

}

When I chose one of the options of the first combobox, the <b:selectMultiMenu> is updated with the new (random) values.

Thanks man for your help, i am a little busy this week but i 'll try this code ASAP and I'll let you know the result. — user3285427, Jan 22 '18 at 20:16
can you add the empty.xhtml? I want to to check for differences between your code and mine. I am new in jsf so it's very likely that all this issue is because of me — user3285427, Jan 24 '18 at 14:06
Dont need the file, i made it work with your code and simple xhtml file with only 2 combos, so defintly the problem is on the rest of my code. Thank you very much for your help and sorry for bothering you. — user3285427, Jan 24 '18 at 15:07
the problem was in an include that I have on my page that imports some css and js. — user3285427, Jan 24 '18 at 16:51
this is the js that generated the problem , if i remove this it works fine, unfortunatly i need this to a dropdown menu. — user3285427, Jan 24 '18 at 18:04
I see. Bootstrap is initialized twice, causing all kinds of errors. Try setting `net.bootsfaces.get_bootstrap_from_cdn` to `true` in the `web.xml` (also see https://showcase.bootsfaces.net/layout/resourcemanagement.jsf). — Stephan Rauh, Jan 24 '18 at 18:10
Oops, sorry, wrong hint - `net.bootsfaces.get_bootstrap_from_cdn` only influences if the Bootstrap CSS code is loaded or not. — Stephan Rauh, Jan 24 '18 at 18:14
In BootsFaces 1.x there's no way to suppress loading the Bootstrap JavaScript code. We can add such an option in BootsFaces 2, but BootsFaces 1.x tries to minimize the amount of code loaded, so each component loads its individual subset of the Bootstrap.js file. That, in turn, makes it very difficult to suppress loading all these files. I'm afraid you have to find a way to get rid of the script tag in your include file. — Stephan Rauh, Jan 24 '18 at 18:20
when you say that bootstrap is initialized twice does it mean that bootsfaces has a js that includes some of the features of bootstrap.min.js? If this is the case, may be i can only use a js from bootsfaces and make work both my pages — user3285427, Jan 24 '18 at 20:37
Exactly. If you're interested in the JavaScript and CSS code required to render a dropdown, you need to include the BootsFaces code rendering the dropdown. I don't know your application, but it's an educated guess to recommend adding an invisible ``. The component isn't rendered at all, but the JavaScript and CSS code is added to the HTML page. — Stephan Rauh, Jan 25 '18 at 21:30
Actually, that's a fairly advanced topic, so don't worry about being an amateur. The good news is that BootsFaces 2.0 will likely get rid of the resource hell. — Stephan Rauh, Jan 26 '18 at 19:17

BootsFaces selectMultiMenu not rendering with ajax

1 Answers1