Yui boutons d'envoi et l'action d'expédition

Question

J'utilise YUI et Struts pour 2.7.0 mon projet et un formulaire avec deux boutons de soumission. L'un est pour Save et l'autre est pour Supprimer. La forme se soumet à un DispatchAction. J'ai ajouté les auditeurs onclick avec succès, mais le problème est que la forme présente avant que les auditeurs exécutent. Je dois régler le paramètre d'envoi avant que le formulaire présente. Comment puis-je faire cela? Voici ce que j'ai jusqu'à présent:

<form name="adminUserForm" method="post" action="manage_user.do">
  <input type="hidden" id="dispatch" name="dispatch" value="unspecified"/>
  <!-- other form fields here -->
  <input type="submit" value="Save User" id="saveUser">
  <input type="submit" value="Delete User" id="deleteUser">
</form>
<script type="text/javascript"> 
  function confirmDelete(msg)
  {
    if (confirm(msg))
    {
      return setDispatchMethod("delete");
    }
    else
      return false;
  }
  function setDispatchMethod(methodName)
  {
    dispatchField = document.getElementById("dispatch");
    dispatchField.value = methodName
    return true;
  }
  var onClickSaveUser = function (e)
  {
    return setDispatchMethod('save');
  };
  var onClickDeleteUser = function (e)
  {
    return confirmDelete('Are you sure you want to delete the user?');
  };
  new YAHOO.widget.Button("deleteUser",   {onclick: {fn: onClickDeleteUser }});
  new YAHOO.widget.Button("saveUser",     {onclick: {fn: onClickSaveUser   }});
</script>

Answer 1

Le problème est le code de Yahoo pour le widget Button gère l'événement clic, et, ils soumettent programatically la forme. Leur gestionnaire d'événements est appelé avant le vôtre, si le formulaire est soumis avant que votre gestionnaire d'événements se même appelé.

Voici quelques idées (ils travaillent tous):

MÉTHODE 1

Gérer l'événement mousedown au lieu de l'événement click (feux mousedown avant le clic).

var deleteUserButton = new YAHOO.widget.Button("deleteUser");
deleteUserButton.on("mousedown", onClickDeleteUser);

var deleteUserButton = new YAHOO.widget.Button("saveUser");
deleteUserButton.on("mousedown", onClickSaveUser);

//Using this, you can easily stop the form from submitting
//by using YAHOO's event utility (by adding this code, you
//will prevent the click event from firing as well).

YAHOO.util.Event.preventDefault(e); 

MÉTHODE 2

Utilisez le type = lien au lieu de type = soumettre (par défaut). Ils soutiennent que le formulaire si le type = soumettre (je ne l'ai pas testé ce suffisant pour voir si la forme présente toujours par lui-même - vous devrez peut-être appeler manuellement form.submit ())

new YAHOO.widget.Button("deleteUser", { type: 'link', onclick: { fn: onClickDeleteUser} });
new YAHOO.widget.Button("saveUser", { type: 'link', onclick: { fn: onClickSaveUser} });

Méthode 3

En regardant leur code, j'ai remarqué qu'ils créent un champ caché avec le nom du bouton qui a été cliqué pour soumettre le formulaire (UNIQUEMENT ce bouton). La balise d'entrée doit avoir un attribut name, et le vôtre ne vous serait donc avoir à ajouter un. Ensuite, sur le serveur, vous vérifiez juste pour que la valeur du champ caché (votre attribut de valeur).

Peu importe laquelle de ces méthodes que vous utilisez, vous devez utiliser ce formulaire pour arrêter la présentation de:

YAHOO.util.Event.preventDefault(e); 

Answer 2

ici est une solution facile

<form>
    <input type="submit" name='dispatch' value="Save User" id="saveUser">
    <input type="submit" name='dispatch' value="Delete User" id="deleteUser">
</form>

vous pouvez supprimer l'entrée cachée

et votre variable de demande d'envoi sera réglé sur « Save User » si le premier bouton est cliqué

ou « Supprimer l'utilisateur » est le 2ème est cliqué

Answer 3

Cette question est de plusieurs années, mais j'ai encore un projet en utilisant YUI 2.9.0 et je viens de croiser la même question, donc je vais partager ma solution dans le cas où quelqu'un d'autre se trouve dans la même confiture.

Plusieurs choses à noter à propos de cette question. Tout d'abord, le problème décrit Gabriel, où le YUI 2.9.0 gestionnaire de clic bouton soumet le formulaire avant votre gestionnaire de clic est appelé est pas un problème sur IE, au moins par IE9. Sur FireFox par au moins FF12, le problème se produit. Je soupçonne que ce serait également un problème dans Chrome, Safari, et la plupart, sinon tous les autres navigateurs, ainsi que je vois ce qui semble être un cas particulier pour IE dans le gestionnaire de clic de bouton YUI.

En outre, je n'ai pas aimé aucune des solutions proposées Gabriel. L'utilisation d'un bouton de lien invalidée tout le style personnalisé que j'avais demandé à mon bouton soumettre, en utilisant le gestionnaire mousedown perd une partie de la sémantique de l'interface utilisateur d'un clic, et appuyer sur un bouton de YUI raison est en train de perdre la trace du nom original que j'ai donné le bouton Envoyer ou, au moins, il ne montrait pas dans les valeurs affichées sur le côté serveur. Dans l'esprit du bouton de lien de Gabriel, cependant, j'ai remplacé le bouton Envoyer à un bouton d'entrée qui ne se soumet pas par défaut, puis ajouté une entrée cachée et soumis la forme moi-même:

...

<form id='form'>
    <input type="button" value="&gt;" id="start_survey">

...

function start_survey (p_oEvent, p_aArgs) {
    var input = document.createElement ('input');
    input.type = 'hidden';
    input.name = this.get ('name');
    input.value = '&gt;'

    var form = YAHOO.Dom.get ('form');
    form.appendChild (input);
    form.submit();
}

new YAHOO.widget.Button ("start_survey", {onclick: {fn: start_survey}});

...

Enfin, étant donné que YUI soumet le formulaire clic, mais une autre solution devrait être juste pour attraper événement soumettre de formulaire et vérifier si la cible d'événement est votre bouton, faites ce que vous devez faire, alors laissez-le soumettre aller ou arrêter il, au besoin.