modal events

README.md

@@ -87,7 +87,7 @@ echo ModalAjax::widget([
 
 ## Usage in grid 
 
-### Index View - Create
+### Index View - Create (Single Modal Mode)
 ```php
 use lo\widgets\modal\ModalAjax;
 
@@ -103,12 +103,18 @@ echo ModalAjax::widget([
 
  'options' => ['class' => 'header-primary'],
  'autoClose' => true,
- 'pjaxContainer' => '#grid-company-pjax'
+ 'pjaxContainer' => '#grid-company-pjax',
 
 ]);
 ```
 
-### Index View - Update
+### Index View - Update (Multi Modal Mode)
+Grid example with data-scenario
+```html
+<a class="btn" href="/site/update?id=10" title="Edit ID-10" data-scenario="hello">Hello</a>
+<a class="btn" href="/site/update?id=20" title="Edit ID-20" data-scenario="goodbye">Goodbye</a>
+```
+Modal Ajax with events
 ```php
 use lo\widgets\modal\ModalAjax;
 
@@ -118,8 +124,21 @@ echo ModalAjax::widget([
  'ajaxSubmit' => true, // Submit the contained form as ajax, true by default
 
  'options' => ['class' => 'header-primary'],
- 'autoClose' => true,
- 'pjaxContainer' => '#grid-company-pjax'
+ 'pjaxContainer' => '#grid-company-pjax',
+ 'events'=>[
+ ModalAjax::EVENT_MODAL_SUBMIT => new \yii\web\JsExpression("
+ function(event, data, status, xhr, selector) {
+ if(status){
+ if(selector.data('scenario') == 'hello'){
+ alert('hello');
+ } else {
+ alert('goodbye');
+ }
+ $(this).modal('toggle');
+ }
+ }
+ ")
+ ]
 
 ]);
 ```
@@ -130,7 +149,7 @@ echo ModalAjax::widget([
 On top if the basic twitter bootstrap modal events the following events are triggered
 
 
-### `kbModalBeforeShow`
+### `kbModalBeforeShow` (ModalAjax::EVENT_BEFORE_SHOW)
 This event is triggered right before the view for the form is loaded. Additional parameters available with this event are:
 - `xhr`: _XMLHttpRequest_, the jQuery XML Http Request object used for this transaction.
 - `settings`: _object_, the jQuery ajax settings for this transaction.
@@ -141,7 +160,7 @@ $('#createCompany').on('kbModalBeforeShow', function(event, xhr, settings) {
 });
 ```
 
-### `kbModalShow`
+### `kbModalShow` (ModalAjax::EVENT_MODAL_SHOW)
 This event is triggered after the view for the form is successful loaded. Additional parameters available with this event are:
 - `data`: _object_, the data object sent via server's response.
 - `status`: _string_, the jQuery AJAX success text status.
@@ -153,7 +172,7 @@ $('#createCompany').on('kbModalShow', function(event, data, status, xhr) {
 });
 ```
 
-### `kbModalBeforeSubmit`
+### `kbModalBeforeSubmit` (ModalAjax::EVENT_BEFORE_SUBMIT)
 This event is triggered right before the form is submitted. Additional parameters available with this event are:
 - `xhr`: _XMLHttpRequest_, the jQuery XML Http Request object used for this transaction.
 - `settings`: _object_, the jQuery ajax settings for this transaction.
@@ -164,14 +183,15 @@ $('#createCompany').on('kbModalBeforeSubmit', function(event, xhr, settings) {
 });
 ```
 
-### `kbModalSubmit`
+### `kbModalSubmit` (ModalAjax::EVENT_MODAL_SUBMIT)
 This event is triggered after the form is successful submitted. Additional parameters available with this event are:
 - `data`: _object_, the data object sent via server's response.
 - `status`: _string_, the jQuery AJAX success text status.
 - `xhr`: _XMLHttpRequest_, the jQuery XML Http Request object used for this transaction.
+- `selector`: _object_, the jQuery selector for embed logic after submit in multi Modal.
 
 ```js
-$('#createCompany').on('kbModalSubmit', function(event, data, status, xhr) {
+$('#createCompany').on('kbModalSubmit', function(event, data, status, xhr, selector) {
  console.log('kbModalSubmit');
  // You may call pjax reloads here
 });

src/ModalAjax.php

@@ -6,6 +6,7 @@
 use yii\bootstrap\Modal;
 use yii\helpers\Html;
 use yii\helpers\Url;
+use yii\web\JsExpression;
 use yii\web\View;
 
 /**
@@ -18,6 +19,19 @@ class ModalAjax extends Modal
  const MODE_SINGLE = 'id';
  const MODE_MULTI = 'multi';
 
+ /**
+ * events
+ */
+ const EVENT_BEFORE_SHOW = 'kbModalBeforeShow';
+ const EVENT_MODAL_SHOW = 'kbModalShow';
+ const EVENT_BEFORE_SUBMIT = 'kbModalBeforeSubmit';
+ const EVENT_MODAL_SUBMIT = 'kbModalSubmit';
+
+ /**
+ * @var array
+ */
+ public $events = [];
+
  /**
  * The selector to get url request when modal is opened for multy mode
  * @var string
@@ -61,7 +75,7 @@ protected function renderHeader()
  {
  $button = $this->renderCloseButton();
  if ($button !== null) {
- $this->header = $button . "\n<span>" . $this->header."</span>\n";
+ $this->header = $button . "\n<span>" . $this->header . "</span>\n";
  }
  if ($this->header !== null) {
  Html::addCssClass($this->headerOptions, ['widget' => 'modal-header']);
@@ -108,8 +122,11 @@ public function run()
  break;
  }
 
- $this->registerAutoClose($id, $view);
- $this->registerPjaxReload($id, $view);
+ if (!isset($this->events[self::EVENT_MODAL_SUBMIT])) {
+ $this->defaultSubmitEvent();
+ }
+
+ $this->registerEvents($id, $view);
  }
 
  /**
@@ -148,6 +165,7 @@ protected function registerMultyModal($id, $view)
  jQuery('#$id').find('.modal-header span').html(title);
  
  jQuery('#$id').kbModalAjax({
+ selector: $(this),
  url: bs_url,
  ajaxSubmit: $this->ajaxSubmit
  });
@@ -156,38 +174,47 @@ protected function registerMultyModal($id, $view)
  }
 
  /**
- * @param $id
- * @param View $view
+ * register pjax event
  */
- protected function registerAutoClose($id, $view)
+ protected function defaultSubmitEvent()
  {
+ $expression = [];
+
  if ($this->autoClose) {
- $view->registerJs("
- jQuery('#$id').on('kbModalSubmit', function(event, data, status, xhr) {
+ $expression[] = "$(this).modal('toggle');";
+ }
+
+ if ($this->pjaxContainer) {
+ $expression[] = "$.pjax.reload({container : '$this->pjaxContainer'});";
+ }
+
+ $script = implode("\r\n", $expression);
+
+ $this->events = [
+ self::EVENT_MODAL_SUBMIT => new JsExpression("
+ function(event, data, status, xhr) {
  if(status){
- $(this).modal('toggle');
+ $script
  }
- });
- ");
- }
+ }
+ ")
+ ];
  }
 
  /**
  * @param $id
  * @param View $view
  */
- protected function registerPjaxReload($id, $view)
+ protected function registerEvents($id, $view)
  {
- if ($this->pjaxContainer) {
- $view->registerJs("
- jQuery('#$id').on('kbModalSubmit', function(event, data, status, xhr) {
- if(status){
- $.pjax.reload({
- container : '$this->pjaxContainer'
- });
- }
- });
- ");
+ $js = [];
+ foreach ($this->events as $event => $expression) {
+ $js[] = ".on('$event', $expression)";
+ }
+
+ if ($js) {
+ $script = "jQuery('#$id')" . implode("\r\n", $js);
+ $view->registerJs($script);
  }
  }
 }

src/assets/js/kb-modal-ajax.js

@@ -34,6 +34,7 @@
  };
 
  ModalAjax.prototype.init = function (options) {
+ this.selector = options.selector || null;
  this.initalRequestUrl = options.url;
  this.ajaxSubmit = options.ajaxSubmit || true;
  jQuery(this.element).on('show.bs.modal', this.shown.bind(this));
@@ -146,7 +147,7 @@
 
  // Convert form to ajax submit
  jQuery.ajax({
- type: form.attr('method'),
+ method: form.attr('method'),
  url: form.attr('action'),
  data: form.serialize(),
  context: this,
@@ -160,7 +161,7 @@
  this.injectHtml(data);
  status = false;
  }
- jQuery(this.element).triggerHandler('kbModalSubmit', [data, status, xhr]);
+ jQuery(this.element).triggerHandler('kbModalSubmit', [data, status, xhr, this.selector]);
  }
  });