Primefaces datatable mise à jour datatable
J'ai un problème avec primefaces datatables. J'ai une datatable avec quelques entrées et d'une colonne avec un bouton à l'intérieur. Si le bouton est appuyé, une popup s'ouvre avec un autre datatable. Les entrées dans la deuxième datatable sont en fonction sur la ligne dans laquelle le bouton est pressé.
<!-- first datatable -->
<h:form id="list">
<p:dataTable id="list1" var="item" value="#{bean1.itemlist}"
rowKey="#{item.id}" selection="#{bean1.selectedItem}"
selectionMode="single">
<p:column headerText="ID">
<h:outputText value="#{item.id}" />
</p:column>
...
<p:column headerText="Edit Entries">
<p:commandButton value="Edit Entries"
actionListener="#{bean2.updateEntries(item)}" ajax="true"
oncomplete="PF('edit_entries').show()" />
</p:column>
</p:dataTable>
<!-- Second datatable in the popup -->
<p:dialog header="Edit Entries" widgetVar="edit_entries" modal="true"
resizable="false">
<p:dataTable id="list2" var="entry"
value="#{bean2.entriesList}" rowKey="#{entry.id}"
selection="#{bean2.selectedEntry}" selectionMode="single">
<p:column headerText="Entry Number">
<h:outputText value="#{entry.number}" />
</p:column>
</p:dataTable>
<f:facet name="footer">
<p:commandButton value="Save" oncomplete="PF('edit_entries').hide()" />
</f:facet>
</p:dialog>
</form>
Bean2
public void updateEntries(Item selectedItem) {
this.entriesList = this.entriesQuery.getAllEntriesByItemID(selectedItem.getId());//db query could take some time
System.out.println("entrieslist size: " + this.entriesList.size()); //prints the correct size
}
Le problème est qu'il n'existe pas de données répertoriées dans le popup datatable bien qu'il y en a dans la liste après la db de la requête.
Toutes les idées sur la façon de corriger ce bug?
Merci à l'avance!
Mise à JOUR 1:
<!-- first datatable -->
<h:form id="list">
<p:dataTable id="list1" var="item" value="#{bean1.itemlist}"
rowKey="#{item.id}" selection="#{bean1.selectedItem}"
selectionMode="single">
<p:column headerText="ID">
<h:outputText value="#{item.id}" />
</p:column>
...
<p:column headerText="Edit Entries">
<p:commandButton value="Edit Entries" update=":dialogUpdateEntries"
actionListener="#{bean2.updateEntries(item)}" ajax="true"
oncomplete="PF('edit_entries').show()" />
</p:column>
</p:dataTable>
</h:form>
<!-- Second datatable in the popup -->
<p:dialog header="Edit Enries" id="dialogUpdateEntries" widgetVar="edit_entries" modal="true"
resizable="false">
<h:form id="formEntriesList">
<p:dataTable id="list2" var="entry"
value="#{bean2.entriesList}" rowKey="#{entry.id}"
selection="#{bean2.selectedEntry}" selectionMode="single">
<p:column headerText="Entry Number">
<h:outputText value="#{entry.number}" />
</p:column>
</p:dataTable>
<f:facet name="footer">
<p:commandButton value="Save" oncomplete="PF('edit_entries').hide()" />
</f:facet>
</form>
</p:dialog>
- Vous n'êtes pas censé changer la question de telle façon que les réponses deviennent incompatibles avec elle.
- désolé, j'ai corrigé
Vous devez vous connecter pour publier un commentaire.
Vous êtes en effet pas la mise à jour de la table de données dans la boîte de dialogue. JSF n'est pas automatiquement mise à jour de la vue sur le changement de modèle, vous devez indiquer explicitement le point de vue de le faire. Vous pouvez utiliser de l'ajax d'action de la composante de
update
attribut pour ce. Cela prend un JSF ID du client qui peut être trouvé par les règles décrites dans cette réponse: Comment trouver l'ID client composant ajax pour mettre à jour/render? Impossible de trouver le composant avec l'expression "foo" référencé à partir de "bar".Donné le balisage comme indiqué dans la question, ça va être
Cependant, il y a un autre problème potentiel. Vous êtes à l'aide de
<p:dialog modal="true">
à l'intérieur de un formulaire au lieu de donner de la boîte de dialogue de sa propre forme. De cette façon, le dialogue peut ne pas être disponible dans le code HTML arborescence du DOM en JavaScript (celui qui est chargé de traiter ajax trucs) pourrait s'attendre à le trouver. Donner de la boîte de dialogue de sa propre forme devrait résoudre cette question. Il va également de fixer le potentiel de futurs problèmes avec l'invocation des actions à partir de l'intérieur de la boîte de dialogue comme traité dans cette question connexe: <p:commandbutton> action ne fonctionne pas à l'intérieur <p:dialogue>.#{bean2.entriesList}
est apparemment vide.@Named
sans portée.@Named
et le haricot a également été inscrite dans lafaces-config.xml
. Maintenant, j'ai juste remplacé le@Named
avec@Managed
et cela a fonctionné. Merci beaucoup!faces-config.xml
ne devrait pas être nécessaire en JSF 2.x. C'est un vestige de JSF 1.x. Vous devriez être en mesure d'utiliser@Named
, vous n'avez qu'à assurez-vous que vous importez le droit de la portée, par exemple@javax.faces.view.ViewScoped
et donc de ne pas@javax.faces.bean.ViewScoped
.Essayez d'ajouter
update="list2"
de Modifier les Entrées bouton de commande (mêmeupdate="@widgetVar(edit_entries)"
devrait fonctionner).Si, en raison de la mise en page et la structure, vous ne pouvez pas cibler la deuxième table de données à l'aide de suggestions ci-dessus, puis ajouter
styleClass="tList2"
à la seconde table, et le mettre à jour avecupdate="@(.tList2)"
sur le bouton modifier.styleClass
?updateEntries()
est appelé? Si non, ajouterprocess="@this"
sur le bouton modifier.