Add intercept option useful for preprocessing data. by @randell. fix #66

Based on this SO answer: https://stackoverflow.com/a/4611865/7238840
NicolasCARPi · Feb 14, 2018 · a0be97b · a0be97b
1 parent 6b0cb10
commit a0be97b
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 7 deletions.
diff --git a/demos/index.html b/demos/index.html
@@ -52,7 +52,7 @@ <h1>jQuery-jeditable</h1>
         <h2>Core features</h2>
         <pre><code class="language-html">&lt;!-- include this in your HTML --&gt;
 &lt;script src=/path/to/jquery.jeditable.min.js&gt;&lt;/script&gt;
-</pre></code>
+</code></pre>
         <!-- FIRST ROW -->
         <div class='row'>
 
@@ -203,6 +203,28 @@ <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                 </div>
             </div>
 
+            <!-- INTERCEPT -->
+            <div class='card col-md-12'>
+                <div class='card-body'>
+                    <h4 class='card-title'>Intercept the data sent back</h4>
+                    <p class='card-text'>Useful if you want to process the returned data before it hits the page.</p>
+                    <p class='intercept example'>Click here to test the intercept option.</p>
+                <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
+                <div class='source'>
+                    <pre><code class="language-javascript">$(".intercept").editable("json2.php", {
+    submit : 'OK',
+    intercept : function(jsondata) {
+        json = JSON.parse(jsondata);
+        console.log(json.status);
+        console.log(json.other);
+        return json.result;
+    },
+});
+</code></pre>
+            </div>
+                </div>
+            </div>
+
             <!-- CHECKBOX -->
             <div class='card col-md-12'>
                 <div class='card-body'>
@@ -228,7 +250,7 @@ <h4 class='card-title'>Date Picker (requires jQuery-ui datepicker)</h4>
         <pre><code class="language-html">&lt;!-- also include this in your HTML --&gt;
 &lt;script src=/path/to/jquery.jeditable.datepicker.min.js&gt;&lt;/script&gt;
 &lt;!-- also include jQuery-UI JS and CSS files --&gt;
-</pre></code>
+</code></pre>
                   <p class="datepicker example">16-09-2018</p>
                 <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                 <div class='source'>
@@ -253,7 +275,7 @@ <h4 class='card-title'>Autogrow textarea</h4>
         <pre><code class="language-html">&lt;!-- also include this in your HTML --&gt;
 &lt;script src=/path/to/jquery.jeditable.autogrow.min.js&gt;&lt;/script&gt;
 &lt;script src=/path/to/jquery.autogrow.js&gt;&lt;/script&gt;
-</pre></code>
+</code></pre>
                     <p class="autogrow example">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                     <p>Depends on Autogrow by Chrys Bader.</p>
                 <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
@@ -287,7 +309,7 @@ <h4 class='card-title'>Masked Input</h4>
 <pre><code class="language-html">&lt;!-- also include this in your HTML --&gt;
 &lt;script src=/path/to/jquery.jeditable.masked.min.js&gt;&lt;/script&gt;
 &lt;script src=/path/to/jquery.maskedinput.js&gt;&lt;/script&gt;
-</pre></code>
+</code></pre>
                     <p class="masked example">19/12/2017</p>
                     <p>Depends on
                     <a href="https://github.com/digitalBush/jquery.maskedinput">Masked Input</a> by Josh Bush.
@@ -312,7 +334,7 @@ <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                     <h4 class='card-title'>Time Picker</h4>
         <pre><code class="language-html">&lt;!-- also include this in your HTML --&gt;
 &lt;script src=/path/to/jquery.jeditable.time.min.js&gt;&lt;/script&gt;
-</pre></code>
+</code></pre>
                   <p class="timepicker example">16:30</p>
                 <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                 <div class='source'>
@@ -333,7 +355,7 @@ <h4 class='card-title'>Character counter</h4>
         <pre><code class="language-html">&lt;!-- also include this in your HTML --&gt;
 &lt;script src=/path/to/jquery.jeditable.charcounter.min.js&gt;&lt;/script&gt;
 &lt;script src=/path/to/jquery.charcounter.js&gt;&lt;/script&gt;
-</pre></code>
+</code></pre>
                       <p class="charcounter example">The number of characters will be counted.</p>
                 <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                 <div class='source'>
@@ -375,7 +397,6 @@ <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
             // BASIC MINIMAL EXAMPLE
             $(".editable-text").editable("save.php");
 
-
             // FULL EXAMPLE WITH PLENTY OF OPTIONS
             // custom submitted data fields
             var submitdata = {}
@@ -460,6 +481,18 @@ <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                 style  : "inherit"
             });
 
+            // INTERCEPT
+            // GET BACK JSON AND PROCESS IT BEFORE DISPLAY
+            $(".intercept").editable("json2.php", {
+                submit : 'OK',
+                intercept : function(jsondata) {
+					json = JSON.parse(jsondata);
+                    console.log(json.status);
+                    console.log(json.other);
+                    return json.result;
+                },
+            });
+
             // CHECKBOX
             $(".checkbox").editable("save.php", {
                 type      : "checkbox",

diff --git a/demos/json2.php b/demos/json2.php
@@ -0,0 +1,2 @@
+<?php
+echo '{ "status": 1, "result": "value to be displayed", "other": "some other data" }';
diff --git a/src/jquery.jeditable.js b/src/jquery.jeditable.js
@@ -81,6 +81,7 @@
         var element  = $.editable.types[settings.type].element || $.editable.types.defaults.element;
         var reset    = $.editable.types[settings.type].reset || $.editable.types.defaults.reset;
         var callback = settings.callback || function() { };
+        var intercept = settings.intercept || function(s) { return s; };
         var onedit   = settings.onedit   || function() { };
         var onsubmit = settings.onsubmit || function() { };
         var onreset  = settings.onreset  || function() { };
@@ -339,6 +340,10 @@
                                   dataType: 'html',
                                   url     : settings.target,
                                   success : function(result, status) {
+
+                                      // INTERCEPT
+                                      result = intercept.apply(self, [result]);
+
                                       if (ajaxoptions.dataType == 'html') {
                                         $(self).html(result);
                                       }