JQuery : gestion des boutons dans une boite de dialogue

Comment personnaliser et gérer des boutons dans une boite de dialogue JQuery ?

Nous partons du principe que cette API a été téléchargée et intégrée dans votre projet.

Voici un exemple de code Javascript pour une boite de dialogue avec deux boutons dont l'un doit être en "grisé" lors de l'affichage :

// mon code HTML
var dataHTML = "....";

$(document).ready(function() {
var $dialog = $('<div></div>').html(dataHTML).dialog( {
dialogClass : 'dialog1',
autoOpen : true,
draggable : true,
title : "<img src='images/mon_image.png' />&nbsp;&nbsp;<span style='position:relative; top: -5px;'>titre de ma boite de dialogue</span>",
width : 'yyypx',
height : 'auto',
buttons : {
"Valider" : function() {
// prise en compte des informations
traitement_valider();

$(this).dialog("close");
},
"Annuler" : function() { 
$(this).dialog("close");
}
},
close : function(ev, ui) {
$(this).remove();
}
});

// par défaut : bouton valider disabled
var button = getDialogButton( '.dialog1', 'Valider' );
if (button)
{
button.attr('disabled', 'disabled' ).addClass( 'ui-state-disabled' );
}

$('#opener').click(function() {
$dialog.dialog('open');
return false;
});
});

"yyy" représente la largeur en pixels de la boite de dialogue.

Nous avons donc le bouton <Valider> qui doit être "grisé" (disabled) lors de l'affichage de notre boite de dialogue et un bouton <Annuler> qui ferme le dialogue.

Si l'utilisateur clique sur le bouton <Valider>, un traitement Javascript est exécuté (dans notre exemple : "traitement_valider()").

Pour pouvoir griser le bouton <Valider> il est conseillé d'inclure une "dialogClass" (qui se nomme dans notre exemple "dialog1").

Cela va faciliter l'accès aux attributs des composants de la boite de dialogue.

Voici le code pour la fonction getDialogButton() :

function getDialogButton( dialog_selector, button_name )
{
  var buttons = $( dialog_selector + ' .ui-dialog-buttonpane button' );
  for ( var i = 0; i < buttons.length; ++i )
  {
     var jButton = $( buttons[i] );
     if ( jButton.text() == button_name )
     {
         return jButton;
     }
  }

  return null;
}

Vous avez bien sûr la possibilité "d'activer" le bouton <Valider> dans votre code HTML (dans notre exemple "dataHTML") en insérant par exemple une fonction activerBouton().

Le cas d'utilisation le plus connu : l'utilisateur doit saisir les informations obligatoires pour que le bouton <Valider> s'active.

Voici le code pour la fonction activerBouton() :

function activerBouton() {

var button = getDialogButton( '.dialog1', 'Valider' );

if (button)

{

button.removeAttr('disabled').removeClass( 'ui-state-disabled' );

}

}