Comment définir le focus après une mise à jour de zone dans Tapestry5

Question

J'ai une zone qui contient un formulaire qui contient une boucle. Lorsque quelqu'un modifie un champ de texte dans la boucle, le formulaire entier et la boucle sont mis à jour lors de l'événement onKeyUp.

J'essaie de trouver un moyen d'indiquer à Tapestry de renvoyer le focus sur le champ de texte qui a été mis à jour en dernier. Je pense que cela fonctionne, mais la mise à jour de la zone semble faire perdre le focus au champ de texte immédiatement après que le focus ait été défini. Je peux mettre l'accent sur un champ situé en dehors de la zone sans problème, il semble donc que ce soit la mise à jour de la zone qui soit à l'origine du problème.

Avez-vous des suggestions sur la façon de gérer cette situation ?

Answer 1

On dirait que vous devez régler la mise au point après que la zone ait fini de se recharger. Lorsque j'ai besoin d'effectuer une tâche de ce type, je configure un observateur qui écoute l'événement Tapestry zone-updated en Javascript :

$('formZone').observe(Tapestry.ZONE_UPDATED_EVENT, function(event) {
    // set the focus
});   

J'espère que cela vous aidera.

Answer 2

Le site Formulaire Le composant a un autofocus qui est vrai par défaut, ce qui entraîne le rendu d'un peu de JavaScript avec le formulaire. Le JavaScript met l'accent sur le premier élément du formulaire après le chargement de ce dernier.

Réglage de autofocus à false désactive ce comportement :

<form t:type="Form" t:autofocus="false">

Answer 3

Je sais que c'est un vieux fil, mais ce que j'ai fait c'est :

Utilisation de Jquery :

<t:zone t:id="formZone">
<t:form .... class="formId" t:zone="formZone>
.
.
</t:form>

jQuery.noConflict();
(function($) { 
  $(document).ready(function() {
      $(".formId").find("input, select").filter(function(){
          if($(this).val() == ""){           
             return true;
          }
        }).first().focus();

  });
})(jQuery);

</t:zone>

Cela permettra de mettre l'accent sur la première entrée ou sélection vide. Bien sûr, vous devez inclure jquery dans votre page. noConflict vous assure que vous n'aurez pas de problèmes avec le prototype.