数据表不会在primefaces中使用ajax更新

时间:2013-03-12 11:57:28

标签: ajax jsf-2 primefaces datatable

在下面的页面中,即使我将其id放在update属性中并且我没有任何错误,也不会通过对话框更新数据表:

<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:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
    <ui:composition template="/template/layout.xhtml">
        <ui:define name="contenu">
            <p:growl id="messages" showDetail="true" />

            <h:form>
                <p:commandButton value="Ajouter Type" id="ajax" onclick="dlg.show()" />

                <p:dialog id="dialog" header="Nouveau Type" widgetVar="dlg">
                    <h:panelGrid columns="2" cellpadding="5">
                        <h:outputLabel for="libelle" value="Libelle :" />
                        <p:inputText value="#{typeMB.newtype.libelle}" id="libelle" required="true" label="libelle" />

                        <h:outputLabel for="commission" value="commission :" />
                        <h:inputText value="#{typeMB.newtype.commission}" id="commission" required="true" label="commission" />

                        <f:facet name="footer">
                            <p:commandButton id="ajouterBoutton" value="Ajouter" update="growl,:form:ourdatatable" actionListener="#{typeMB.ajouter}"
                                oncomplete="handleLoginRequest(xhr, status, args)" />
                        </f:facet>

                        <p:growl style="z-index=100" id="growl" showDetail="true" life="3000" />
                    </h:panelGrid>
                </p:dialog>

                <script type="text/javascript">  
                    function handleLoginRequest(xhr, status, args) {  
                        if(args.validationFailed || !args.loggedIn) {  
                            jQuery('#dialog').effect("shake", { times:3 }, 100);  
                        } else {  
                            dlg.hide();   
                        }  
                    }  
                </script>
            </h:form>

            <h:form id="form">
                <p:dataTable var="car" id="ourdatatable" value="#{typeMB.list_types}" editable="true">
                    <p:ajax event="rowEdit" listener="#{typeMB.onEdit}" update=":messages" />
                    <p:ajax event="rowEditCancel" listener="#{typeMB.onCancel}" update=":messages" />

                    <p:column headerText="Numero" style="width:30%">
                        <h:outputText value="#{car.idtype}" />
                    </p:column>

                    <p:column headerText="Libellé" style="width:20%">
                        <p:cellEditor>
                            <f:facet name="output">
                                <h:outputText value="#{car.libelle}" />
                            </f:facet>
                            <f:facet name="input">
                                <p:inputText value="#{car.libelle}" style="width:100%" label="Libellé" />
                            </f:facet>
                        </p:cellEditor>
                    </p:column>

                    <p:column headerText="Commission" style="width:24%">
                        <p:cellEditor>
                            <f:facet name="output">
                                <h:outputText value="#{car.commission}" />
                            </f:facet>
                            <f:facet name="input">
                                <p:inputText value="#{car.commission}" style="width:100%" label="Commission" />
                            </f:facet>
                        </p:cellEditor>
                    </p:column>


                    <p:column style="width:6%">
                        <p:rowEditor />
                    </p:column>

                    <p:column>
                        <p:commandLink value="Supprimer" process="@this" update=":confirmDialog" oncomplete="confirmation.show()">
                            <f:setPropertyActionListener value="#{car}" target="#{typeMB.selectedType}" />
                        </p:commandLink>
                    </p:column>
                </p:dataTable>
            </h:form>

            <p:confirmDialog id="confirmDialog" message="Etes vous sur de vouloir supprimer ce Type #{typeMB.selectedType.libelle}"
                header="confirmation de suppression" severity="alert" widgetVar="confirmation">
                <h:form>
                    <p:commandButton id="confirm" value="oui" update=":form:ourdatatable" oncomplete="confirmation.hide()" actionListener="#{typeMB.supprimer}" />
                    <p:commandButton id="decline" value="non" onclick="confirmation.hide()" type="button" />
                </h:form>
            </p:confirmDialog>
        </ui:define>
    </ui:composition>
</h:body>
</html>

仅在刷新页面时更新数据表 我只用了一个h:表单来测试整个页面,但是这会导致我添加和更新功能的问题

编辑:

这是我的布局(我认为这不是问题的src):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html">
    <h:head>
        <meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>Intégration de la Bootstrap et Primefaces</title>

        <h:outputStylesheet library="css" name="css/bootstrap.css" />
        <h:outputStylesheet library="css" name="bootstrap.css" />



        <h:outputStylesheet library="css" name="css/bootstrap-responsive.css" />

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
                  <h:outputScript library="js" name="js/html5shiv.js" />
                <![endif]-->

        <link rel="shortcut icon" href="ico/favicon.png" />
    </h:head>

    <h:body>

        <ui:include src="menu_haut.xhtml" />

        <div class="container-fluid">
            <div class="row-fluid">

                <ui:include src="menu_gauche.xhtml" />

                <div class="span9">
                    <div class="bs-docs-example">
                        <ui:insert name="contenu">
                                contenu par défaut!
                            </ui:insert>
                    </div>

                </div>
                <!--/span-->
            </div>
            <!--/row-->

            <ui:include src="footer.xhtml" />

        </div>


    </h:body>
</f:view>
</html>

1 个答案:

答案 0 :(得分:0)

而不是 update =“:form:ourdatatable”使用 update =“:#{p:component('ourdatatable')}” 此帮助程序组件搜索dom以解析参数中使用的标识符的任何名称空间限定。