Added spinner support

- Spinner is not optional. I see it as a missing part of the modal. - Spinner uses a css class .modal-spinner which by default adds a spinner background image but if you want to show text or HTML, you can use the $.modal.defaults.spinnerHtml option. - If AJAX get request fails, the spinner is closed and the modal will not appear.
kylefox · Apr 19, 2012 · 2fc94c7 · 2fc94c7
1 parent f0b47e1
commit 2fc94c7
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 92 deletions.
diff --git a/README.md b/README.md
@@ -132,29 +132,8 @@ So, you could do something like this:
 
 ## Basic support
 
-The following additional events are triggered for AJAX modals:
+jQuery Modal uses $.get for basic AJAX support.
 
- $.modal.AJAX_BEFORE_SEND = 'modal:ajax:before-send';
- $.modal.AJAX_SUCCESS = 'modal:ajax:success';
-
-The `AJAX_BEFORE_SEND` handler receives no arguments. The `AJAX_SUCCESS` handler receives a single argument, which is the HTML returned by the server. These handlers do not receive the modal object as a parameter because it does not exist until _after_ `AJAX_SUCCESS` is fired.
-
-You can use this functionality to show & hide visual feedback. jquery-modal comes with a couple basic spinner widgets.
-
-Add the spinner to your markup:
-
- <div class="modal-spinner"></div>
-
-Bind to AJAX events to show/hide:
-
- $(document).on($.modal.AJAX_BEFORE_SEND, function() {
-  $('.modal-spinner').show();
- });
-
- $(document).on($.modal.AJAX_SUCCESS, function() {
-  $('.modal-spinner').hide();
- });
-
 ## More advanced AJAX handling
 
 It's a good idea to provide more robust AJAX handling -- error handling, in particular. Instead of accommodating the myriad [`$.ajax` options](https://api.jquery.com/jQuery.ajax/) jQuery provides, jquery-modal makes it possible to directly modify the AJAX request itself.
@@ -194,4 +173,4 @@ I would love help improving this plugin, particularly with:
 * Making the code as concise/efficient as possible
 * Bug fixes & browser compatibility
 
