Este artículo maneja varios formularios, enlaces y botones en general. Le enseña cómo operar el procesamiento de formulario JavaScript. El contenido específico es el siguiente
/** * Procesamiento de formulario genérico JS * @author Anthony.chen *//** * Push Botton Action [BTN_ACTION] Data en Forma * Si hay prescripción, ejecute el script previo */"usar estricto"; // Todas la solicitud de Ajax se sincronizaron por defecto a AjaxnChronized = true; // Todas las solicitudes de Ajax se sincronizarán por defautor AJAX. var ajax_action_button = function (e) {var btn = $ (this); // Agregar prescript var pre_script; if (pre_script = btn.attr ("pre_script")) {var ret = eval (pre_script); if (ret == false) {return false; }} var btn_action = btn.attr ('value'); if (btn_action) {$ (this) .cloSest ('form'). data ('btn_action', {name: 'btn_action', valor: btn_action}); }}; /** * Actualice los datos de formulario adicionales en formelemento con el elemento de formulario, clave y valor */var ajax_update_post_data = function (formele, k, v) {var form = $ (formele); var post_data = form.data ('post_data'); if (post_data == undefined) {post_data = {}; } if (v == undefined) {delete post_data [k]; } else {post_data [k] = v; } form.data ('post_data', post_data); return true;}; /** * La casilla de verificación BOOL es especial casilla de verificación que debe mantener el valor desmarque * y publicar con el formulario Ajax, el formulario está en el padre */var bool_checkbox = function () {var ipt = $ (this); var formele = ipt.Closest ("formulario"); var _check = ipt.prop ("checked"); if (_check) {AJAX_UPDATE_POST_DATA (formele, ipt.attr ('name')); } else {AJAX_UPDATE_POST_DATA (formele, ipt.attr ('name'), 'f'); }}; /** * init el número de spin */var spin_number = function () {var spin = $ (this); var config = {bloqueo: true, imageBasePath: '{webpath}/css/images/spin/', btncss: null, txtcss: null, btnclass: 'spin_btn',}; Var interval = spin.attr ('interval'); if (interval) {config.interval = interval; } else {config.interval = 1; } var min = spin.attr ('min'); if (min) {config.min = min; } var max = spin.attr ('max'); if (max) {config.max = max; } spin.spin (config); return true;}; /** * init la entrada de fecha */var date_input = function () {var ipt = $ (this); var config = {offset: [4,0], selectores: true, lang: '{lang}', primer día: 1, formato: 'yyyy-mm-dd',}; var min = ipt.attr ('min'); if (min) {config.min = min; } ipt.DateInput (config); return true;}; /** * init the timepicker */var time_picker = function () {var ipt = $ (this); var config = {}; var paso = ipt.attr ("paso"); if (step) {config.step = step; } ipt.timePicker (config); return true;}; /** * Función de publicación de formulario AJAX genérica * Si se establece BTN_ACTION, luego agregue datos a la forma * Si se establece returi, redirige a return * Si se establece la recarga, recarga * de lo contrario muestra el mensaje de bloque * * El formulario se validará. */var ajax_form_post = function (e) {var form = $ (this); var pre_script; if (pre_script = form.attr ("pre_script")) {var ret = eval (pre_script); if (ret == false) {return false; }} var errhint = form.find (". FormerRor"). Primero (); if (errhint.size () == 0) {errhint = $ ("#pageError"); } Errhint.Text (''). Hide (); // Limpia el PageError if (! E.ISDefaultPrevented ()) {// Ocultar todo .FormError $ .BlockUi ({Mensaje: "{__ ('l_processing')}"}); var formArray = form.SerializeArray (); var btn_action_data; var btn_action; if (btn_action_data = form.data ('btn_action')) {FormArray.push (btn_action_data); form.removedata ('btn_action'); btn_action = btn_action_data.value; } else {btn_action = ''; } console.log ('btn acción:'+btn_action); // Agregar datos adicionales var post_data; if (post_data = form.data ('post_data')) {for (var k en post_data) {// if post_data [k] es una matriz, necesita más para hacer formarray.push ({name: k, valor: post_data [k]}); } form.removedata ('post_data'); } $ .post (form.attr ('acción'), formarray, function (json) {if ($ (window) .data ('blockui.isBlocked') == 1) {$ .unblockui ();} if (json.code === true) {var returi = ""; var retdata = "{__ ('l_proced'}! if (json.data) {retdata = json.data; Mensaje: Retdata, CSS: {Cursor: 'Pointer', Padding: '4px', Border: '3px Solid #CC0000',}, OverlayCSS: {cursor: 'Pointer'}}) form.attr ('returi')) {window.location = returi; if (typeof (json.data.errmsg) == 'string') {errhint.html (json.data) .show (); Cursor: 'Pointer'}}); Valor, ninguna entrada oculta debe haber referido al valor oculto // que muestra el mensaje del servidor a Ref Var ele = Form.Find ("[Type = Hidden] [Name ="+P+"]") Form.find ("[Hidden-ID ="+Refid+"]"). Attr ("Nombre"); json.data [refname] =+msg; E.PreventDefault (); } else {errhint.html ("{html :: text (__ ('e_form'))}"). show (); }}; /****Restablecer la entrada*/var ajax_post_form_hidden = function () {var form = $ (this); form.find ("[[Hidden-id]"). Cada (function () {// Borrar el mensaje de referencia var input = $ (this); var referido = input.attr ("Hidden-id"); var field = $ ("#" + refid + ""); // Configurar el borde de Errmsg // monitor del cambio de eventos de cambio en el elemento de error de error // hinput = $ (this); }); var validate_hidden_id = function (input) {var refid = input.attr ("Hidden-id"); VAR Field = $ ("#" + Refid + ""); var msg = field.attr ('msg'); if (! msg) {msg = "{__ ('e_not_empty')}"; } return field.val ()? verdadero: msg; }; var data_equals_validate = function (input) {campo var; var name = input.Attr ("Data-Equals"); campo = this.getInputs (). Filter ("[name =" + name + "]"); return input.val () == Field.val ()? Verdadero: [nombre];}; /** * solicitud AJAX a través del enlace * Si se confirma, confirme antes de enviar solicitud * Soporte de retorno y recarga * el más show block Mensaje */var ajax_link_req = function () {var l = $ (this); var suela = l.attr ('sugerencia'); if (tint) {var errhint = $ (l.attr ('tint')); errhint.text (''). hide (); } // Si el mensaje de confirmación se establece, entonces debe confirmarse desde el cliente if (l.attr ('confirmar')) {if (! Confirm (l.attr ('confirmar'))) {return false; }} $ .BlockUi ({Mensaje: "{__ ('l_processing')}"}); var pre_script; if (pre_script = l.attr ("pre_script")) {var ret = eval (pre_script); if (ret == false) {return false; }} var block = l.attr ('bloque'); if (block! = undefined) {ajaxaUtounblock = false; } $ .get (l.attr ('href'), function (json) {if (json.code == verdadero) {var retData = "{__ ('l_processed')}!"; var returi ;/ if stiting to ejecutar la función para cada var stressfunc = l.Attr ('sert'); if (sertulfeNn if (json.data) {retdata = json.data; Window.location.reload (); } else {// $. UNBLOCKUI (); return false;}; /** * Soporte de la navegación base del botón * Solo salta a nuevo href */var btn_nav = function () {var input = $ (this); var href = input.attr ("href"); if (href) {window.location = href; } else {alerta ("href no establecido"); } return false;}; /** * Botón de soporte base Ajax Get Method Solicitud * Soporte de retorno y recarga */var btn_req = function () {var input = $ (this); var href = input.attr ("href"); var sugerir = input.attr ('sugerir'); if (tint) {var errhint = $ (pista) .first (); if (errhint.size () == 0) {errhint = $ ("#pageError"); } Errhint.Text (''). Hide (); } var block = input.attr ('bloque'); if (block! = Undefined) {ajaxaUtoUnblock = false} $ .get (href, function (json) {if (json.code == verdadero) {var returi; if (returi = input.attr ('returi')) {window.location = returi;} else if (input.attr ("reloce") Window.location.reload (); }} else {if (sugerencia) {$ .unblockui (); OverlayCSS: {cursor: 'Pointer'}}); return false;}; /** * casilla de verificación AJAX genérica * La acción predeterminada se evita y envía una solicitud real a través de URL */var ajax_checkbox = function () {event.preventDefault (); VAR Action = $ (this); var url = action.attr ('url'); var _check = Action.prop ("verificado"); console.log (_check); var op; if (_check) {op = "1"; } else {op = "0"; } $ .get (url + op, function (json) {if (json.code == true) {if (_check) {Action.prop ("checked", true);} else {Action.prop ("checked", false);} return true;} else {return false;}}, 'json');}; /** * Crete Root PickList */var pickListInit = function () {var _select = $ (this); var _hidden_id = _select.attr ('Hidden-id'); var _un = _select.attr ('un'); var _lovChildren = _select.data ('lovtree'). C; var _rowValue = _Select.Data ('RowValue'); $ ("<pection>"). Append ("{__ ('l_select')}"). AppendTo (_select); for (var _kid en _lovChildren) {var _lov = _lovChildren [_kid] ['lov']; $ ("<pection>"). Val (_lov.lov_id) .append (_lov.v) .attr ('k', _ lov.id) .attr ('is_leaf', _ lov.is_leaf) .appendTo (_select); } _Select.Change (PickListChange); // Seleccione la lista if (_RowValue) {_Select.Find ("[value ="+_ RowValue [0]+"]"). Prop ("Seleccionado", true); _select.change (); } return true;}; /** * Seleccione la lista de selección */var pickListChange = function () {var _select = $ (this); var _hidden_id = _select.attr ('Hidden-id'); var _un = _select.attr ('un'); // elimina todo el posterior var _lovtree = _select.data ('lovtree'); var _rowValue = _Select.Data ('RowValue'); _select.nextall (). remove (); // Este es el valor de la actual selección var _selected = _Select.Find (': Selected'); if (_selected.attr ('is_leaf') == "{db :: t}") {$ ("#"+_ hidden_id) .val (_select.val ()); _Select.After ("<img src = '/s.gif' class = 'Sprite_Global SucesedImg'/>"); } else {var _val = _select.val (); var _k = _selected.Attr ('k'); // Obtener la lista de niños if (_lovtree.c [_k] .c == Undefined) {return false; } var _c_lovtree = _lovtree.c [_k]; var _c_select = $ ('<select>'). data ('lovtree', _ c_lovtree). Datos ('RowValue', _ RowValue). attr ('Hidden-id', _ Hidden_id) .attr ('un', _ un). attr ('name', _ un+'_'+_ k); $ ("<pection>"). Append ("{__ ('l_select')}"). AppendTo (_c_select); // Construyendo la lista de opciones para (var _kid en _c_lovtree.c) {var _lov = _c_lovtree.c [_kid] ['lov']; $ ("<pection>"). Val (_lov.lov_id) .append (_lov.v) .attr ('k', _ lov.id) .attr ('is_leaf', _ lov.is_leaf) .appendTo (_c_select); // insertar después de _select.After (_c_select); // onchange} _c_select.change (pickListchange); if (_RowValue) {_c_select.find ("[value ="+_ rowValue [_k]+"]"). prop ("seleccionado", true); _c_select.change (); }}}; var es lookup_new = function () {var es lookup = $ (this); var pre_script; if (pre_script = lookup.attr ("pre_script")) {var ret = eval (pre_script); if (ret == false) {return false; }} var url = lookup.attr ("url"); if (! url) {alert ('url no establecer'); devolver falso; } var altura = lookup.attr ('h'); if (! altura) {altura = 600; } var ancho = lookup.attr ('w'); if (! width) {width = 800; } window.open (url, "pselect", "scrollbars = yes, menuBar = no, altura ="+altura+", width ="+width+", resizable = yes, toolbar = no, ubicación = no, status = no"); devolver falso; }; /** * Buscar nuevo valor para el valor oculto */var parent_lookup = function () {var lookup = $ (this); var pid = abre. $ ("#" + lookup.attr ('pid')); if (! pid.length) {alert (lookup.attr ('pid')+ "no encontrado"); devolver falso; } var pname = abre. $ ("#" + lookup.attr ('pname')); if (! pname.length) {alert (lookup.attr ('pname')+ "no encontrado"); devolver falso; } var aft_script; // Ejecutar actual Script After Script if (AFT_Script = Lookup.attr ('Aft_script')) {Window.eval (AFT_Script); } pid.val ($ (this) .Attr ("Refid")); // Solo la operación del abridor podría activar el cambio de eventos pid.change (); pname.val ($ (this) .attr ("refvalue")); pname.change (); // Parent After_script if (aft_script = pname.attr ('aft_script')) {abreR.window.eval (aft_script); } if (aft_script = pid.attr ('aft_script')) {abiertos.window.eval (aft_script); } window.close ();}; /** * Carga predeterminada Completa * /// var uploadComplete = function (event, id, nombre de archivo, respuestajson) {var uploadComplete = function (e, data) {// para ser reemplazado por jQuery uploader var _fileUpload = $ (this); //console.log(_fileUpload); //console.log(data.Result); if (_fileUpload.attr ('reload')! = Undefined) {window.location.reload (); }}; /** * Función de carga de archivos, el siguiente atributo para controlar la acción de la carga * 'Endpoint' como URL de carga * 'Sid' como ID de sesión * 'Completa' opcional para configurar la función de carga personalizada completa */var genicupload = function (dom) {var endPointUrl = $ (this) .attr ('endpoint'); var sid = $ (this) .attr ("sid"); var sid = $ (this) .attr ("sid"); var completofunc = 'uploadComplete'; // Configurar funciones completas personalizadas var cuscomplete = $ (this) .attr ('completar'); if (cuscomplete) {completefunc = cuscomplete; } $ (this) .fileUpload ({url: endpointUrl, autoupload: true, dataType: 'json', formData: [{'sessionId': sid}], paramName: 'fileData',}). bind ('fileuploaddone', ventana [completafunc]);}; /** * Errores coincidentes con entrada * Solo se pueden identificar errores coincidentes aquí */var advance_validate = function (errores, event) {var conf = this.getConf (); // loop errors $.each(errors, function(index, error) { // add error class into input Dom element var input = error.input; input.addClass(conf.errorClass); // get handle to the error container var msg = input.data("msg.el"); // create Error data if not present, and add error class for input // "msg.el" data is linked to error message Dom Element if (!msg) { // msg = $ (conf.message) .AddClass (conf.messageClass) .instafter (input); 'Hidden'}). Find ("Span"). Remove ();/Mensajes poblados $ .E cada. msg.Parent (). width ()) {msg.add (msg.find ("span"); var advance_inputs = function (inputs) {var conf = this.getConf (); inputs.removeclass (conf.errorClass) .each (function () {var msg = $ (this) .data ("msg.el"); if (msg) {msg.hide (); msg.parent (). removeClass ("colerror");}}); if ($ (". colerror"). size () == 0) {var form = $ (this); var errhint = form.find (". FormeRor"). Primero (); if (errhint.size () == 0) {errhint = $ ("#pageError"); errhint.text (''). hide (); }}}; /** * Cuando el nombre de referencia está contenido para seleccionar */var checkall = function () {var check = $ (this); var refname = check.attr ('refname'); if (refname) {if (check.prop ("checked")) {$ ("input [name*= '"+refname+"']"). prop ("checked", true); } else {$ ("input [name*= '"+refname+"']"). prop ("versidado", falso); }} var refclass = check.attr ('refclass'); if (refclass) {if (check.prop ("checked")) {$ ("entrada."+refclass) .prop ("checked", true); } else {$ ("entrada."+refclass) .prop ("verificado", falso); }}}; /** * Configurar la casilla de verificación Readonly */var readonlycheck = function (e) {e.preventDefault (); return false;}; /** * Seleccionar lista disable */var readonlyselect = function () {$ (this) .prop ("discapacitado", true); }; $ (documento) .Ready (function () {$ (documento) .AJAXStart (function () {// limpia el error de nivel de página de solicitud de AJAX $ ("#pageError"). Text (''). Hide (); // Limpiar el error de formulario $ (". FORMERROR"). Text (''). Hide (); // Bloqueando todo AJAX if (AJAXSYNCHRONIEDIE) $ .BLOCKUI ({Mensaje: "{__ ('l_processing')}"}); } else {AJAXAUTOUNBLOCK = True; if (aJaxSynChronized) {if ($ (Window) .Data (blockUi.IsBlocked ') == 1) {if (AJAXAUTOUN // Force unblockui $ (documento) .Click (function () {if ($ (Window) .Data ('blockui.isblocked') == 1) {$ .unblockui (); var returi = $ (window) .data ('blockui.returi'); if (returi) {window.location = returi;}}}); $ .tools.validator.addeffect ("avanzado", avance_validate, avance_inputs); $ .tools.validator.fn ("[Hidden-id]", validate_hidden_id); $ (". AJAX_FORME_POST"). $ ('. Ajax_link_req'). Click (AJAX_LINK_REQ); $ (". Btn_req"). Haga clic en (BTN_REQ); $ (". Bool_checkbox"). Click (bool_checkbox); "{__ ('e_all')}", ': correo electrónico': "{__ ('e_email')}", ': número': "{__ ('e_decimal')}", ': url': "{__ ('e_url')}", "[max]:" {__ (__ ('e_max longitud "{__ ('e_min_length')}", '[requerido]': "{__ ('e_not_empty')}",});});Lo anterior es todo el contenido de este artículo. Espero que sea útil para todos dominar las operaciones de procesamiento de formularios JavaScript. Gracias por tu lectura.