Javascript Girl
  1. Javascript Girl
  3. Obtenez widgetVar avec JavaScript ou cochez / décochez toutes les autres cases PrimeFaces
Intereting Posts
PHP: rendre les fichiers d'un dossier accessibles, uniquement après une connexion réussie Quelle est la façon d'accéder à l'élément IFrame en utilisant la méthode Prototype $ Comment combiner deux objets dans angularjs? Extension locale de Chrome pour définir le fichier de type d'entrée = "fichier" Quelle est la meilleure façon de convertir la date de la chaîne JavaScript au format YYYYMMDD à la date de JavaScript? Comment créer une base de données hors ligne locale Est-il possible de déclencher l'événement onbeforeunload par programme? Comment configurer le contenu HTML dans un iframe $ ('Elems'). Chacun () avec une flèche en gras Qu'est ce que document.domain = document.domain fait? Pont persistant entre un composant React VR et un code de module natif L'effet de survol crée un scintillement JqGrid reload grid Si la condition 'if' est fausse, les instructions ne s'exécutent pas dans Chrome, mais s'exécutent dans Firefox Comment afficher les données du tableau dans l'application Windows 8

Obtenez widgetVar avec JavaScript ou cochez / décochez toutes les autres cases PrimeFaces

J'ai plusieurs cases PrimeFaces sur une page. Si vous cliquez sur la case à cocher principale, toutes les autres cases à cocher doivent être vérifiées / non cochées. Avec les cases HTML simples, ce serait un problème facile. Mais parce que PrimeFaces ne montre pas la case à cocher elle-même, mais une image, le code JavaScript suivant ne fonctionne pas: 

<script type="text/javascript"> $(document).ready(function() { var masterCheckbox = $(".ui-chkbox.master :checkbox"); var slaveCheckboxes = $(".ui-chkbox:not(.master) :checkbox"); updateMaster(); masterCheckbox.change(updateSlaves); slaveCheckboxes.change(updateMaster); function updateMaster() { var allSlavesChecked = true; slaveCheckboxes.each(function() { if (!$(this).is(':checked')) { allSlavesChecked = false; } }); masterCheckbox.attr("checked", allSlavesChecked); } function updateSlaves() { var masterChecked = masterCheckbox.is(":checked"); slaveCheckboxes.each(function() { $(this).attr("checked", masterChecked); }); } }); </script>

Je sais que je pourrais utiliser le widget PrimeFacesVar pour basculer les cases à cocher, mais je ne sais pas comment obtenir les objets de widget PrimeFaces avec JavaScript. Je pense que RichFaces ajoute la propriété du composant à l'élément DOM, mais PrimeFaces ne le fait pas. Quelqu'un connaît-il une solution à ce problème?

Vous étiez correct – si vous créez votre composant comme ceci: 

 <p:selectBooleanCheckbox value="val" widgetVar="myCheckbox"/>

Vous pouvez accéder à la case à cocher simplement en se référant à son widgetVar, en l'occurrence en appelant l'API côté client PrimeFaces pour la marquer comme vérifiée: 

 <script> myCheckbox.check(); </script>

Vous pouvez ensuite lier l'option Onchange de votre case principale à une méthode javascript qui a vérifié ou désactivé l'état de toutes les cases "esclaves" en fonction de l'état de la case à cocher principale (vous suggérera de stocker l'état dans un champ caché).

Notez qu'il peut être plus facile de gérer l'événement ajax "changer" et mettre en œuvre la logique de vérification / déconnexion du côté du serveur. Assurez-vous que vous fournissez tous les identifiants de toutes les cases à cocher esclave dans l'attribut de mise à jour du composant p: ajax: 

 <p:selectBooleanCheckbox id="masterChkBox" ...> <p:ajax event="change" listener="#{yourBean.handleMasterChange}" update="...all slavecheckbox ids..."/> </p:selectBooleanCheckbox>