From 23ae6c061f680c9ba006c60ecc8e7b9cbda1560e Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Fri, 23 Jun 2017 16:53:16 -0400
Subject: [PATCH 1/8] Enhance js handling - init commit

Add function renderJSON when json response is need for ajax request.
---
 js/src/plugins/reloadView.js   | 10 +++++---
 src/TableColumn/Delete.php     |  3 +--
 src/View.php                   | 43 +++++++++++++++++++++++-----------
 src/VirtualPage.php            |  3 +++
 src/jsModal.php                | 14 ++++++++---
 src/jsReload.php               |  2 +-
 template/semantic-ui/html.html | 20 +++++++++-------
 template/semantic-ui/html.pug  | 22 +++++++++--------
 8 files changed, 75 insertions(+), 42 deletions(-)

diff --git a/js/src/plugins/reloadView.js b/js/src/plugins/reloadView.js
index a1ce6a6805..76266b9b6f 100644
--- a/js/src/plugins/reloadView.js
+++ b/js/src/plugins/reloadView.js
@@ -9,11 +9,15 @@ export default class reloadView {
             'active': true,
             'inline': true,
             'centered': true,
-            'replace': true});
+            'replace': false});
 
         if(options.uri) {
-            $.get(options.uri, options.uri_options, (data) => {
-                $element.replaceWith(data);
+            $element.api({
+                on: 'now',
+                url: options.uri,
+                data: options.uri_options,
+                method: 'GET',
+                obj: $element
             });
         }
     }
diff --git a/src/TableColumn/Delete.php b/src/TableColumn/Delete.php
index 07c0aa5929..c4ef9709a5 100644
--- a/src/TableColumn/Delete.php
+++ b/src/TableColumn/Delete.php
@@ -17,8 +17,7 @@ public function init()
 
             $reload = $this->table->reload ?: $this->table;
 
-            $ajaxec = (new \atk4\ui\jQuery($reload))->replaceWith($reload->render())->jsRender();
-            $this->table->app->terminate(json_encode(['success'=>true, 'message'=>'Success', 'eval'=>$ajaxec]));
+            $this->table->app->terminate($reload->renderJSON());
         });
 
         $this->table->on('click', 'a.'.$this->short_name)->ajaxec([
diff --git a/src/View.php b/src/View.php
index 9585b48d46..352589762c 100644
--- a/src/View.php
+++ b/src/View.php
@@ -686,21 +686,36 @@ public function renderAll()
         }
     }
 
