时间戳

首页 > 解决方案 > JSF 无法将数据传递给 bootsrtap 模式

jsf - JSF 无法将数据传递给 bootsrtap 模式

问题描述

大家好，我有一个 bootsfaces dataTabble，每一行都有一个编辑结束删除操作，我想显示一个包含选定行数据的模式来编辑该对象。

我成功地获得了选定的行，我将数据传递给managedBean，我将数据分配给managedProperties，但模态输入元素中没有显示任何内容。

这是我的dataTable代码：

<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>

这是我的managedBean课：

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();
    }
}

这是我的模态html代码：

<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>

标签： jsfjsf-2.2bootsfaces

解决方案

很可能您正在更新屏幕的错误部分。这发生在许多第一次使用模态的人身上。事情是，模式是在页面加载时呈现的。这可能是单击按钮之前的一分钟。所以模态不知道要显示哪些数据。update您使用命令按钮的属性告诉它。

据我所见，数据表和 Java bean 都可以。地区除外update。您的代码片段没有显示<h:form>or<b:form>标记的位置，因此几乎可以肯定它在数据表之外。但是，您应该更新的是模态框的内容。不要更新整个模态（因为这会使它再次隐藏）。只是内容。类似的东西update="@(.modal-dialog)"。

模态本身对我来说看起来有点奇怪。是什么listeArticlesAction？从其他代码片段来看，您想listeArticlesAction.editArticle改用。

旁注：我建议您为变量名称（以及类似的东西）选择一种语言并始终如一地使用它。法语是一个不错的选择，尽管大多数开发人员（除了我）推荐英语。但是记住变量名已经够难的了。您不必增加记住语言的负担:)。

推荐阅读