Fenêtre de dialogue JQuery avec ajax

Un collègue m'a demandé de l'aider pour faire une fenêtre de dialogue pour une application web. Rien de plus simple avec JQueryUI, un simple .dialog() et... "Oui mais le contenu du dialogue doit être une page externe...".   Ah ah, voilà qui semblait compliquer les choses.

Normalement pour faire un dialogue c'est très simple:

   1: <div id="MyDialog">

   2:  <h2>Bravo!</h2>

   3:  <p>Vous avez affiché une boite de dialogue avec succès</p>

   4: </div>

   5: <script type="text/javascript">
   6:  $(document).ready(function(){
   7:   $("#MyDialog").dialog();  
   8:  });
   9:</script>

Maintenant, ajoutons un lien pour faire apparaitre le dialogue sur demande seulement.

   1: <div id="MyDialog">

2: <h2>Bravo!</h2>

   3:  <p>Vous avez affiché une boite de dialogue avec succès</p>

   4: </div>

   5: <a href="#" onclick="ShowMyDialog()">Open the dialog</a>

   6:  

   7: <script type="text/javascript">


   8:  fonction ShowMyDialog(){         
   9:       $("#MyDialog").dialog("open");
  10:  }
  11:</script>

Ensuite comme le contenu doit être chargé dynamiquement modifions le div pour en faire un simple conteneur vide qui recevra le contenu du dialogue.

   1: <a href="#" onclick="ShowMyDialog()">Open as dialog</a>

2: <div id="MyDialog"></div>

   3: <script type="text/javascript">
   2:  $(document).ready(function(){
   3:   $("#MyDialog").dialog({
   4:    title: "Message",
   5:    modal: true,
   6:    autoOpen: false,
   7:    open: function() {
   8:     $("#MyDialog").load("ExternalPage.htm");
   9:    }
  10:   });  
  11:  });
  12:  function ShowMyDialog(){
  13:   $("#MyDialog").dialog("open");
  14:  }
  10:</script>

Avec un override de la fonction open du dialogue j'utilise $.load pour charger une page externe. Et voilà...

Mais on pourrait faire un peu mieux. Si par exemple le fichier externe n'est pas diponible, que ca passe t-il?  $.load permet d'attacher une fonction callback, mais les erreurs ne sont pas gérés. Alors, grace à la fonctionnalité de JQuery j'ai pu chainner $.ajaxError, qui permet comme sont nom l'indique de géré les erreurs ajax.

   1: <a href="#" onclick="ShowMyDialog()">Open as dialog</a>

   2: <div id="MyDialog"></div>

   3: <script type="text/javascript">
   5:  $(document).ready(function(){
   6:   $("#MyDialog").dialog({
   7:    title: "Message",
   8:    modal: true,
   9:    autoOpen: false,
  10:    open: function() {
  11:     $("#MyDialog").load("ExternalPage.htm");
  12:    }
  13:   }).ajaxError(function(event, request, settings, exception) {
  14:     alert("Error in: " + settings.url + " \n" + "error:\n" + exception);  
  15:    });
  16:  });
  17:  function ShowMyDialog(){
  18:   $("#MyDialog").dialog("open");
  19:  }
  20:</script>

Si vous avez des questions ou commentaires n’hésitez pas!