fix: refresh stored file content after update + more

css/styles.css

@@ -289,7 +289,7 @@ input {
   width: 100%;
 }
 #editor-wrapper {
-  top: 140px;
+  top: 145px;
 }
 
 #editor {

exemples/jquery/ajax-envoi-formulaire-par-get/example.html

@@ -1,6 +1,6 @@
 <h1>AJAX - Envoi formulaire par GET</h1>
 
-<form id="ajax-form-get" method="GET" action="/ajax-form-get">
+<form id="ajax-form-get" method="GET" action="/jquery/ajax/form-get">
     <input type="text" name="name" placeholder="Nom ?" />
     <input type="text" name="birthdate" placeholder="Date de naissance ?" />
     <input type="submit" class="btn btn-primary" value="Envoyer" />

exemples/jquery/ajax-envoi-formulaire-par-get/script.js

@@ -5,12 +5,19 @@ $('#ajax-form-get').submit(function(e) {
     var birthdate = form.find('input[name="birthdate"]').val();
     $.ajax({
         method: 'GET',
+        // Notez l'utilisation de .prop() pour récupérer l'attribut action,
+        // contenant l'URL vers laquelle le formulaire est sensé soumettre,
+        // vers laquelle il serait envoyé sans e.preventDefault() ci-dessus.
         url: form.prop('action'),
         data: {
             name: name, birthdate: birthdate
         },
         success: function(data) {
+            var message = "<p>Regardez l'onglet Network/Réseau "+
+              "de la console de développement...</p>";
             $('#ajax-html').html(data);
+            $( message ).appendTo( $('#ajax-html') )
+            .css('color', '#b33');
         },
         dataType: 'html'
     });

js/ws-editor.js

@@ -170,6 +170,11 @@ $(document).ready(function() {
   });
 
   _ws.makeView('sandbox-iframe', {
+    reload: function() {
+      var src = this.$elem.prop('src');
+      this.$elem.prop('src', '/empty.html');
+      this.$elem.prop('src', src);
+    },
     render: function(src) {
       this.$elem.prop('src', src);
     }
@@ -206,16 +211,28 @@ $(document).ready(function() {
   function onSaveChanges() {
     // console.log('Saving', this.file, editorSession.getValue())
     var filename = this.file.name;
+    // var payload = editorStorage.getSources();
     var payload = {
       content: editorSession.getValue()
     };
+
+    // Submit the new file content to server
     rp.put('/' + _ws.repo.path + '/examples/' + _ws.example.slug + '/files/' + filename, payload)
-    // var payload = editorStorage.getSources();
-    // rp.put('/examples/' + currentHash, payload)
     .then(function(updatedFile) {
-      // console.log(updatedFile);
+
+      // notify
       _ws.notify('success', "Fichier " + filename + " sauvegardé !");
+
+      // remove the dirty state on current editor tab
       _ws.ui.tabs.getActiveTab().removeClass('dirty');
+
+      // replace content with the updated one in _ws.files
+      var originalFile = _ws.files.find(f => (f.name === updatedFile.name));
+      var index = _ws.files.indexOf(originalFile);
+      _ws.files[index].content = updatedFile.content;
+
+      // reload sandbox iframe
+      _ws.ui.sandboxIframe.reload();
     })
     .catch(function(err) {
       // console.error(err);

sandboxApp.js

@@ -240,7 +240,7 @@ app.put('/:repoSlug/examples/:exampleSlug/files/:name',
     const targetDir = examplesDir + '/' + repoSlug + '/' + exampleSlug;
     const fullPath = targetDir + '/' + name;
     return fs.writeFileAsync(fullPath, content)
-    .then(() => res.json({ fullPath, content }));
+    .then(() => res.json({ fullPath, name, content }));
   }
 );
 

server.js

@@ -24,7 +24,7 @@ app.get('/ajax-example', function(req, res) {
 
 // 2ème exemple : envoi formulaire par méthode GET
 // Notez bien d'où on extrait les paramètres passé par le client (req.query)
-app.get('/ajax-form-get', function(req, res) {
+app.get('/jquery/ajax/form-get', function(req, res) {
   var name = req.query.name;
   var birthdate = req.query.birthdate;
   var exampleHtml = '<p>Salutations, <em>' + name +