Soumettre jQuery UI dialog sur

j'ai résumé les réponses ci-dessus et ajouté des choses importantes

$(document).delegate('.ui-dialog', 'keyup', function(e) {
        var target = e.target;
        var tagName = target.tagName.toLowerCase();

        tagName = (tagName === 'input' && target.type === 'button') 
          ? 'button' 
          : tagName;

        isClickableTag = tagName !== 'textarea' && 
          tagName !== 'select' && 
          tagName !== 'button';

        if (e.which === $.ui.keyCode.ENTER && isClickableTag) {
            $(this).find('.ui-dialog-buttonset button').eq(0).trigger('click');

            return false;
        }
    });

avantages:

1. désactiver entrer la touche sur les éléments non compatibles comme textarea , select , button ou entrées avec le bouton de type, imaginez utilisateur en cliquant entrer sur textarea et obtenir le formulaire soumis au lieu d'obtenir la nouvelle ligne!
2. la reliure est faite une fois, éviter d'utiliser le boîte de dialogue' open ' callback pour lier la touche enter pour éviter de lier la même fonction encore et encore à chaque fois que la boîte de dialogue est 'open'ed' 1519190920"
3. éviter de changer le code existant comme certaines réponses ci-dessus suggèrent
4. utiliser 'delegate' au lieu de 'live' déprécié et éviter d'utiliser la nouvelle méthode ' on 'pour permettre de travailler avec des versions plus anciennes de jquery
5. parce que nous utilisons delegate , cela signifie que le code ci-dessus peut être écrit avant même d'initialiser dialog. vous pouvez également le mettre dans l'étiquette de tête même sans $(document).ready
6. aussi le délégué ne liera qu'un handler à document et ne liera pas handler à chaque dialogue comme dans un code ci-dessus, pour plus d'efficacité
7. fonctionne même avec des dialogues générés dynamiquement comme $('<div><input type="text"/></div>').dialog({buttons: .});
8. a travaillé avec ie 7/8/9!
9. éviter d'utiliser le sélecteur lent :first
10. éviter d'utiliser des dans les réponses ici pour faire un bouton de soumission caché

inconvénients:

1. lancer le premier bouton comme le bouton par défaut , vous pouvez choisir un autre bouton avec eq() ou appeler une fonction à l'intérieur de l'instruction if
2. tous les dialogues auront le même comportement vous pouvez le filtrer en rendant votre sélecteur plus spécifique ie '# dialog' au lieu de '.ui-dialog'

je sais que la question est vieux, mais j'ai eu le même besoin, donc, j'ai partagé la solution que j'ai utilisé.

$('#dialogBox').dialog('open');
$('.ui-dialog-buttonpane > button:last').focus();

il fonctionne à merveille avec la dernière version de jQuery UI (1.8.1). Vous pouvez aussi utiliser :first au lieu de :last en fonction du bouton que vous voulez définir par défaut.

cette solution, comparée à celle sélectionnée ci-dessus, a l'avantage de montrer quel bouton est celui par défaut pour l'utilisateur. L'utilisateur peut également tabuler entre les boutons et en appuyant sur Entrée cliquera sur le bouton actuellement sous la mise au point.

santé.

une façon rudimentaire mais efficace de rendre ce travail plus général:

$.fn.dlg = function(options) {
    return this.each(function() {
             $(this).dialog(options);
             $(this).keyup(function(e){
                  if (e.keyCode == 13) {                
                       $('.ui-dialog').find('button:first').trigger('click');
                  }
             });
    });
}

alors quand vous créez un nouveau dialogue vous pouvez le faire:

$('#a-dialog').mydlg({...options...})

et utilisez-le comme un dialogue jquery normal par la suite:

$('#a-dialog').dialog('close')

il y a des moyens d'améliorer cela pour le faire fonctionner dans des cas plus spéciaux. Avec le code ci-dessus, il sélectionnera automatiquement le premier bouton dans la boîte de dialogue lorsque le bouton pour déclencher quand enter est frappé. Aussi, il suppose qu'il y a un dialogue active à un moment donné, ce qui peut ne pas être le cas. Mais vous obtenez l'idée.

Note: Comme mentionné ci-dessus, le bouton qui est appuyé sur enter dépend de votre configuration. Ainsi, dans certains cas, vous pouvez utiliser la :premier sélecteur .trouver la méthode et dans d'autres vous pouvez utiliser le :dernier sélecteur.

plutôt que d'écouter les codes clés comme dans cette réponse (que je n'ai pas pu obtenir pour travailler) vous pouvez vous lier à l'événement soumettre du formulaire dans la boîte de dialogue et puis faire ceci:

$("#my_form").parents('.ui-dialog').first().find('.ui-button').first().click();

