$(function(){ //追加と検索の表示切替 $('.add_btn').click(function(){ $('#add').toggleClass('none'); $('#result').toggleClass('none'); }); //追加の登録ボタンを押したとき→登録処理 $('.put_btn').click(function(){ put_customer(); return false; }); }); //お客様データの追加 function put_customer() { //data取得・作成 var name = $('input[name="data[Customer][n]"]').val(); var kana = $('input[name="data[Customer][k]"]').val(); var mail = $('input[name="data[Customer][m]"]').val(); var call1 = $('input[name="data[Customer][c1]"]').val(); var call2 = $('input[name="data[Customer][c2]"]').val(); var address = $('input[name="data[Customer][a]"]').val(); var data = {'Customer':{'name':name,'name_kana':kana,'mail':mail,'call1':call1,'call2':call2,'address':address}}; data = JSON.stringify(data); //spinnerのオプション設定 var opts = { position: 'center', hide: true }; //ajax $.ajax({ type: "POST", url: location.pathname + '/add.json', data: data, beforeSend:function(){ $('.put_btn').spinner(opts); }, success: function(msg){ $('.error').empty(); $('.success').empty(); //バリデーションエラー if(msg['error']){ for(var e in msg['error']){ $('.error').append(msg['error'][e][0] + '<br>'); } $('.error').append('<br>'); //登録エラー }else if(!msg['msg']){ $('.error').append('登録できませんでした。恐れ入りますが再度お試しください。<br><br>'); //登録成功 }else{ $('.success').append('登録しました。<br><br>'); //フォームのクリア $('#add input').val(''); } }, error:function(){ $('.error').append('登録できませんでした。恐れ入りますが再度お試しください。<br><br>'); }, complete:function(){ $('.put_btn').spinner('remove'); } }); }
どうももうSpinnerプラグインは削除されてるっぽい??再掲。
/* Spinner provides a simple approach for adding and removing a preloader for your web applications. Usage is as simple as calling $('elem').spinner() and subsequently $('elem').spinner.remove(). You may create your own preloader at http://www.ajaxload.info. Please note that if you use a custom preloader, you must pass in the new height and width as options. Copyright (C) 2010 Corey Ballou Website: http://www.jqueryin.com Documentation: http://www.jqueryin.com/projects/spinner-jquery-preloader-plugin/ This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. */ (function($) { $.fn.spinner = function(options) { var opts = $.extend({}, $.fn.spinner.defaults, options); return this.each(function() { var l=0, t=0, w=0, h=0, shim=0, $s; var $this = $(this); // removal handling if (options == 'remove' || options == 'close') { var $s = $this.data('spinner'); var o = $this.data('opts'); if (typeof $s != 'undefined') { $s.remove(); $this.removeData('spinner').removeData('opts'); if (o.hide) $this.css('visibility', 'visible'); o.onFinish.call(this); return; } } // retrieve element positioning var pos = $this.offset(); w = $this.outerWidth(); h = $this.outerHeight(); // calculate vertical centering if (h > opts.height) shim = Math.round((h - opts.height)/ 2); else if (h < opts.height) shim = 0 - Math.round((opts.height - h) / 2); t = pos.top + shim + 'px'; // calculate horizontal positioning if (opts.position == 'right') { l = pos.left + w + 10 + 'px'; } else if (opts.position == 'left') { l = pos.left - opts.width - 10 + 'px'; } else { l = pos.left + Math.round(.5 * w) - Math.round(.5 * opts.width) + 'px'; } // call start callback opts.onStart.call(this); // hide element? if (opts.hide) $this.css('visibility', 'hidden'); // create the spinner and attach $s = $('<img src="' + opts.img + '" style="position: absolute; left: ' + l +'; top: ' + t + '; width: ' + opts.width + 'px; height: ' + opts.height + 'px; z-index: ' + opts.zIndex + ';" />').appendTo('body'); // removal handling $this.data('spinner', $s).data('opts', opts); }); }; // default spinner options $.fn.spinner.defaults = { position : 'right' // left, right, center , img : 'img/spinner.gif' // path to spinner img , height : 16 // height of spinner img , width : 16 // width of spinner img , zIndex : 1001 // z-index of spinner , hide : false // whether to hide the elem , onStart : function(){ } // start callback , onFinish : function(){ } // end callback }; })(jQuery);