$(document).ready(function(){           // lorsque le document est prêt
                $('#fire_dialog').click(function(){ // on enregistre un gestionnaire d'événement au clic sur le lien d'id fire_dialog .click / submit pour le lien
                    $('#my_dialog').dialog({        // on transforme la div #my_dialog en boîte de dialogue
                        buttons: {                  // description des boutons de la boîte
                            'OK': function(){
                                $(this).dialog('close');                // au clic sur le bouton 'OK', on ferme la boîte
                                //alert('Merci d\'avoir cliqué sur OK');  // et on affiche un message
                            },
                            'Annuler': function(){
                                $(this).dialog('close');                // au clic sur le bouton 'Annuler', on ferme la boîte
                                //alert('Merci d\'avoir cliqué sur Annuler'); // et on affiche un message
                            }
                        },
                        title: 'Vitrine Cisco by eBCom',              // titre de la boîte
                        width: 700,                                     // largeur de la boîte                     
			modal: true                                   // la boîte est modale (l'interaction avec le reste du document est impossible)
                    });
                });

                $('#fire_ajax_dialog').click(function(){        // on enregistre un gestionnaire d'événement au clic sur le lien d'id fire_ajax_dialog
                    $.ajax({                                    // on effectue une requête ajax
                        type: 'POST',                           // selon la méthode POST
                        url: 'get_dialog.php',                  // au script "get_dialog.php"
                        data: 'message=' + $('#message').val(), // on transmet au serveur le contenu de la boîte de text d'id message
                        dataType: 'json',                       // on s'attend à recevoir du serveur un objet JSON
                        success: function(answer) {            // lorsque la réponse du serveur est retournée, on récupère l'objet réponse dans la variable answer et...
                            $('body').append(answer.content);   // on ajoute answer.content au corps du document. C'est une div qui sera le contenu de notre boîte de dialogue
                            $(answer.id).dialog({               // answer.id est l'id d'une div à transformer en boîte de dialogue
                                buttons: {                      // on décrit les boutons de la boîte...
                                    'OK': function(){
                                        $(this).dialog('close');
                                       // alert('Merci d\'avoir cliqué sur OK');
                                    },
                                    'Annuler': function(){
                                        $(this).dialog('close');
                                        //alert('Merci d\'avoir cliqué sur Annuler');
                                    }
                                },
                                title: 'Boîte de dialogue Ajax', // titre de la boîte
                                width: 400,                      // largeur de la boîte
                                modal: false,                    // la boîte n'est pas modale -- on peut interagir avec le reste du document (qui va lamentablement faire n'importe quoi lorsqu'on cliquera à nouveau sur le lien ajax
                                open: function(){               // à l'ouverture de la boîte, on affiche un message
                                    alert('du contenu a été ajouté dynamiquement dans une div '+ answer.id +' et a été habillé en boîte de dialogue');
                                },
                                close: function(){              // à la fermeture de la boîte, on affiche un message
                                    alert('à la fermeture, la div '+ answer.id +' est supprimée du document pour ne pas le surcharger');
                                    $(answer.id).remove();      // et on retire la div ajoutée par $.ajax du document
                                }
                            });
                        }
                    });
                });
            });