Yui pulsanti e azione spedizione presentare

Question

Sto usando YUI 2.7.0 e Struts per il mio progetto e hanno un modulo con due bottoni di invio. Uno è per Save e l'altra è per Elimina. La forma sottopone ad un DispatchAction. Ho aggiunto gli ascoltatori onclick con successo, ma il problema è che la forma sottopone prima che gli ascoltatori esecuzione. Ho bisogno di impostare il parametro spedizione prima che il modulo invia. Come faccio a fare questo? Qui di seguito è quello che ho finora:

<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

Il problema è il codice di Yahoo per il widget pulsante gestisce l'evento click, e in essa, si programatically inviare il modulo. La loro gestore di eventi viene chiamato prima il vostro, in modo che il modulo viene inviato prima che il gestore di eventi anche viene chiamato.

Ecco alcune idee (che tutti i lavori):

METODO 1

Gestire l'evento MouseDown anziché l'evento click (incendi mousedown prima di cliccare).

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); 

METODO 2

Usa type = collegamento anziché di tipo = presentare (default). Essi inviare solo la forma se il tipo = submit (non ho ancora testato questo sufficiente per vedere se il modulo presenta ancora da solo - potrebbe essere necessario chiamare manualmente form.submit ())

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

METODO 3

Guardando il loro codice, ho notato che creano un campo nascosto con il nome del pulsante che è stato cliccato per inviare il modulo (SOLO quel tasto). Il tag input deve avere un attributo name, e il vostro non, in modo da dovrebbe aggiungere uno. Poi sul server, basta controllare per il valore di quel campo nascosto (l'attributo value).

Non importa quale di questi metodi che si utilizzano, si dovrebbe utilizzare questo per fermare il form di presentare:

YAHOO.util.Event.preventDefault(e); 

Answer 2

Questa è una soluzione facile

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

è possibile rimuovere l'ingresso nascosto

e la variabile richiesta di spedizione sarà impostato su "Salva User" se il primo pulsante viene cliccato

o "Elimina Utente" è il 2 ° si fa clic

Answer 3

Questa domanda è diversi anni, ma ho ancora un progetto utilizzando YUI 2.9.0 e ho appena incontrato lo stesso problema, quindi io condividere la mia soluzione nel caso in cui qualcun altro si trovi nella stessa marmellata.

Molte cose degne di nota a questa domanda. In primo luogo, il problema Gabriel descrive, in cui il pulsante di scatto gestore YUI 2.9.0 invia il modulo prima della gestore di clic viene chiamato non è un problema su IE, almeno fino IE9. Su Firefox attraverso almeno FF12, il problema si verifica. Ho il sospetto che sarebbe anche un problema in Chrome, Safari, e la maggior parte se non tutti gli altri browser e vedo quello che sembra essere un caso speciale per IE nel gestore pulsante YUI clic.

Inoltre, non mi piaceva una delle soluzioni Gabriel suggerite. Utilizzo di un pulsante di collegamento invalidato tutte le styling personalizzato che avevo applicato al mio pulsante di invio, utilizzando il gestore MouseDown perde un po 'della semantica di interfaccia utente di un clic, e per qualche pulsante ragione YUI stava perdendo traccia del nome originale ho dato il pulsante di invio o, almeno, non è stato rivelando nei valori postato sul lato server. Nello spirito di pulsante di collegamento di Gabriel, però, ho sostituito il pulsante di invio di un pulsante di ingresso che non si sottomette per impostazione predefinita, poi ha aggiunto un ingresso nascosto e inviato il modulo stesso:

...

<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}});

...

Infine, dal momento che YUI sottopone il modulo a scatto, l'ennesima soluzione deve essere solo per la cattura del form pubblica un evento e verificare se l'obiettivo dell'evento è il pulsante, fai quello che devi fare, poi lasciare che il presentare andare o arrestare essa, se necessario.