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](http://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="http://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);