Ajout exemple AJAX simple et route sur le serveur

css/styles.css

@@ -315,4 +315,14 @@ ul.tab-nav li {
 #qunit-header,
 #qunit-testrunner-toolbar {
   display: none;
+}
+#revert-editor {
+  background: none;
+  border: none;
+  position: absolute;
+  padding: 0 3px;
+  top: 0;
+  left: 0;
+  color: red;
+  font-size: 11px;
 }

exemples/ajax-exemple-simple/contenu.html

@@ -0,0 +1,4 @@
+<h1>Exemple AJAX (le plus simple)</h1>
+
+<p>Ici la requête AJAX est déclenchée dès le chargement de la page. Le résultat va venir s'insérer dans le cadre ci-dessous:</p>
+<div id="ajax-html" style="border: 1px solid #ddd; padding: 20px;"></div>

exemples/ajax-exemple-simple/script.js

@@ -0,0 +1,7 @@
+$.get('/ajax-example', function(data) {
+   $('#ajax-html').html(data); 
+});
+
+$.get('/ajax-example2', function(data) {
+   $('#ajax-html-2').html(data); 
+});

exemples/liste.json

@@ -17,5 +17,6 @@
   {
     "slug": "validation-de-formulaires-bootstrap",
     "title": "Validation de formulaires Bootstrap"
-  }
+  },
+  { "slug": "ajax-exemple-simple", "title": "AJAX - Exemple simple" }
 ]

index.html

@@ -41,6 +41,7 @@
         <div id="editor"></div>
         <script type="text/html" id="editor-javascript"></script>
         <script type="text/html" id="editor-html"></script>
+        <button id="revert-editor">!</button>
     </div>
 
     <div class="splitter">

js/editor.js

@@ -12,6 +12,7 @@ $(document).ready(function() {
   var $exampleCancel = $('#add-example-cancel');
   var $saveChanges   = $('#save-changes');
   var $notification  = $('#notification');
+  var $revertEditor  = $('#revert-editor');
   var $panelLeft     = $('.panel-left');
   var $panelRight    = $('.panel-right');
   var $window        = $(window);
@@ -232,6 +233,10 @@ $(document).ready(function() {
     toggleEditor();
   }
 
+  function revertEditor() {
+    editorStorage.reset();
+  }
+
   function saveChanges() {
     var payload = editorStorage.getSources();
 
@@ -260,5 +265,6 @@ $(document).ready(function() {
   $exampleCancel.click(clearAndCloseEditor);
   $saveChanges.click(saveChanges);
   $exampleForm.submit(saveExample);
+  $revertEditor.click(revertEditor);
   loadExampleList();
 });

server.js

@@ -1,6 +1,23 @@
+/**
+ * ATTENTION le fichier sandboxApp.js est assez complexe.
+ * Il sert à initialiser l'appli permettant d'avoir l'éditeur HTML&JavaScript en ligne
+ */
 var app = require('./sandboxApp');
 
 
+
+/*-------------------------------------------------------*
+ | Déclaration d'un gestionnaire pour GET /ajax-example
+ *-------------------------------------------------------*
+ |
+ */
+app.get('/ajax-example', function(req, res) {
+  var exampleHtml = '<h2>AJAX example</h2><p>This is some ready-made HTML sent to put somewhere in the page</p>';
+  res.send(exampleHtml);
+});
+
+
+
 /**
  * Création d'un tableau vide où on va stocker les utilisateurs
  */