jquery-autosaveform:jQuery插件可简化自动保存表单

  • Y0_963927
    了解作者
  • 4.5KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-04 01:54
    上传日期
jQuery AutoSaveForm 作者Alan Blount alan+asf@zeroasterisk.com 链接 没有版权或许可。 做你喜欢的。 用法:设置任意数量的表格,默认选项 $("#my-container form").autoSaveForm(); 用法:通过ID,自定义选项设置一种表单 $("#MyForm").autoSaveForm({ autosave_frequency: 0, # autosave disabled autosave_onclick: "#my-container a[href]:not([rel])", # custom links to be bound as autosavefirst form_inputs: "select", # only considering select
jquery-autosaveform-master.zip
  • jquery-autosaveform-master
  • README.textile
    1.7KB
  • jquery.autosaveform.js
    10.2KB
内容介绍
/** * jQuery AutoSaveForm * * @author Alan Blount alan+asf@zeroasterisk.com * @version 1.0.2 * @date 2011.08.09 * @date 2013.05.07 * @link https://github.com/zeroasterisk/jquery-autosaveform * * NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE. * */ /* ### USAGE: setting up any number of forms, default options ### $("#my-container form").autoSaveForm(); ### USAGE: setting up one form by ID, custom options ### $("#MyForm").autoSaveForm({ autosave_frequency: 0, # autosave disabled autosave_onclick: "#my-container a[href]:not([rel])", # custom links to be bound as autosavefirst form_inputs: "select", # only considering selects in the form attr_data: "data-ASFcustom-serialize", # customize internal attributes for forms' data attr_status: "data-ASFcustom-status", # customize internal attributes for forms' status form_response_regex: "Saved" # save response must contain: Saved form_action: "/myform/submit.php" # over-ride the submit action for the form (edge case) }); ### EXTRA: bind event handlers for callbacks ### $("#MyForm").autoSaveForm({ form_response_regex: "Saved" }).bind("autosave_complete", function() { pageTracker._trackEvent("ajax", "autoSaveForm", window.location.href, $(this).attr("action")); }).bind("autosave_error", function() { pageTracker._trackEvent("ajax", "autoSaveFormERROR", window.location.href, $(this).attr("action")); }); ### EXTRA CONFIGURATIONS ### $.fn.ASF_beforeunload = false; # disable onbeforeunload functionality $.fn.ASF_beforeunload_message = "are you sure?"; # custom message before unload (if we need to prompt) $.fn.ASF_debug = true; # turn on debug messages in console */ (function ($) { // plugin options defaults (set per form) $.fn.ASF_option_defaults = { autosave_frequency: 500000, // set to number of miliseconds you want autosave to run... 0 to disable // 60 * 5 * 1000 = 5 min autosave_onclick: "body a[href]:not([rel])", form_inputs: "input, select, textarea", attr_data: "data-ASF-serialize", attr_status: "data-ASF-status", form_response_regex: "", // if set, the response must match to continue form_action: "" // would override form.action }; // plugin constants we keep track of, you shouldn't change $.fn.ASF_debug = false; $.fn.ASF_beforeunload = true; $.fn.ASF_beforeunload_message = "This page is asking you to confirm that you want to leave - any data you have entered may not be saved."; // primary function, setup forms $.fn.autoSaveForm = function (options) { if (!this.length) { return false; } // build main options before element iteration var options = $.extend({}, $.fn.ASF_option_defaults, options || {}); // iterate and reformat each matched element $(this).each(function (i, form) { // setup form $(form).data("ASF_options", options); var formData = $(form).find(options.form_inputs).serialize(); $(form).attr(options.attr_data, formData); $(form).attr(options.attr_status, "init"); if (parseInt(options.autosave_frequency) > 0) { // ensure form has an ID (how we are going to trigger after setTimeout) if (!$(form).attr("id")) { $(form).attr("id", "ASF"+$(window).data("ASF_forms").length+(new Date).getTime()); } // bind an action which re-triggers the setTimeout and triggers the autosave $(form).bind("autosave_periodic.autosaveform", function(e) { options = $(this).data("ASF_options"); // are we ready for autosave? if ($(this).data("ASF_periodic")=="ready") { asflog("ASF_periodic: ran", $(this)); $(this).trigger('autosave.autosaveform'); } // re-trigger setTimeout("$('#"+$(this).attr("id")+"').trigger('autosave_periodic.autosaveform');", options.autosave_frequency); }).trigger("autosave_periodic.autosaveform").data("ASF_periodic", "ready"); } // setup form autosave event $(form).bind("autosave.autosaveform", function(e) { if ($(this).ASF_status()=="unchanged") { return true; // no changes } options = $(this).data("ASF_options"); // check jQueryTools Validator if ($(this).data("validator")) { if (!$(this).data("validator").checkValidity()) { $(this).attr(options.attr_status, "not valid"); return false; // not valid } } // setup form var form_action = $(this).attr("action"); if (options.form_action.length > 0) { form_action = options.form_action; } var formData = $(this).find(options.form_inputs).serialize(); // save/submit form $.ajax({ async: true, cache: false, type: "POST", url: form_action, data: formData, form: $(this), formData: formData, formAction: form_action, success: function(data, textStatus, jqXHR) { options = this.form.data("ASF_options"); this.form.attr(options.attr_data, this.formData).attr(options.attr_status, 'saved'); if (options.form_response_regex.length > 0) { var regex = new RegExp(options.form_response_regex); if (!data.match(regex)) { asflog("Autosave Complete, Regex Failed", $(form), data, textStatus); this.form.attr(options.attr_status, 'saved-regex-failed'); } } this.form.data("autosave_data", data); this.form.trigger("autosave_complete.autosaveform"); }, error: function() { this.form.trigger("autosave_error.autosaveform"); } }); }); // add form to list of ASF_forms ASF_forms = $(window).data("ASF_forms"); if (typeof(ASF_forms)=="object" && ASF_forms.length > 0) { ASF_forms.push(form); } else { ASF_forms = [form]; } $(window).data("ASF_forms", ASF_forms); // activate onclick for specified links (cleaner than relying on unload) $(options.autosave_onclick).bind("click.autosaveform", function(e) { // should we autosave? if ($(this).attr("href").indexOf("#")==0 || $(this).closest(".tool-tabs").size() == 1) { asflog("Clicked on link, was a bookmark or tab", $(this), $(form)); return true; // bookmark or tab } allowClickThrough = true; // trigger autosave ASF_forms = $(window).data("ASF_forms"); if ($.isArray(ASF_forms) && ASF_forms.length > 0) { $(ASF_forms).each(function(i, form) { asflog("autosave.click", $(this), $(form)); options = $(form).data("ASF_options"); if ($(form).ASF_status()=="unchanged") { asflog("Clicked on link, status == unchanged", $(this), $(form)); } else { $(form).trigger("autosave"); } if (!$(form).ASF_check_status($(form).ASF_status())) { asflog("Click Blocked. Form Status: " + $(form).attr(options.attr_status), $(this), $(form)); allowClickThrough = false; } }); } // what do we return? if (allowClickThrough) { asflog("Clicked on link", allowClickThrough, $(this), $(form)); return true; } return false; }); // If using unload feature, deregister a form from autosaving upon unload if ($.fn.ASF_beforeunload) { $(form).submit(function() { $(form)._unloadForm(); }); } }); // activate ASF_beforeunload (if not already done) if ($.fn.ASF_beforeunload) { $.fn.ASF_beforeunload = false; // no need to re-initialize $(window).bind("beforeunload.autosaveform", function() { $(window).data("ASF-beforeunload-prompt", $.fn.ASF_beforeunload_message); $(window).data("ASF-beforeunload-status", "init-unload"); ASF_forms = $(window).data("ASF_forms"); if ($.isArray(ASF_forms) && ASF_forms.length > 0) { $(ASF_forms).each(function(i, form) { options = $(form).data("ASF_options"); $(form).trigger("autosave"); if (!$(form).ASF_check_status($(form).attr(options.attr_status))) { $(window).data("ASF-beforeunload-status", $(form).attr(options.attr_status)); } }); } if ($(window).data("ASF-beforeunload-status") == "init-unload") { asflog("beforeunload continues: All Forms Fine");
评论
    相关推荐
    • JQuery SliderBar
      JQuery SliderBar,在网页上要设置透明度,移动速度,声音大小,文字大小等,首选JQuery SliderBar,使用简单,用户体验又好。
    • jquery js ide朋友开发的
      瓶子 开发的一款十分轻量的ide工具 用于开发jquery js 或者页面相当便捷 底层是flex开发,希望大家喜欢 安装条件需要在机器安装 Adobe AIR.
    • jquery grider
      jquery grider jquery grider jquery grider jquery grider jquery grider
    • jQuery pageSlide
      jQuery pageSlide 是一个jQuery插件,它可以控制一个隐藏页面的显示和关闭。具体来说,就是当前页占一个完整页面,隐藏页是看不到的,你设置一个控制的地方,点击该控 制时触发事件,隐藏的页面就弹出来。再次点击...
    • jquery Photoslider
      超酷的Jquery插件,仿照腾讯网游的banner,做的超酷,不下载的后悔。。。。。。。
    • JQuery essentials
      原版电子书,清晰PDF格式,JQuery Visual Quickstart Guide
    • jQuery播放器
      video5.18.4.js,jQueryDownload,maccman-flarevideo-19a0a9f,ckplayer6.8,jquery media plug等,总有一款jQuery视频音频适合你。
    • jquery slideBox
      jquery slideBox 轮播图片
    • jquery验证
      jquery的验证组件easyvalidator 另一个是form验证组件:FormValid easyvalidator.js改写的,结合了FromValid的验证,如果有多条验证信息时,明确提示哪条不满足。 如:||limitLength" minLength="2" maxLength="10" ...
    • jQuery slider
      jQuery实现的Slider 非常棒!