donc, tout ressemblerait à ceci

$("#my_form").dialog({
  open: function(){
    //Clear out any old bindings
    $("#my_form").unbind('submit');
    $("#my_form").submit(function(){
      //simulate click on create button
      $("#my_form").parents('.ui-dialog').first().find('.ui-button').first().click();
      return false;
    });
  },
  buttons: {
    'Create': function() {
      //Do something
    },
    'Cancel': function() {
      $(this).dialog('close');
    }
  }
});

notez que différents navigateurs traitent différemment la touche enter, et que certains ne font pas toujours un submit on enter.

Ben Clayton est le plus élégant et le plus court et il peut être placé en haut de votre page d'index avant que n'importe quel dialogue jquery ait été initialisé. Cependant, je tiens à souligner que ".vivre" a été désapprouvée. L'action préférée est maintenant".sur." Si vous voulez ".sur" de fonctionner ".live", vous devrez utiliser des événements délégués pour attacher le gestionnaire d'événements. Aussi, quelques autres choses...

1. je préfère utiliser l'ui.mot de code.Entrer la méthode d'essai pour l'entrée clé puisque vous n'avez pas à mémoriser la clé du code.

2. à l'Aide "$('.le bouton ui-dialog-buttonpane: first', $(this))" pour le cliquez sur selector rend l'ensemble de la méthode générique.

3. vous voulez ajouter" return false; " pour prévenir la défaillance et arrêter propagation.

dans ce cas...

$('body').on('keypress', '.ui-dialog', function(event) { 
    if (event.keyCode === $.ui.keyCode.ENTER) { 
        $('.ui-dialog-buttonpane button:first', $(this)).click();
        return false;
    }
});

Je ne sais pas si c'est plus simple, mais d'habitude vous localisez quel bouton A la mise au point actuelle. Si la mise au point est changée en un contrôle différent, alors le "bouton de mise au point" resterait sur le bouton qui avait la mise au point en dernier. Normalement, le bouton "focus" sur votre bouton par défaut. Tabbing à un bouton différent changerait le "button focus". Vous devez décider si le fait de naviguer vers un élément de forme différent permet de réinitialiser le "bouton focus" vers le bouton par défaut. Vous aurez également probablement besoin d'un indicateur visuel autre que le navigateur par défaut pour indiquer le bouton focalisé comme il perd la mise au point réelle dans la fenêtre.

une fois que vous avez désactivé et implémenté la logique du bouton focus, je voudrais probablement ajouter un gestionnaire de touches à la boîte de dialogue elle-même et lui faire invoquer l'action associée au bouton actuellement" focalisé".

EDIT : je fais l'hypothèse que vous voulez pouvoir frapper enter chaque fois que vous remplissez les éléments de formulaire et d'avoir le "courant" bouton d'action prioritaire. Si vous ne voulez ce comportement que lorsque le bouton est réellement concentré, ma réponse est trop compliquée.

j'ai trouvé cette solution, il fonctionne sur IE8, Chrome 23.0 et Firefox 16.0

C'est basé sur le commentaire de Robert Schmidt.

$("#id_dialog").dialog({
    buttons: [{
        text: "Accept",
        click: function() {
            // My function
        },
        id: 'dialog_accept_button'
    }]
}).keyup(function(e) {
    if (e.keyCode == $.ui.keyCode.ENTER)
        $('#dialog_accept_button').click();
});

j'espère que ça aidera n'importe qui.

parfois nous oublions le fondamental de ce que le navigateur prend déjà en charge:

<input type="submit" style="visibility:hidden" />

cela fera que la touche entre pour soumettre le formulaire.

Je l'ai fait... ;) J'espère qu'il sera utile pour quelqu'un..

$(window).keypress(function(e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        $(".ui-dialog:visible").find('.ui-dialog-buttonpane').find('button:first').click();
        return false;
    }
});

cela devrait fonctionner pour déclencher le clic du gestionnaire de clic du bouton. cet exemple suppose que vous avez déjà configuré le formulaire dans la boîte de dialogue pour utiliser le jquery.valider plugin. mais pourrait être facilement adapté.

