jquery.form.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  1. /**
  2. * form - jQuery EasyUI
  3. *
  4. * Copyright (c) 2009-2013 www.jeasyui.com. All rights reserved.
  5. *
  6. * Licensed under the GPL or commercial licenses
  7. * To use it on other terms please contact us: info@jeasyui.com
  8. * http://www.gnu.org/licenses/gpl.txt
  9. * http://www.jeasyui.com/license_commercial.php
  10. */
  11. (function($){
  12. /**
  13. * submit the form
  14. */
  15. function ajaxSubmit(target, options){
  16. options = options || {};
  17. var param = {};
  18. if (options.onSubmit){
  19. if (options.onSubmit.call(target, param) == false) {
  20. return;
  21. }
  22. }
  23. var form = $(target);
  24. if (options.url){
  25. form.attr('action', options.url);
  26. }
  27. var frameId = 'easyui_frame_' + (new Date().getTime());
  28. var frame = $('<iframe id='+frameId+' name='+frameId+'></iframe>')
  29. .attr('src', window.ActiveXObject ? 'javascript:false' : 'about:blank')
  30. .css({
  31. position:'absolute',
  32. top:-1000,
  33. left:-1000
  34. });
  35. var t = form.attr('target'), a = form.attr('action');
  36. form.attr('target', frameId);
  37. var paramFields = $();
  38. try {
  39. frame.appendTo('body');
  40. frame.bind('load', cb);
  41. for(var n in param){
  42. var f = $('<input type="hidden" name="' + n + '">').val(param[n]).appendTo(form);
  43. paramFields = paramFields.add(f);
  44. }
  45. form[0].submit();
  46. } finally {
  47. form.attr('action', a);
  48. t ? form.attr('target', t) : form.removeAttr('target');
  49. paramFields.remove();
  50. }
  51. var checkCount = 10;
  52. function cb(){
  53. frame.unbind();
  54. var body = $('#'+frameId).contents().find('body');
  55. var data = body.html();
  56. if (data == ''){
  57. if (--checkCount){
  58. setTimeout(cb, 100);
  59. return;
  60. }
  61. return;
  62. }
  63. var ta = body.find('>textarea');
  64. if (ta.length){
  65. data = ta.val();
  66. } else {
  67. var pre = body.find('>pre');
  68. if (pre.length){
  69. data = pre.html();
  70. }
  71. }
  72. if (options.success){
  73. options.success(data);
  74. }
  75. // try{
  76. // eval('data='+data);
  77. // if (options.success){
  78. // options.success(data);
  79. // }
  80. // } catch(e) {
  81. // if (options.failure){
  82. // options.failure(data);
  83. // }
  84. // }
  85. setTimeout(function(){
  86. frame.unbind();
  87. frame.remove();
  88. }, 100);
  89. }
  90. }
  91. /**
  92. * load form data
  93. * if data is a URL string type load from remote site,
  94. * otherwise load from local data object.
  95. */
  96. function load(target, data){
  97. if (!$.data(target, 'form')){
  98. $.data(target, 'form', {
  99. options: $.extend({}, $.fn.form.defaults)
  100. });
  101. }
  102. var opts = $.data(target, 'form').options;
  103. if (typeof data == 'string'){
  104. var param = {};
  105. if (opts.onBeforeLoad.call(target, param) == false) return;
  106. $.ajax({
  107. url: data,
  108. data: param,
  109. dataType: 'json',
  110. success: function(data){
  111. _load(data);
  112. },
  113. error: function(){
  114. opts.onLoadError.apply(target, arguments);
  115. }
  116. });
  117. } else {
  118. _load(data);
  119. }
  120. function _load(data){
  121. var form = $(target);
  122. for(var name in data){
  123. var val = data[name];
  124. var rr = _checkField(name, val);
  125. if (!rr.length){
  126. var f = form.find('input[numberboxName="'+name+'"]');
  127. if (f.length){
  128. f.numberbox('setValue', val); // set numberbox value
  129. } else {
  130. $('input[name="'+name+'"]', form).val(val);
  131. $('textarea[name="'+name+'"]', form).val(val);
  132. $('select[name="'+name+'"]', form).val(val);
  133. }
  134. }
  135. _loadCombo(name, val);
  136. }
  137. opts.onLoadSuccess.call(target, data);
  138. validate(target);
  139. }
  140. /**
  141. * check the checkbox and radio fields
  142. */
  143. function _checkField(name, val){
  144. var rr = $(target).find('input[name="'+name+'"][type=radio], input[name="'+name+'"][type=checkbox]');
  145. rr._propAttr('checked', false);
  146. rr.each(function(){
  147. var f = $(this);
  148. if (f.val() == String(val) || $.inArray(f.val(), val) >= 0){
  149. f._propAttr('checked', true);
  150. }
  151. });
  152. return rr;
  153. }
  154. function _loadCombo(name, val){
  155. var form = $(target);
  156. var cc = ['combobox','combotree','combogrid','datetimebox','datebox','combo'];
  157. var c = form.find('[comboName="' + name + '"]');
  158. if (c.length){
  159. for(var i=0; i<cc.length; i++){
  160. var type = cc[i];
  161. if (c.hasClass(type+'-f')){
  162. if (c[type]('options').multiple){
  163. c[type]('setValues', val);
  164. } else {
  165. c[type]('setValue', val);
  166. }
  167. return;
  168. }
  169. }
  170. }
  171. }
  172. }
  173. /**
  174. * clear the form fields
  175. */
  176. function clear(target){
  177. $('input,select,textarea', target).each(function(){
  178. var t = this.type, tag = this.tagName.toLowerCase();
  179. if (t == 'text' || t == 'hidden' || t == 'password' || tag == 'textarea'){
  180. this.value = '';
  181. } else if (t == 'file'){
  182. var file = $(this);
  183. file.after(file.clone().val(''));
  184. file.remove();
  185. } else if (t == 'checkbox' || t == 'radio'){
  186. this.checked = false;
  187. } else if (tag == 'select'){
  188. this.selectedIndex = -1;
  189. }
  190. });
  191. if ($.fn.combo) $('.combo-f', target).combo('clear');
  192. if ($.fn.combobox) $('.combobox-f', target).combobox('clear');
  193. if ($.fn.combotree) $('.combotree-f', target).combotree('clear');
  194. if ($.fn.combogrid) $('.combogrid-f', target).combogrid('clear');
  195. validate(target);
  196. }
  197. function reset(target){
  198. target.reset();
  199. var t = $(target);
  200. if ($.fn.combo){t.find('.combo-f').combo('reset');}
  201. if ($.fn.combobox){t.find('.combobox-f').combobox('reset');}
  202. if ($.fn.combotree){t.find('.combotree-f').combotree('reset');}
  203. if ($.fn.combogrid){t.find('.combogrid-f').combogrid('reset');}
  204. if ($.fn.datebox){t.find('.datebox-f').datebox('reset');}
  205. if ($.fn.datetimebox){t.find('.datetimebox-f').datetimebox('reset');}
  206. if ($.fn.spinner){t.find('.spinner-f').spinner('reset');}
  207. if ($.fn.timespinner){t.find('.timespinner-f').timespinner('reset');}
  208. if ($.fn.numberbox){t.find('.numberbox-f').numberbox('reset');}
  209. if ($.fn.numberspinner){t.find('.numberspinner-f').numberspinner('reset');}
  210. validate(target);
  211. }
  212. /**
  213. * set the form to make it can submit with ajax.
  214. */
  215. function setForm(target){
  216. var options = $.data(target, 'form').options;
  217. var form = $(target);
  218. form.unbind('.form').bind('submit.form', function(){
  219. setTimeout(function(){
  220. ajaxSubmit(target, options);
  221. }, 0);
  222. return false;
  223. });
  224. }
  225. // function validate(target){
  226. // if ($.fn.validatebox){
  227. // var box = $('.validatebox-text', target);
  228. // if (box.length){
  229. // box.validatebox('validate');
  230. //// box.trigger('focus');
  231. //// box.trigger('blur');
  232. // var invalidbox = $('.validatebox-invalid:first', target).focus();
  233. // return invalidbox.length == 0;
  234. // }
  235. // }
  236. // return true;
  237. // }
  238. function validate(target){
  239. if ($.fn.validatebox){
  240. var t = $(target);
  241. t.find('.validatebox-text:not(:disabled)').validatebox('validate');
  242. var invalidbox = t.find('.validatebox-invalid');
  243. invalidbox.filter(':not(:disabled):first').focus();
  244. return invalidbox.length == 0;
  245. }
  246. return true;
  247. }
  248. function setValidation(target, novalidate){
  249. $(target).find('.validatebox-text:not(:disabled)').validatebox(novalidate ? 'disableValidation' : 'enableValidation');
  250. }
  251. $.fn.form = function(options, param){
  252. if (typeof options == 'string'){
  253. return $.fn.form.methods[options](this, param);
  254. }
  255. options = options || {};
  256. return this.each(function(){
  257. if (!$.data(this, 'form')){
  258. $.data(this, 'form', {
  259. options: $.extend({}, $.fn.form.defaults, options)
  260. });
  261. }
  262. setForm(this);
  263. });
  264. };
  265. $.fn.form.methods = {
  266. submit: function(jq, options){
  267. return jq.each(function(){
  268. ajaxSubmit(this, $.extend({}, $.fn.form.defaults, options||{}));
  269. });
  270. },
  271. load: function(jq, data){
  272. return jq.each(function(){
  273. load(this, data);
  274. });
  275. },
  276. clear: function(jq){
  277. return jq.each(function(){
  278. clear(this);
  279. });
  280. },
  281. reset: function(jq){
  282. return jq.each(function(){
  283. reset(this);
  284. });
  285. },
  286. validate: function(jq){
  287. return validate(jq[0]);
  288. },
  289. disableValidation: function(jq){
  290. return jq.each(function(){
  291. setValidation(this, true);
  292. });
  293. },
  294. enableValidation: function(jq){
  295. return jq.each(function(){
  296. setValidation(this, false);
  297. });
  298. }
  299. };
  300. $.fn.form.defaults = {
  301. url: null,
  302. onSubmit: function(param){return $(this).form('validate');},
  303. success: function(data){},
  304. onBeforeLoad: function(param){},
  305. onLoadSuccess: function(data){},
  306. onLoadError: function(){}
  307. };
  308. })(jQuery);