-    /**
-     * This method is for those cases when developer want to simply render his
-     * view and grab HTML himself.
-     *
-     * @param bool $force_echo
-     *
-     * @return string
-     */
-    public function render($force_echo = true)
+	/**
+	 * This method is for those cases when developer want to simply render his
+	 * view and grab HTML himself.
+	 *
+	 * @param bool $force_echo
+	 *
+	 * @return string
+	 */
+	public function render($force_echo = true)
+	{
+		$this->renderAll();
+		return
+			$this->getJS($force_echo).
+			$this->template->render();
+	}
+
+	/**
+	 * Render View using json format.
+	 * @param bool $force_echo
+	 *
+	 * @return string
+	 */
+    public function renderJSON($force_echo = true)
     {
-        $this->renderAll();
-
-        return
-            $this->getJS($force_echo).
-            $this->template->render();
+	    $this->renderAll();
+	    return json_encode(['success'=>true,
+	                        'message'=>'Success',
+	                        'eval'=>$this->getJS($force_echo),
+	                        'html'=>$this->template->render(),
+	                        'id'=>$this->name]);
     }
 
     /**
diff --git a/src/VirtualPage.php b/src/VirtualPage.php
index 555c10a72a..a240447340 100644
--- a/src/VirtualPage.php
+++ b/src/VirtualPage.php
@@ -33,6 +33,9 @@ public function init()
             }
 
             if ($this->cb->triggered == 'cut') {
+            	if (isset($_GET['json'])) {
+		            $this->app->terminate($this->renderJSON());
+	            }
                 $this->app->terminate($this->render());
             }
 
diff --git a/src/jsModal.php b/src/jsModal.php
index 9ba9e6e784..b3e3af03c7 100644
--- a/src/jsModal.php
+++ b/src/jsModal.php
@@ -27,14 +27,22 @@ public function __construct($title, $url, $args = [])
   </div>
 ';
 
-        parent::__construct('
+	    parent::__construct('
+		var param = [arg];
         var m=$("<div>").appendTo("body").addClass("ui scrolling modal").html([content]);
-        m.modal({duration: 100, onHide: function() { m.children().remove(); return true; }}).modal("show").find(".content").load($.addParams([url], [arg]), function() { m.modal("refresh"); });
+        m.modal({onHide: function() { m.children().remove(); return true; }, onShow: function(){
+        let $el = $(this);
+        $.getJSON( [url], param, function(resp){
+                $el.find(".atk-dialog-content").html(resp.html);
+                eval(resp.eval.replace(/<\/?script>/g, \'\'));
+            }
+        );
+    }}).modal("show");
         m.find(".atk-dialog-content").data("opener", this).on("close", function() {
             m.modal("hide");
             m.remove();
         });
 ',
-            ['content'=>$content, 'url'=>$url, 'arg'=>$args]);
+		    ['content'=>$content, 'url'=>$url, 'arg'=>array_merge($args,['json'=>true])]);
     }
 }
diff --git a/src/jsReload.php b/src/jsReload.php
index 89f770915f..1e25e8b314 100644
--- a/src/jsReload.php
+++ b/src/jsReload.php
@@ -25,7 +25,7 @@ public function __construct($view, $args = [])
 
         $this->cb = $this->view->_add(new CallbackLater());
         $this->cb->set(function () {
-            $this->view->app->terminate($this->view->render());
+            $this->view->app->terminate($this->view->renderJSON());
         });
     }
 
diff --git a/template/semantic-ui/html.html b/template/semantic-ui/html.html
index b85c3bccb9..6ec2d156a8 100644
--- a/template/semantic-ui/html.html
+++ b/template/semantic-ui/html.html
@@ -5,16 +5,18 @@
     <meta charset="utf-8">{$HEAD}
     <script>
       $.fn.api.settings.successTest = function(response) {
-        if(response && response.eval) {
-            try {
-              var result = function(){ eval(response.eval); }.call(this.obj);
-            } catch (e) {
-              //alert(e);
-            }
-        }
-        return true;
+          if (response && response.html && response.id) {
+              $('#'+response.id).replaceWith(response.html);
+          }
+          if (response && response.eval) {
+              try {
+                  var result = function(){ eval(response.eval.replace(/<\/?script>/g, '')); }.call(this.obj);
+              } catch (e) {
+
+              }
+          }
+          return true;
       }
-      
       $.fn.api.settings.onFailure = function(response) {
           w=window.open(null,'Error in JSON response','height=1000,width=1100,location=no,menubar=no,scrollbars=yes,status=no,titlebar=no,toolbar=no');
           if(w){
diff --git a/template/semantic-ui/html.pug b/template/semantic-ui/html.pug
index d196ee7627..266dc90fec 100644
--- a/template/semantic-ui/html.pug
+++ b/template/semantic-ui/html.pug
@@ -7,18 +7,20 @@ html(lang="{lang}en{/}")
     | {$HEAD}
     script.
         $.fn.api.settings.successTest = function(response) {
-          if(response && response.eval) {
-              try {
-                var result = function(){ eval(response.eval); }.call(this.obj);
-              } catch (e) {
-                //alert(e);
-              }
-          }
-          return true;
-        }
+            if (response && response.html && response.id) {
+                $('#'+response.id).replaceWith(response.html);
+            }
+            if (response && response.eval) {
+                try {
+                    var result = function(){ eval(response.eval.replace(/<\/?script>/g, '')); }.call(this.obj);
+                } catch (e) {
 
+                }
+            }
+        return true;
+        }
         $.fn.api.settings.onFailure = function(response) {
-            w=window.open(null,'Error in JSON response','height=1000,width=1100,location=no,menubar=no,scrollbars=yes,status=no,titlebar=no,toolbar=no');
+            w=window.open(null, 'Error in JSON response', 'height=1000,width=1100,location=no,menubar=no,scrollbars=yes,status=no,titlebar=no,toolbar=no');
             if(w){
                 w.document.write('<h5>Error in JSON response</h5>');
                 w.document.write(response);

From 0f2704ef586a7000389f903fef7a0d6049079576 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Fri, 23 Jun 2017 21:43:19 -0400
Subject: [PATCH 2/8] Add plugin for creating modal. Enhance error display on
 ajax request.

Create a new plugin that will create modal window. Also enhance error
display on ajax request.
---
 js/package.json                |  3 ++-
 js/src/index.js                |  2 ++
 js/src/plugins/createModal.js  | 47 ++++++++++++++++++++++++++++++++++
 src/View.php                   | 28 +++++++++++++++-----
 src/jsModal.php                | 34 ++----------------------
 template/semantic-ui/html.html | 19 +++++++++-----
 template/semantic-ui/html.pug  | 21 +++++++++------
 7 files changed, 100 insertions(+), 54 deletions(-)
 create mode 100644 js/src/plugins/createModal.js

diff --git a/js/package.json b/js/package.json
index e2c800f32b..ce5cd8b948 100644
--- a/js/package.json
+++ b/js/package.json
@@ -44,6 +44,7 @@
   },
   "homepage": "https://github.com/krasimir/webpack-library-starter",
   "dependencies": {
-    "jquery": "^3.1.1"
+    "jquery": "^3.1.1",
+    "semantic-ui-modal": "^2.2.10"
   }
 }
diff --git a/js/src/index.js b/js/src/index.js
index 62cdfd141a..24c1f8f5b7 100644
--- a/js/src/index.js
+++ b/js/src/index.js
@@ -7,12 +7,14 @@ import spinner from 'plugins/spinner'
 import reloadView from 'plugins/reloadView'
 import ajaxec from 'plugins/ajaxec'
 import addParams from 'plugins/addParams'
+import createModal from 'plugins/createModal'
 
 // Register our plugins
 registerPlugin('spinner', spinner);
 registerPlugin('reloadView', reloadView);
 registerPlugin('ajaxec', ajaxec);
 registerPlugin('addParams', addParams);
+registerPlugin('createModal', createModal);
 
 $.addParams = function ( url, data )
 {
diff --git a/js/src/plugins/createModal.js b/js/src/plugins/createModal.js
new file mode 100644
index 0000000000..8319fef095
--- /dev/null
+++ b/js/src/plugins/createModal.js
@@ -0,0 +1,47 @@
+import $ from 'jQuery';
+$.fn.modal = require('semantic-ui-modal');
+
+export default class createModal {
+    constructor(element, options) {
+        const container = this.getDialogHtml(options.title);
+        const m = $("<div>").appendTo("body").addClass("ui scrolling modal").html(container);
+
+        m.modal({
+            onHide: function() {
+                m.children().remove();
+                return true;
+                },
+            onShow: function() {
+                let $el = $(this);
+                $.getJSON( options.uri, options.uri_options, function(resp){
+                    $el.find(".atk-dialog-content").html(resp.html);
+                    eval(resp.eval.replace(/<\/?script>/g, ''));
+                }
+            );
+        }})
+        .modal("show");
+
+        m.find(".atk-dialog-content").data("opener", this)
+        .on("close", function() {
+            m.modal("hide");
+            m.remove();
+        });
+    }
+
+    getDialogHtml( title) {
+        return `        
+            <i class="close icon"></i>
+            <div class="header">${title}</div>
+            <div class="image content atk-dialog-content">
+              <div class="ui active inverted dimmer">
+                <div class="ui text loader">Loading</div>
+              </div>
+            </div>`
+    }
+}
+
+createModal.DEFAULTS = {
+    title: '',
+    uri: null,
+    uri_options: {},
+};
diff --git a/src/View.php b/src/View.php
index 352589762c..901a19a320 100644
--- a/src/View.php
+++ b/src/View.php
@@ -710,12 +710,28 @@ public function render($force_echo = true)
 	 */
     public function renderJSON($force_echo = true)
     {
-	    $this->renderAll();
-	    return json_encode(['success'=>true,
-	                        'message'=>'Success',
-	                        'eval'=>$this->getJS($force_echo),
-	                        'html'=>$this->template->render(),
-	                        'id'=>$this->name]);
+    	try {
+		    $this->renderAll();
+		    return json_encode(['success'=>true,
+		                        'message'=>'Success',
+		                        'eval'=>$this->getJS($force_echo),
+		                        'html'=>$this->template->render(),
+		                        'id'=>$this->name]);
+	    } catch (\Exception $exception) {
+    		$l = $this->add(new View());
+		    if ($exception instanceof \atk4\core\Exception) {
+			    $l->setHTML('Content', $exception->getHTML());
+		    } elseif ($exception instanceof \Error) {
+			    $l->add(new View(['ui'=> 'message', get_class($exception).': '.
+			                                                $exception->getMessage().' (in '.$exception->getFile().':'.$exception->getLine().')',
+				    'error', ]));
+			    $l->add(new Text())->set(nl2br($exception->getTraceAsString()));
+		    } else {
+			    $l->add(new View(['ui'=>'message', get_class($exception).': '.$exception->getMessage(), 'error']));
+		    }
+    		return json_encode(['success'=>false,
+			                    'message' => $l->getHTML()]);
+        }
     }
 
     /**
diff --git a/src/jsModal.php b/src/jsModal.php
index b3e3af03c7..f6947f89b5 100644
--- a/src/jsModal.php
+++ b/src/jsModal.php
@@ -12,37 +12,7 @@ public function __construct($title, $url, $args = [])
         if ($url instanceof VirtualPage) {
             $url = $url->getURL('cut');
         }
-
-        $content = '
-  <i class="close icon"></i>
-  <div class="header">
-    '.htmlspecialchars($title).'
-  </div>
-  <div class="image content atk-dialog-content">
-  <div class="ui active inverted dimmer">
-    <div class="ui text loader">Loading</div>
-  </div>
-
-
-  </div>
-';
-
-	    parent::__construct('
-		var param = [arg];
-        var m=$("<div>").appendTo("body").addClass("ui scrolling modal").html([content]);
-        m.modal({onHide: function() { m.children().remove(); return true; }, onShow: function(){
-        let $el = $(this);
-        $.getJSON( [url], param, function(resp){
-                $el.find(".atk-dialog-content").html(resp.html);
-                eval(resp.eval.replace(/<\/?script>/g, \'\'));
-            }
-        );
-    }}).modal("show");
-        m.find(".atk-dialog-content").data("opener", this).on("close", function() {
-            m.modal("hide");
-            m.remove();
-        });
-',
-		    ['content'=>$content, 'url'=>$url, 'arg'=>array_merge($args,['json'=>true])]);
+        $args = array_merge($args,['json'=>true]);
+        parent::__construct('$(this).createModal([arg])', ['arg'=>['uri'=>$url, 'title'=>$title, 'uri_options'=>$args]]);
     }
 }
diff --git a/template/semantic-ui/html.html b/template/semantic-ui/html.html
index 6ec2d156a8..b4254e6c6f 100644
--- a/template/semantic-ui/html.html
+++ b/template/semantic-ui/html.html
@@ -5,15 +5,20 @@
     <meta charset="utf-8">{$HEAD}
     <script>
       $.fn.api.settings.successTest = function(response) {
-          if (response && response.html && response.id) {
-              $('#'+response.id).replaceWith(response.html);
-          }
-          if (response && response.eval) {
-              try {
-                  var result = function(){ eval(response.eval.replace(/<\/?script>/g, '')); }.call(this.obj);
-              } catch (e) {
+          if(response.success){
+              if (response && response.html && response.id) {
+                  $('#'+response.id).replaceWith(response.html);
+              }
+              if (response && response.eval) {
+                  try {
+                      var result = function(){ eval(response.eval.replace(/<\/?script>/g, '')); }.call(this.obj);
+                  } catch (e) {
 
+                  }
               }
+          } else {
+              var m = $("<div>").appendTo("body").addClass("ui scrolling modal").html(response.message);
+              m.modal({duration: 100, onHide: function() { m.children().remove(); return true; }}).modal("show");
           }
           return true;
       }
diff --git a/template/semantic-ui/html.pug b/template/semantic-ui/html.pug
index 266dc90fec..5a84a813ae 100644
--- a/template/semantic-ui/html.pug
+++ b/template/semantic-ui/html.pug
@@ -7,17 +7,22 @@ html(lang="{lang}en{/}")
     | {$HEAD}
     script.
         $.fn.api.settings.successTest = function(response) {
-            if (response && response.html && response.id) {
-                $('#'+response.id).replaceWith(response.html);
-            }
-            if (response && response.eval) {
-                try {
-                    var result = function(){ eval(response.eval.replace(/<\/?script>/g, '')); }.call(this.obj);
-                } catch (e) {
+            if(response.success){
+                if (response && response.html && response.id) {
+                    $('#'+response.id).replaceWith(response.html);
+                }
+                if (response && response.eval) {
+                    try {
+                        var result = function(){ eval(response.eval.replace(/<\/?script>/g, '')); }.call(this.obj);
+                    } catch (e) {
 
+                    }
                 }
+            } else {
+                var m = $("<div>").appendTo("body").addClass("ui scrolling modal").html(response.message);
+                m.modal({duration: 100, onHide: function() { m.children().remove(); return true; }}).modal("show");
             }
-        return true;
+            return true;
         }
         $.fn.api.settings.onFailure = function(response) {
             w=window.open(null, 'Error in JSON response', 'height=1000,width=1100,location=no,menubar=no,scrollbars=yes,status=no,titlebar=no,toolbar=no');

From d8d0ee27fd48950c3314328881b9aceba193967b Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Fri, 23 Jun 2017 22:21:16 -0400
Subject: [PATCH 3/8] fix html output

---
 src/View.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/View.php b/src/View.php
index 901a19a320..285756f8fb 100644
--- a/src/View.php
+++ b/src/View.php
@@ -720,7 +720,7 @@ public function renderJSON($force_echo = true)
 	    } catch (\Exception $exception) {
     		$l = $this->add(new View());
 		    if ($exception instanceof \atk4\core\Exception) {
-			    $l->setHTML('Content', $exception->getHTML());
+			    $l->template->setHTML('Content', $exception->getHTML());
 		    } elseif ($exception instanceof \Error) {
 			    $l->add(new View(['ui'=> 'message', get_class($exception).': '.
 			                                                $exception->getMessage().' (in '.$exception->getFile().':'.$exception->getLine().')',

From 43716f4619e41f4d85d14a771ac8cd320c53ff65 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Sat, 24 Jun 2017 02:27:20 +0000
Subject: [PATCH 4/8] Apply fixes from StyleCI

---
 src/View.php        | 90 +++++++++++++++++++++++----------------------
 src/VirtualPage.php |  6 +--
 src/jsModal.php     |  2 +-
 3 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/src/View.php b/src/View.php
index 285756f8fb..f3050be971 100644
--- a/src/View.php
+++ b/src/View.php
@@ -686,51 +686,55 @@ public function renderAll()
         }
     }
 
-	/**
-	 * This method is for those cases when developer want to simply render his
-	 * view and grab HTML himself.
-	 *
-	 * @param bool $force_echo
-	 *
-	 * @return string
-	 */
-	public function render($force_echo = true)
-	{
-		$this->renderAll();
-		return
-			$this->getJS($force_echo).
-			$this->template->render();
-	}
-
-	/**
-	 * Render View using json format.
-	 * @param bool $force_echo
-	 *
-	 * @return string
-	 */
+    /**
+     * This method is for those cases when developer want to simply render his
+     * view and grab HTML himself.
+     *
+     * @param bool $force_echo
+     *
+     * @return string
+     */
+    public function render($force_echo = true)
+    {
+        $this->renderAll();
+
+        return
+            $this->getJS($force_echo).
+            $this->template->render();
+    }
+
+    /**
+     * Render View using json format.
+     *
+     * @param bool $force_echo
+     *
+     * @return string
+     */
     public function renderJSON($force_echo = true)
     {
-    	try {
-		    $this->renderAll();
-		    return json_encode(['success'=>true,
-		                        'message'=>'Success',
-		                        'eval'=>$this->getJS($force_echo),
-		                        'html'=>$this->template->render(),
-		                        'id'=>$this->name]);
-	    } catch (\Exception $exception) {
-    		$l = $this->add(new View());
-		    if ($exception instanceof \atk4\core\Exception) {
-			    $l->template->setHTML('Content', $exception->getHTML());
-		    } elseif ($exception instanceof \Error) {
-			    $l->add(new View(['ui'=> 'message', get_class($exception).': '.
-			                                                $exception->getMessage().' (in '.$exception->getFile().':'.$exception->getLine().')',
-				    'error', ]));
-			    $l->add(new Text())->set(nl2br($exception->getTraceAsString()));
-		    } else {
-			    $l->add(new View(['ui'=>'message', get_class($exception).': '.$exception->getMessage(), 'error']));
-		    }
-    		return json_encode(['success'=>false,
-			                    'message' => $l->getHTML()]);
+        try {
+            $this->renderAll();
+
+            return json_encode(['success'=> true,
+                                'message'=> 'Success',
+                                'eval'   => $this->getJS($force_echo),
+                                'html'   => $this->template->render(),
+                                'id'     => $this->name, ]);
+        } catch (\Exception $exception) {
+            $l = $this->add(new self());
+            if ($exception instanceof \atk4\core\Exception) {
+                $l->template->setHTML('Content', $exception->getHTML());
+            } elseif ($exception instanceof \Error) {
+                $l->add(new self(['ui'=> 'message', get_class($exception).': '.
+                                                            $exception->getMessage().' (in '.$exception->getFile().':'.$exception->getLine().')',
+                    'error', ]));
+                $l->add(new Text())->set(nl2br($exception->getTraceAsString()));
+            } else {
+                $l->add(new self(['ui'=>'message', get_class($exception).': '.$exception->getMessage(), 'error']));
+            }
+
+            return json_encode(['success' => false,
+                                'message' => $l->getHTML(), ]);
         }
     }
 
diff --git a/src/VirtualPage.php b/src/VirtualPage.php
index a240447340..f414388d56 100644
--- a/src/VirtualPage.php
+++ b/src/VirtualPage.php
@@ -33,9 +33,9 @@ public function init()
             }
 
             if ($this->cb->triggered == 'cut') {
-            	if (isset($_GET['json'])) {
-		            $this->app->terminate($this->renderJSON());
-	            }
+                if (isset($_GET['json'])) {
+                    $this->app->terminate($this->renderJSON());
+                }
                 $this->app->terminate($this->render());
             }
 