open: function(e,ui) {
    $(this).keyup(function(e) {
        if (e.keyCode == 13) {
           $('.ui-dialog-buttonpane button:last').trigger('click');
        }
    });
},
buttons: {
    "Submit Form" : function() {
            var isValid = $('#yourFormsID').valid();
            // if valid do ajax call
            if(isValid){
               //do  your ajax call here. with serialize form or something...

            }
}

je me rends compte qu'il y a déjà beaucoup de réponses, mais je pense naturellement que ma solution est la plus claire, et peut-être la plus courte. Il a l'avantage de fonctionner sur n'importe quel dialogue créé à n'importe quel moment dans le futur.

$(".ui-dialog").live("keyup", function(e) {
    if (e.keyCode === 13) {
        $('.ok-button', $(this) ).first().click();
    }
});

fait et fait

  $('#login input').keyup(function(e) {
      if (e.keyCode == 13) {
          $('#login form').submit();
      }
   }

si vous connaissez le sélecteur de boutons:

$('#dialogBox').dialog('open');
$('#okButton').focus();

Devrait faire l'affaire pour vous. Cela va focaliser le bouton ok, et entrer va 'cliquer', comme vous vous y attendez. C'est la même technique utilisée dans les dialogues D'UI natifs.

   $("#LogOn").dialog({
       modal: true,
       autoOpen: false,
       title: 'Please Log On',
       width: 370,
       height: 260,
       buttons: { "Log On": function () { alert('Hello world'); } },
       open: function() { $(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();}
   });

j'ai trouvé une solution très simple pour ce problème:

var d = $('<div title="My dialog form"><input /></div>').dialog(
    buttons: [{
        text: "Ok",
        click: function(){
            // do something
            alert('it works');
        },
        className: 'dialog_default_button'
    }]
});

$(d).find('input').keypress(function(e){
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        e.preventDefault();
        $('.dialog_default_button').click();
    }
});

$('#DialogID').dialog("option", "buttons")["TheButton"].apply()

cela a bien fonctionné pour moi..

voici ce que j'ai fait:

myForm.dialog({
  "ok": function(){
    ...blah...
  }
  Cancel: function(){
    ...blah...
  }
}).keyup(function(e){
  if( e.keyCode == 13 ){
   $(this).parent().find('button:nth-child(1)').trigger("click");
  }
});

dans ce cas, myForm est un objet jQuery contenant le html du formulaire (notez qu'il n'y a pas de balises" form " là-dedans... si vous les mettez dans l'écran entier se rafraîchira lorsque vous appuyez sur "Entrée").

Chaque fois que l'utilisateur appuie sur "entrer" dans la forme, ce sera l'équivalent de cliquer sur le bouton "ok".

cela évite également la question de faire ouvrir le formulaire par le " ok" bouton déjà surligné. Alors que ce serait bien pour les formulaires sans champs, si vous avez besoin de l'utilisateur pour remplir des trucs, alors vous voulez probablement que le premier champ soit surligné.

aucune de ces solutions ne semblait fonctionner pour moi dans IE9. J'ai fini avec ça..

$('#my-dialog').dialog({
    ...
    open: function () {
        $(this).parent()
               .find("button:eq(0)")
               .focus()
               .keyup(function (e) {
                   if (e.keyCode == $.ui.keyCode.ENTER) {
                       $(this).trigger("click");
                   };
               });
    }
});

ci-dessous corps est utilisé parce que dialog DIV ajouté sur le corps,donc le corps écoute Maintenant l'événement clavier. Il a été testé sur IE8, 9, 10, Mojila, Chrome.

open: function() {
$('body').keypress(function (e) { 
     if (e.keyCode == 13) {   
     $(this).parent().find(".ui-dialog-buttonpane button:eq(0)").trigger("click");
     return false; 
     }
  }); 
}

parce que je n'ai pas assez de réputation pour poster des commentaires.

$(document).delegate('.ui-dialog', 'keyup', function(e) {
  var tagName = e.target.tagName.toLowerCase();

  tagName = (tagName === 'input' && e.target.type === 'button') ? 'button' : tagName;

  if (e.which === $.ui.keyCode.ENTER && tagName !== 'textarea' && tagName !== 'select' && tagName !== 'button') {
      $(this).find('.ui-dialog-buttonset button').eq(0).trigger('click');
    return false;
  } else if (e.which === $.ui.keyCode.ESCAPE) {
      $(this).close();
  }
});

Modifié réponse par Basemm #35 trop ajouter dans Escape pour fermer la boîte de dialogue.

donnez vos boutons classes et sélectionnez-les de la manière habituelle:

$('#DialogTag').dialog({
  closeOnEscape: true,
  buttons: [
    {
      text: 'Cancel',
      class: 'myCancelButton',
      click: function() {
        // Close dialog fct
      }
    },
    {
      text: 'Ok',
      class: 'myOKButton',
      click: function() {
        // OK fct
      }
    }
  ],
  open: function() {

    $(document).keyup(function(event) {

      if (event.keyCode === 13) {
        $('.myOKButton').click();
      }

    });

  }
});

ça marche très bien merci!!!

open: function () { debugger; $("#dialogDiv").keypress(function (e) { if (e.keyCode == 13) { $(this).parent().find("#btnLoginSubmit").trigger("click"); } }); },