JSF couldn't pass data to bootsrtap modal

Question

hello everyone i have a bootsfaces dataTabble, each row has an edit end delete action, i want to show a modal that contains selected row data to edit that object.

i successfully get the selected row i pass data to the managedBean, i assign data to managedProperties, but nothing is shown in Modal input elements.

this is my dataTable code:

<b:dataTable id="articleslist" value="#{listeArticlesAction.listeArticles}" var="article" page-length="10" paginated="true"
                                 page-length-menu="10,20,30">

                                    <b:dataTableColumn value="#{article.code}" label="Code" />
                                    <b:dataTableColumn value="#{article.nom}" label="Nom" />
                                    <b:dataTableColumn value="#{article.description}" label="Description" />
                                    <b:dataTableColumn value="#{article.prix}" label="Prix (DH)" />
                                    <b:dataTableColumn label="Modifier" style="text-align: center">
                                        <h:commandButton style="padding: 0 4px;" iconAwesome="pencil" look="link" pt:data-target="#userEditModal" pt:data-toggle="modal"
                                         action="#{listeArticlesAction.modifierArticle}">
                                            <f:setPropertyActionListener target="#{listeArticlesAction.editArticle}" value="#{article}" 
                                                 />
                                            <f:ajax render="@form"/>
                                         </h:commandButton >
                                    </b:dataTableColumn>
                                    <b:dataTableColumn label="Supprimer" style="text-align: center">
                                        <h:commandButton  style="padding: 0 4px; text-align: center;" iconAwesome="trash" look="link" pt:data-target="#userEditModal" pt:data-toggle="modal"
                                         onclick="confirmDelete()" action="#{listeArticlesAction.supprimerArticle}" >
                                            <f:param name="actionDelete" value="article" />
                                         </h:commandButton >
                                    </b:dataTableColumn>
                                </b:dataTable>

and this is my managedBean class:

public class ListeArticlesAction {

    private List<Article> listeArticles = new ArrayList<Article>();

    private String editArticleNom;
    private String editArticleDescription;
    private int editArticlePrix;
    private Article editArticle;


    /**
     * Methode pour preparer la liste des articles
     */
    @PostConstruct
    public void init() {

        listeArticles = ServiceFactory.getArticleService().allArticles();

    }

    public List<Article> getListeArticles() {
        return listeArticles;
    }
    public void setListeArticles(List<Article> listeArticles) {
        this.listeArticles = listeArticles;
    }


    public String getEditArticleNom() {
        return editArticleNom;
    }
    public void setEditArticleNom(String editArticleNom) {
        this.editArticleNom = editArticleNom;
    }
    public String getEditArticleDescription() {
        return editArticleDescription;
    }
    public void setEditArticleDescription(String editArticleDescription) {
        this.editArticleDescription = editArticleDescription;
    }
    public int getEditArticlePrix() {
        return editArticlePrix;
    }
    public void setEditArticlePrix(int editArticlePrix) {
        this.editArticlePrix = editArticlePrix;
    }


    public Article getEditArticle() {
        return editArticle;
    }

    public void setEditArticle(Article editArticle) {
        this.editArticle = editArticle;
    }

    public void supprimerArticle() {

    }

    /**
     * methode pour modifier un article quelconque
     */
    public void modifierArticle() {

        editArticleDescription = editArticle.getDescription();
        editArticleNom = editArticle.getNom();
        editArticlePrix = editArticle.getPrix();
    }
}

and this is my modal html code:

<div class="modal" id="userEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">
                        Modifier le produit
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">
                            &#215;
                        </span>
                    </button>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <label for="edit_product_name" class="form-control-label">
                            Nom:
                        </label>
                        <h:inputText type="text" class="form-control" id="edit_product_name" 
                        value="#{listeArticlesAction.editArticleNom}" autocomplete="off" />
                    </div>
                    <div class="form-group">
                        <label for="edit_product_description" class="form-control-label">
                            Description:
                        </label>
                        <h:inputTextarea class="form-control" id="edit_product_description"
                        value="#{listeArticlesAction.editArticleDescription}" autocomplete="off" />
                    </div>
                    <div class="form-group">
                        <label for="edit_product_price" class="form-control-label">
                            Prix(DH):
                        </label>
                        <h:inputText type="text" class="form-control m-input" id="edit_product_price"
                        value="#{listeArticlesAction.editArticlePrix}" autocomplete="off" />
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Annuler
                    </button>
                    <button type="button" class="btn btn-primary">
                        Modifier
                    </button>
                </div>
            </div>
        </div>
    </div>

Answer 1

Most likely you're updating the wrong part of the screen. That happens to many people using modals for the first time. Thing is, the modal is rendered when the page is loaded. That's potentially a minute before the button is clicked. So the modal doesn't know which data to display. You tell it using the update attribute of the command button.

As far as I can see, the datatable and the Java bean are OK. With the exception of the update region. Your code snippets don't show where the <h:form> or <b:form> tag is, so it's almost certainly outside the datatable. However, what you should update is the content of the modal. Don't update the entire modal (because that renders it hidden again). Just the content. Something like update="@(.modal-dialog)".

The modal itself looks a bit odd to me. What is listeArticlesAction? Judging from the other code snippets, you want to use listeArticlesAction.editArticle instead.

Side remark: I suggest you choose a language for the variable names (and stuff like this) and use it consistently. French is a good choice, although most developers (except me) recommend English. But it's hard enough to remember the variable name. You don't have to add the burden of remembering the language :).