diff --git a/src/jsModal.php b/src/jsModal.php
index f6947f89b5..93dc184a44 100644
--- a/src/jsModal.php
+++ b/src/jsModal.php
@@ -12,7 +12,7 @@ public function __construct($title, $url, $args = [])
         if ($url instanceof VirtualPage) {
             $url = $url->getURL('cut');
         }
-        $args = array_merge($args,['json'=>true]);
+        $args = array_merge($args, ['json'=>true]);
         parent::__construct('$(this).createModal([arg])', ['arg'=>['uri'=>$url, 'title'=>$title, 'uri_options'=>$args]]);
     }
 }

From 45a1c4cc53d8704730bb7a7eb88ff193c3a696ae Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Mon, 26 Jun 2017 08:22:36 -0400
Subject: [PATCH 5/8] Fix styling error and config ui-semantic-modal as
 external

---
 js/src/plugins/createModal.js | 72 +++++++++++++++++------------------
 js/webpack.config.js          |  3 +-
 2 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/js/src/plugins/createModal.js b/js/src/plugins/createModal.js
index 8319fef095..86e22390ce 100644
--- a/js/src/plugins/createModal.js
+++ b/js/src/plugins/createModal.js
@@ -2,46 +2,46 @@ import $ from 'jQuery';
 $.fn.modal = require('semantic-ui-modal');
 
 export default class createModal {
-    constructor(element, options) {
-        const container = this.getDialogHtml(options.title);
-        const m = $("<div>").appendTo("body").addClass("ui scrolling modal").html(container);
+  constructor(element, options) {
+    const container = this.getDialogHtml(options.title);
+    const m = $('<div>').appendTo('body').addClass('ui scrolling modal').html(container);
 
-        m.modal({
-            onHide: function() {
-                m.children().remove();
-                return true;
-                },
-            onShow: function() {
-                let $el = $(this);
-                $.getJSON( options.uri, options.uri_options, function(resp){
-                    $el.find(".atk-dialog-content").html(resp.html);
-                    eval(resp.eval.replace(/<\/?script>/g, ''));
-                }
-            );
-        }})
-        .modal("show");
-
-        m.find(".atk-dialog-content").data("opener", this)
-        .on("close", function() {
-            m.modal("hide");
-            m.remove();
+    m.modal({
+      onHide: function () {
+        m.children().remove();
+        return true;
+      },
+      onShow: function () {
+        const $el = $(this);
+        $.getJSON(options.uri, options.uri_options, function (resp) {
+          console.log($);
+          $el.find('.atk-dialog-content').html(resp.html);
+          let result = function(){eval(resp.eval.replace(/<\/?script>/g, '')); }.call(this.obj);
+          //global.eval(resp.eval.replace(/<\/?script>/g, ''));
         });
-    }
+      }})
+      .modal('show');
+
+    m.find('.atk-dialog-content').data('opener', this)
+    .on('close', function () {
+      m.modal('hide');
+      m.remove();
+    });
+  }
 
-    getDialogHtml( title) {
-        return `        
-            <i class="close icon"></i>
-            <div class="header">${title}</div>
-            <div class="image content atk-dialog-content">
-              <div class="ui active inverted dimmer">
-                <div class="ui text loader">Loading</div>
-              </div>
-            </div>`
-    }
+  getDialogHtml(title) {
+    return `<i class="close icon"></i>
+          <div class="header">${title}</div>
+          <div class="image content atk-dialog-content">
+            <div class="ui active inverted dimmer">
+              <div class="ui text loader">Loading</div>
+            </div>
+          </div>`;
+  }
 }
 
 createModal.DEFAULTS = {
-    title: '',
-    uri: null,
-    uri_options: {},
+  title: '',
+  uri: null,
+  uri_options: {}
 };
diff --git a/js/webpack.config.js b/js/webpack.config.js
index 6f01d9a982..4f5d7c5c26 100644
--- a/js/webpack.config.js
+++ b/js/webpack.config.js
@@ -48,7 +48,8 @@ const config = {
   },
   plugins: plugins,
   externals: {
-      'jquery': 'jQuery'
+      'jquery': 'jQuery',
+      'modal' : 'semantic-ui-modal'
   }
 };
 

From a591c50023fc886cbaa2fff10bb93be685835750 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Wed, 28 Jun 2017 16:48:14 -0400
Subject: [PATCH 6/8] Fix modal trigger close and few js fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Now properly close modal. Problem was coming from jquery that was
include in final atk4js bundle. Need to change import $ from ‘jquery’
to const $ = require(‘jquery’) for it no to be include in bundle.
modal semantic is still include however. Even if set as external in
webpack config. need to find out why but does not seem to cause problem.
---
 js/src/index.js               | 16 ++----------
 js/src/plugin.js              |  2 +-
 js/src/plugins/addParams.js   |  4 +--
 js/src/plugins/ajaxec.js      |  2 +-
 js/src/plugins/createModal.js | 46 +++++++++++++++++------------------
 js/src/plugins/reloadView.js  |  2 +-
 js/src/plugins/spinner.js     |  2 +-
 js/webpack.config.js          | 14 ++++-------
 8 files changed, 36 insertions(+), 52 deletions(-)

diff --git a/js/src/index.js b/js/src/index.js
index 24c1f8f5b7..97e1023036 100644
--- a/js/src/index.js
+++ b/js/src/index.js
@@ -1,5 +1,3 @@
-import $ from 'jquery';
-
 import registerPlugin from './plugin';
 
 // Import our plugins
@@ -13,15 +11,5 @@ import createModal from 'plugins/createModal'
 registerPlugin('spinner', spinner);
 registerPlugin('reloadView', reloadView);
 registerPlugin('ajaxec', ajaxec);
-registerPlugin('addParams', addParams);
-registerPlugin('createModal', createModal);
-
-$.addParams = function ( url, data )
-{
-    if ( ! $.isEmptyObject(data) )
-    {
-        url += ( url.indexOf('?') >= 0 ? '&' : '?' ) + $.param(data);
-    }
-
-    return url;
-}
+registerPlugin('addParams', addParams, true);
+registerPlugin('createModal', createModal);
\ No newline at end of file
diff --git a/js/src/plugin.js b/js/src/plugin.js
index f34aad075f..803f09a11a 100644
--- a/js/src/plugin.js
+++ b/js/src/plugin.js
@@ -1,4 +1,4 @@
-import $ from 'jquery';
+var $ = require('jquery');
 
 /* https://gist.github.com/monkeymonk/c08cb040431f89f99928132ca221d647 */
 
diff --git a/js/src/plugins/addParams.js b/js/src/plugins/addParams.js
index b8591702e3..13da16b589 100644
--- a/js/src/plugins/addParams.js
+++ b/js/src/plugins/addParams.js
@@ -1,4 +1,4 @@
-import $ from 'jquery';
+const $ = require('jquery');
 
 export default class addParams {
     constructor(element, options) {
@@ -15,4 +15,4 @@ export default class addParams {
 addParams.DEFAULTS = {
     url: null,
     params: {},
-}
+}
\ No newline at end of file
diff --git a/js/src/plugins/ajaxec.js b/js/src/plugins/ajaxec.js
index c93db81e37..91c24fc122 100644
--- a/js/src/plugins/ajaxec.js
+++ b/js/src/plugins/ajaxec.js
@@ -1,4 +1,4 @@
-import $ from 'jquery';
+const $ = require('jquery');
 
 export default class ajaxec {
     constructor(element, options) {
diff --git a/js/src/plugins/createModal.js b/js/src/plugins/createModal.js
index 86e22390ce..d9c8bce987 100644
--- a/js/src/plugins/createModal.js
+++ b/js/src/plugins/createModal.js
@@ -1,32 +1,29 @@
-import $ from 'jQuery';
-$.fn.modal = require('semantic-ui-modal');
+const $ = require('jquery');
+const modal = require('semantic-ui-modal');
 
 export default class createModal {
   constructor(element, options) {
-    const container = this.getDialogHtml(options.title);
-    const m = $('<div>').appendTo('body').addClass('ui scrolling modal').html(container);
 
-    m.modal({
-      onHide: function () {
-        m.children().remove();
-        return true;
+    let $m = $('<div class="atk-modal ui modal scrolling"/>').appendTo('body').html(this.getDialogHtml(options.title));
+
+    $m.modal($.extend({
+      onHide: function (el) {
+      return true;
+    },
+      onHidden: function () {
+        $m.remove();
       },
-      onShow: function () {
-        const $el = $(this);
+      onVisible: function () {
         $.getJSON(options.uri, options.uri_options, function (resp) {
-          console.log($);
-          $el.find('.atk-dialog-content').html(resp.html);
-          let result = function(){eval(resp.eval.replace(/<\/?script>/g, '')); }.call(this.obj);
-          //global.eval(resp.eval.replace(/<\/?script>/g, ''));
+          $m.find('.atk-dialog-content').html(resp.html);
+          const result = function(){ eval(resp.eval.replace(/<\/?script>/g, '')); }.call(this.obj);
+        }).fail(function(){
+          console.log('Error loading modal content.')
         });
-      }})
-      .modal('show');
-
-    m.find('.atk-dialog-content').data('opener', this)
-    .on('close', function () {
-      m.modal('hide');
-      m.remove();
-    });
+        $m.on("close", '.atk-dialog-content', function () {
+            $m.modal('hide');
+        });
+      }}, options.modal)).modal('show');
   }
 
   getDialogHtml(title) {
@@ -43,5 +40,8 @@ export default class createModal {
 createModal.DEFAULTS = {
   title: '',
   uri: null,
-  uri_options: {}
+  uri_options: {},
+  modal: {
+      duration: 100
+  }
 };
diff --git a/js/src/plugins/reloadView.js b/js/src/plugins/reloadView.js
index 76266b9b6f..60a943b75a 100644
--- a/js/src/plugins/reloadView.js
+++ b/js/src/plugins/reloadView.js
@@ -1,4 +1,4 @@
-import $ from 'jquery';
+const $ = require('jquery');
 
 export default class reloadView {
     constructor(element, options) {
diff --git a/js/src/plugins/spinner.js b/js/src/plugins/spinner.js
index 0856eea01f..b7189dc146 100644
--- a/js/src/plugins/spinner.js
+++ b/js/src/plugins/spinner.js
@@ -1,4 +1,4 @@
-import $ from 'jquery';
+const $ = require('jquery');
 
 export default class spinner {
     constructor(element, options) {
diff --git a/js/webpack.config.js b/js/webpack.config.js
index 4f5d7c5c26..09e3ac77a5 100644
--- a/js/webpack.config.js
+++ b/js/webpack.config.js
@@ -4,12 +4,11 @@ const webpack = require('webpack');
 const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
 const path = require('path');
 const env  = require('yargs').argv.env; // use --env with webpack 2
+//const nodeExternals = require('webpack-node-externals');
 
 let libraryName = 'atk4JS';
 
-let plugins = [
-
-], outputFile;
+let plugins = [], outputFile;
 
 if (env === 'build') {
   plugins.push(new UglifyJsPlugin({ minimize: true }));
@@ -34,7 +33,7 @@ const config = {
         test: /(\.jsx|\.js)$/,
         loader: 'babel-loader',
         exclude: /(node_modules|bower_components)/
-      },
+      }//,
       // {
       //   test: /(\.jsx|\.js)$/,
       //   loader: "eslint-loader",
@@ -42,15 +41,12 @@ const config = {
       // }
     ]
   },
+  externals: {modal: 'semantic-ui-modal', jquery: 'jQuery'},
   resolve: {
     modules: [path.resolve('./src'), path.join(__dirname, 'node_modules')],
     extensions: ['.json', '.js'],
   },
-  plugins: plugins,
-  externals: {
-      'jquery': 'jQuery',
-      'modal' : 'semantic-ui-modal'
-  }
+  plugins: plugins
 };
 
 module.exports = config;

From dad6d3786467855b61462a64bcccddc1c40563c2 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Fri, 30 Jun 2017 11:37:48 -0400
Subject: [PATCH 7/8] webpack configuration and small js fix. add fix/#130 and
 #173

update webpack configuration and js plugin file so it does not include
semantic-ui-modal in final bundle.
---
 js/src/index.js                | 2 +-
 js/src/plugin.js               | 4 +---
 js/src/plugins/addParams.js    | 3 +--
 js/src/plugins/ajaxec.js       | 2 --
 js/src/plugins/createModal.js  | 2 --
 js/src/plugins/reloadView.js   | 1 -
 js/src/plugins/spinner.js      | 3 +--
 js/webpack.config.js           | 7 ++++---
 src/Form.php                   | 2 +-
 template/semantic-ui/html.html | 1 +
 template/semantic-ui/html.pug  | 1 +
 11 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/js/src/index.js b/js/src/index.js
index 97e1023036..dfc759d236 100644
--- a/js/src/index.js
+++ b/js/src/index.js
@@ -12,4 +12,4 @@ registerPlugin('spinner', spinner);
 registerPlugin('reloadView', reloadView);
 registerPlugin('ajaxec', ajaxec);
 registerPlugin('addParams', addParams, true);
-registerPlugin('createModal', createModal);
\ No newline at end of file
+registerPlugin('createModal', createModal);
diff --git a/js/src/plugin.js b/js/src/plugin.js
index 803f09a11a..13d6dde4c2 100644
--- a/js/src/plugin.js
+++ b/js/src/plugin.js
@@ -1,5 +1,3 @@
-var $ = require('jquery');
-
 /* https://gist.github.com/monkeymonk/c08cb040431f89f99928132ca221d647 */
 
 /**
@@ -48,4 +46,4 @@ export default function plugin(pluginName, className, shortHand = false) {
 
     // - No conflict
     $.fn[pluginName].noConflict = () => $.fn[pluginName] = old;
-}
\ No newline at end of file
+}
diff --git a/js/src/plugins/addParams.js b/js/src/plugins/addParams.js
index 13da16b589..843186e762 100644
--- a/js/src/plugins/addParams.js
+++ b/js/src/plugins/addParams.js
@@ -1,4 +1,3 @@
-const $ = require('jquery');
 
 export default class addParams {
     constructor(element, options) {
@@ -15,4 +14,4 @@ export default class addParams {
 addParams.DEFAULTS = {
     url: null,
     params: {},
-}
\ No newline at end of file
+}
diff --git a/js/src/plugins/ajaxec.js b/js/src/plugins/ajaxec.js
index 91c24fc122..97b45ce051 100644
--- a/js/src/plugins/ajaxec.js
+++ b/js/src/plugins/ajaxec.js
@@ -1,11 +1,9 @@
-const $ = require('jquery');
 
 export default class ajaxec {
     constructor(element, options) {
         const $element = $(element);
 
         // ask for user confirmation just before
-        // TODO: because this is constructor, button can't be clicked again :(
         if (options.confirm) {
             if (!confirm(options.confirm)) {
                 return ;
diff --git a/js/src/plugins/createModal.js b/js/src/plugins/createModal.js
index d9c8bce987..5a532deed1 100644
--- a/js/src/plugins/createModal.js
+++ b/js/src/plugins/createModal.js
@@ -1,5 +1,3 @@
-const $ = require('jquery');
-const modal = require('semantic-ui-modal');
 
 export default class createModal {
   constructor(element, options) {
diff --git a/js/src/plugins/reloadView.js b/js/src/plugins/reloadView.js
index 60a943b75a..c6656bd655 100644
--- a/js/src/plugins/reloadView.js
+++ b/js/src/plugins/reloadView.js
@@ -1,4 +1,3 @@
-const $ = require('jquery');
 
 export default class reloadView {
     constructor(element, options) {
diff --git a/js/src/plugins/spinner.js b/js/src/plugins/spinner.js
index b7189dc146..cd4eafff8a 100644
--- a/js/src/plugins/spinner.js
+++ b/js/src/plugins/spinner.js
@@ -1,4 +1,3 @@
-const $ = require('jquery');
 
 export default class spinner {
     constructor(element, options) {
@@ -53,4 +52,4 @@ spinner.DEFAULTS = {
     centered: false,
     baseDimmerMarkup: '<div class="ui dimmer"></div>',
     baseLoaderMarkup: '<div class="ui loader"></div>',
-};
\ No newline at end of file
+};
diff --git a/js/webpack.config.js b/js/webpack.config.js
index 09e3ac77a5..0737b30929 100644
--- a/js/webpack.config.js
+++ b/js/webpack.config.js
@@ -4,11 +4,12 @@ const webpack = require('webpack');
 const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
 const path = require('path');
 const env  = require('yargs').argv.env; // use --env with webpack 2
-//const nodeExternals = require('webpack-node-externals');
 
 let libraryName = 'atk4JS';
 
-let plugins = [], outputFile;
+let plugins = [
+
+], outputFile;
 
 if (env === 'build') {
   plugins.push(new UglifyJsPlugin({ minimize: true }));
@@ -41,7 +42,7 @@ const config = {
       // }
     ]
   },
-  externals: {modal: 'semantic-ui-modal', jquery: 'jQuery'},
+  externals: {jquery: 'jQuery'},
   resolve: {
     modules: [path.resolve('./src'), path.join(__dirname, 'node_modules')],
     extensions: ['.json', '.js'],
diff --git a/src/Form.php b/src/Form.php
index 73628503a0..75219f7f08 100644
--- a/src/Form.php
+++ b/src/Form.php
@@ -431,7 +431,7 @@ public function ajaxSubmit()
         $this->add(new View(['element'=>'input']))
             ->setAttr('name', $cb->name)
             ->setAttr('value', 'submit')
-            ->setAttr('type', 'hidden');
+            ->setStyle(['display'=>'none']);
 
         $cb->set(function () {
             try {
diff --git a/template/semantic-ui/html.html b/template/semantic-ui/html.html
index b4254e6c6f..c23106f5ec 100644
--- a/template/semantic-ui/html.html
+++ b/template/semantic-ui/html.html
@@ -20,6 +20,7 @@
               var m = $("<div>").appendTo("body").addClass("ui scrolling modal").html(response.message);
               m.modal({duration: 100, onHide: function() { m.children().remove(); return true; }}).modal("show");
           }
+          this.data = new Object();
           return true;
       }
       $.fn.api.settings.onFailure = function(response) {
diff --git a/template/semantic-ui/html.pug b/template/semantic-ui/html.pug
index 5a84a813ae..311858b5ea 100644
--- a/template/semantic-ui/html.pug
+++ b/template/semantic-ui/html.pug
@@ -22,6 +22,7 @@ html(lang="{lang}en{/}")
                 var m = $("<div>").appendTo("body").addClass("ui scrolling modal").html(response.message);
                 m.modal({duration: 100, onHide: function() { m.children().remove(); return true; }}).modal("show");
             }
+            this.data = new Object();
             return true;
         }
         $.fn.api.settings.onFailure = function(response) {

From bd0ada68413cb09e55c72fe821e548911dce975c Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Fri, 30 Jun 2017 18:16:28 -0400
Subject: [PATCH 8/8] move $.fn function to atk4JS file. Enhance ajax error
 display.

---
 js/src/atk4-semantic-ui.js     | 56 ++++++++++++++++++++++++++++++++++
 js/src/index.js                |  1 +
 template/semantic-ui/html.html | 31 -------------------
 template/semantic-ui/html.pug  | 30 ------------------
 4 files changed, 57 insertions(+), 61 deletions(-)
 create mode 100644 js/src/atk4-semantic-ui.js

diff --git a/js/src/atk4-semantic-ui.js b/js/src/atk4-semantic-ui.js
new file mode 100644
index 0000000000..f7fa62f83e
--- /dev/null
+++ b/js/src/atk4-semantic-ui.js
@@ -0,0 +1,56 @@
+/**
+ * Handle api server response.
+ */
+
+(function ($, window, document, undefined) {
+
+    $.fn.api.settings.onResponse = function (response) {
+        if (response.success) {
+            try {
+                if (response && response.html && response.id) {
+                    var result = $('#'+response.id).replaceWith(response.html);
+                    if (!result.length) {
+                        throw({message:'Unable to replace element with id: '+ response.id});
+                    }
+                }
+                if (response && response.eval) {
+                    var result = function(){ eval(response.eval.replace(/<\/?script>/g, '')); }.call(this.obj);
+                }
+                return {success:true};
+            } catch (e) {
+                //send our eval or replaceWith error to successTest
+                return {success:false, error: 'Error in ajax replace or eval:\n' + e.message };
+            }
+        } else {
+            //catch application error and display them in a new modal window.
+            var m = $("<div>").appendTo("body").addClass("ui scrolling modal").html(response.message);
+            m.modal({duration: 100, onHide: function() { m.children().remove(); return true; }}).modal("show");
+            return {success:true};
+        }
+    }
+
+    $.fn.api.settings.successTest = function(response) {
+        if(response.success){
+            this.data = {};
+            return true;
+        } else if (response.error) {
+            alert(response.error);
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    $.fn.api.settings.onFailure = function(response) {
+        var w = window.open(null,'Error in JSON response','height=1000,width=1100,location=no,menubar=no,scrollbars=yes,status=no,titlebar=no,toolbar=no');
+        if(w){
+            w.document.write('<h5>Error in JSON response</h5>');
+            w.document.write(response);
+            w.document.write('<center><input type=button onclick="window.close()" value="Close"></center>');
+        }else{
+            alert("Error in ajaxec response"+response);
+        }
+    }
+
+}) (jQuery, window, document);
+
diff --git a/js/src/index.js b/js/src/index.js
index dfc759d236..0b259c6713 100644
--- a/js/src/index.js
+++ b/js/src/index.js
@@ -1,3 +1,4 @@
+import 'atk4-semantic-ui';
 import registerPlugin from './plugin';
 
 // Import our plugins
diff --git a/template/semantic-ui/html.html b/template/semantic-ui/html.html
index c23106f5ec..bedf372810 100644
--- a/template/semantic-ui/html.html
+++ b/template/semantic-ui/html.html
@@ -3,37 +3,6 @@
   <head>
     <title>{title}Agile UI - Untitled Project{/}</title>{$meta}
     <meta charset="utf-8">{$HEAD}
-    <script>
-      $.fn.api.settings.successTest = function(response) {
-          if(response.success){
-              if (response && response.html && response.id) {
-                  $('#'+response.id).replaceWith(response.html);
-              }
-              if (response && response.eval) {
-                  try {
-                      var result = function(){ eval(response.eval.replace(/<\/?script>/g, '')); }.call(this.obj);
-                  } catch (e) {
-
-                  }
-              }
-          } else {
-              var m = $("<div>").appendTo("body").addClass("ui scrolling modal").html(response.message);
-              m.modal({duration: 100, onHide: function() { m.children().remove(); return true; }}).modal("show");
-          }
-          this.data = new Object();
-          return true;
-      }
-      $.fn.api.settings.onFailure = function(response) {
-          w=window.open(null,'Error in JSON response','height=1000,width=1100,location=no,menubar=no,scrollbars=yes,status=no,titlebar=no,toolbar=no');
-          if(w){
-              w.document.write('<h5>Error in JSON response</h5>');
-              w.document.write(response);
-              w.document.write('<center><input type=button onclick="window.close()" value="Close"></center>');
-          }else{
-              alert("Error in ajaxec response"+response);
-          }
-      }
-    </script>
     <style type="text/css">{$style}</style>
   </head>
   <body class="{$class}">{$Content}</body>
diff --git a/template/semantic-ui/html.pug b/template/semantic-ui/html.pug
index 311858b5ea..3921abd3f6 100644
--- a/template/semantic-ui/html.pug
+++ b/template/semantic-ui/html.pug
@@ -5,36 +5,6 @@ html(lang="{lang}en{/}")
     | {$meta}
     meta(charset='utf-8')
     | {$HEAD}
-    script.
-        $.fn.api.settings.successTest = function(response) {
-            if(response.success){
-                if (response && response.html && response.id) {
-                    $('#'+response.id).replaceWith(response.html);
-                }
-                if (response && response.eval) {
-                    try {
-                        var result = function(){ eval(response.eval.replace(/<\/?script>/g, '')); }.call(this.obj);
-                    } catch (e) {
-
-                    }
-                }
-            } else {
-                var m = $("<div>").appendTo("body").addClass("ui scrolling modal").html(response.message);
-                m.modal({duration: 100, onHide: function() { m.children().remove(); return true; }}).modal("show");
-            }
-            this.data = new Object();
-            return true;
-        }
-        $.fn.api.settings.onFailure = function(response) {
-            w=window.open(null, 'Error in JSON response', 'height=1000,width=1100,location=no,menubar=no,scrollbars=yes,status=no,titlebar=no,toolbar=no');
-            if(w){
-                w.document.write('<h5>Error in JSON response</h5>');
-                w.document.write(response);
-                w.document.write('<center><input type=button onclick="window.close()" value="Close"></center>');
-            }else{
-                alert("Error in ajaxec response"+response);
-            }
-        }
     style(type='text/css')
       | {$style}
   body(class="{$class}")