-Please fork and send pull requests, or create an [issue](https://github.com/kylefox/jquery-modal/issues).
+Please fork and send pull requests, or create an [issue](https://github.com/kylefox/jquery-modal/issues).
diff --git a/examples/index.html b/examples/index.html
@@ -145,45 +145,6 @@ <h2>Example 3: resizing</h2>
 <h2>Example 4: AJAX</h2>
 <p>This <a href="ajax.html" rel="modal:open">example</a> loads HTML with AJAX.</p>
 
-<p>If you want to show a spinner for immediate feedback, just add it to your markup:</p>
-
-<pre><code>&lt;div class="modal-spinner"&gt;&lt;/div&gt;</div></pre></code>
-
-<p>and use the AJAX events to show/hide it</p>
-
-<pre><code>$(document).on($.modal.AJAX_BEFORE_SEND, function() {
- $('.modal-spinner').show();
-});
-
-$(document).on($.modal.AJAX_SUCCESS, function() {
- $('.modal-spinner').hide();
-});
-</pre></code>
-
-<p>The <code>modal.css</code> file includes three basic styles. Apply the styles by adding the appropriate class names:</p>
-
-<table>
- <tr>
- <td><a href="#default-spinner" rel="spinner">Spinner #1</a></td>
- <td><pre><code>&lt;div class="modal-spinner"&gt;&lt;/div&gt;</div></pre></code></td> 
- </tr>
-
- <tr>
- <td><a href="#alt-spinner-1" rel="spinner">Spinner #2</a></td>
- <td><pre><code>&lt;div class="modal-spinner alt1"&gt;&lt;/div&gt;</div></pre></code></td> 
- </tr>
-
- <tr>
- <td><a href="#alt-spinner-2" rel="spinner">Spinner #3</a></td>
- <td><pre><code>&lt;div class="modal-spinner alt2"&gt;&lt;/div&gt;</div></pre></code></td> 
- </tr>
-
-</table>
-
-<div id="default-spinner" class="modal-spinner"></div>
-<div id="alt-spinner-1" class="modal-spinner alt1"></div>
-<div id="alt-spinner-2" class="modal-spinner alt2"></div>
-
 <p>If you want more spinner styles, check out <a href="https://ajaxload.info/">ajaxload.info</a>.</p> 
 
 <hr />
@@ -207,15 +168,6 @@ <h2>Example 5: the un-closable window</h2>
 <script type="text/javascript" charset="utf-8">
  $(function() {
 
- $('a[rel="spinner"]').on('click', function() {
- var spinner = $($(this).attr('href'));
- spinner.show();
- setTimeout(function() {
- spinner.fadeOut();
- }, 1500);
- return false;
- });
-
  function log_modal_event(event, modal) {
  if(typeof console != 'undefined' && console.log) console.log("[event] " + event.type);
  };
@@ -226,16 +178,6 @@ <h2>Example 5: the un-closable window</h2>
  $(document).on($.modal.OPEN, log_modal_event);
  $(document).on($.modal.BEFORE_CLOSE, log_modal_event);
  $(document).on($.modal.CLOSE, log_modal_event);
- $(document).on($.modal.AJAX_BEFORE_SEND, log_modal_event);
- $(document).on($.modal.AJAX_SUCCESS, log_modal_event);
-
- $(document).on($.modal.AJAX_BEFORE_SEND, function() {
- $('#default-spinner').show();
- });
-
- $(document).on($.modal.AJAX_SUCCESS, function() {
- $('#default-spinner').hide();
- });
 
  $('#more').click(function() {
  $(this).parent().after($(this).parent().next().clone());
@@ -255,4 +197,4 @@ <h2>Example 5: the un-closable window</h2>
  });
 </script>
 </body> 
-</html>
+</html>
diff --git a/jquery.modal.js b/jquery.modal.js
@@ -20,13 +20,15 @@
  } else {
  this.$elm = $('<div>');
  remove = function(event, modal) { modal.elm.remove(); };
- el.trigger($.modal.AJAX_BEFORE_SEND);
- $.get(target, function(html) {
- if (!current) return;
- el.trigger($.modal.AJAX_SUCCESS, [html]);
- current.$elm.html(html).appendTo('body').on($.modal.CLOSE, remove);
- current.open();
- });
+ this.showSpinner();
+ $.get(target).done(function(html) {
+ if (!current) return;
+ current.$elm.empty().append(html).appendTo('body').on($.modal.CLOSE, remove);
+ current.hideSpinner();
+ current.open();
+ }).fail(function(error) {
+ current.hideSpinner();
+ });
  }
  } else {
  this.$elm = el;
@@ -90,6 +92,17 @@
  this.$elm.trigger($.modal.CLOSE, [this._ctx()]);
  },
 
+ showSpinner: function() {
+ this.spinner = $('<div class="' + this.options.modalClass + '-spinner"></div>')
+ .append(this.options.spinnerHtml);
+ $('body').append(this.spinner);
+ this.spinner.show();
+ },
+
+ hideSpinner: function() {
+ this.spinner.fadeOut();
+ },
+
  center: function() {
  this.$elm.css({
  position: 'fixed',
@@ -130,6 +143,7 @@
  clickClose: true,
  closeText: 'Close',
  modalClass: "modal",
+ spinnerHtml: null,
  showClose: true
  };
 
@@ -140,8 +154,6 @@
  $.modal.OPEN = 'modal:open';
  $.modal.BEFORE_CLOSE = 'modal:before-close';
  $.modal.CLOSE = 'modal:close';
- $.modal.AJAX_BEFORE_SEND = 'modal:ajax:before-send';
- $.modal.AJAX_SUCCESS = 'modal:ajax:success';
 
  $.fn.modal = function(options){
  if (this.length === 1) {
@@ -156,4 +168,4 @@
  event.preventDefault();
  $(this).modal();
  });
-})(jQuery);
+})(jQuery);