JSF page lost style after partial update

[maciass2008]

when i try to update the content of modal using jsf + bootsfaces with

<b:commandButton icon="edit" ajax="true" update=":modalFormUpdate"
oncomplete="$('#myModalUpdate').modal('show')"
action="#{documentBean.getDocToUpdate(doc)}">

all work fine: i retrieve data in the modal but i lose the javascript and style of my components
any idea??
note well : i use a template page and i include in it the modal panel using ui:include

[stephanrauh]

No idea. These things happened in the past when we updated the wrong part of the DOM tree. But BootsFaces 1.2.0 has been published several months ago and there are 2000+ downloads per month. So I don't think it's really a BootsFaces bug.

Nonetheless, I'll hunt the bug if you provide us a reproducer. That's a small but complete GitHub project (or a zip file containing the sources, including the pom.xml). It shouldn't need any database. Ideally it's just a simple project that runs on a simple Tomcat out-of-the-box.

I know that's demanding a lot (and I know how much work it is to create such a reproducer), but usually that's the key to solve the issue fast and efficiently.

Thanks in advance,
Stephan

[maciass2008]

thank you for your effort
i'm using the last version (bootsFaces 1.2.0) and i still have this bug.
so trying to be clearer:
this is a code part of my modal :

<div id="myModalUpdate" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-content">
<h:form id="modalFormUpdate">
.
.
.
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Origine de la piece</label>
<h:selectOneMenu class="selectpicker"
value="#{documentBean.document.originePiece}">
<f:converter converterId="entiteConverter" />
<f:selectItems value="#{administrationBean.origines}"
var="originePiece" itemValue="#{originePiece}"
itemLabel="#{originePiece.libelleEntite}" />
</h:selectOneMenu>
</div>
</div>
.
.
.
</h:form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

in my template page i have the include of my js and css files :

<h:outputStylesheet name="assets/css/bootstrap-select.min.css" /> (head part)
<h:outputScript name="assets/js/bootstrap-select.min.js" /> (at the end of body part)

when i open my modal to add a new row to my b:datatable all work fine and i have the right style and the right behavior javascript
but when i use command button to edit this row :

<b:dataTableColumn label="Action">
<b:commandButton icon="edit" ajax="true"
update=":modalFormUpdate"
oncomplete="$('#myModalUpdate').modal('show')"
action="#{documentBean.getDocToUpdate(doc)}">
</b:commandButton>
</b:dataTableColumn>

i retrieve the data to update at the components of my form
but the component h:selectOneMenu loses its style and its behavior javascript
so i think when i send action to server using b:commandButton and i refresh the form using update attribute something happen (1- maybe there is a malfunction caused by the use of action and update.
2-or maybe when i use update attribute it refreshes form without taking into account the loaded css and js files.
(my two modals : updateModal.xhtml and addModal.xhtml are in the same location)
any suggestions?

[stephanrauh]

So you've used a standard h:selectOneMenu and converted it to a Bootstrap component using the CSS class? Don't get me wrong, there's nothing wrong with this approach, but BootsFaces is ill prepared for such a scenario. We've implemented b:selectOneMenu. One of the challenges was to initialize this component after an AJAX request.

If you need to use h.selectOneMenu for some reason, you have to re-initialize it yourself. I didn't try it yet, but I suppose you need to add something like this to the commandbutton:

oncomplete="$('#myModalUpdate').modal('show');$('.selectpicker').selectpicker();"

Hope that helps!
(and please report back if it does :) )

[maciass2008]

fixed ^^
**This is different to calling val() directly on the select element. If you call val() on the element directly, the bootstrap-select ui will not refresh (as the change event only fires from user interaction). You will have to call the ui refresh method yourself.

$('.selectpicker').val('Mustard');
$('.selectpicker').selectpicker('render');**

so to fix the problem i had to add at the "oncomplete" attribute $('.selectpicker').selectpicker('render');

<b:dataTableColumn label="Action">
<b:commandButton icon="edit" ajax="true"
update=":modalFormUpdate"
oncomplete="$('#myModalUpdate').modal('show');$('.selectpicker').selectpicker('render');"
action="#{documentBean.getDocToUpdate(doc)}">
</b:commandButton>
</b:dataTableColumn>

now it work correctly ^^

[maciass2008]

yes exactly that's what I just shared with you 👍