Realizando una mirada automática completa y construyendo un formulario -- javascript campo con jquery campo con html campo con ajax camp codereview Relacionados El problema

Performing an auto complete look-up and building a form


2
vote

problema

Español

He escrito una función de jQuery que está haciendo una búsqueda automática completa y luego construyendo el formulario para mí.

Esto está funcionando bien, pero quiero reutilizar el código para que pueda tener la reconstrucción del formulario después de enviar los datos para ver los resultados. Aquí está el script básico HTML y JQERY a continuación. En este momento, el formulario está haciendo el aspecto y agregue los botones de envío y editar junto con los otros elementos del formulario.

html

  string1  

jquery

  string2  

¿Cómo separaré el elemento de forma en una función separada que se debe llamar, de modo que cuando hago clic en el botón envíe el botón Guardar , reconstruye el formulario con los nuevos resultados?

Original en ingles

I have written a jQuery function that is doing an auto complete look-up and then building the form for me.

This is working fine but I want to reuse the code so I can have the form rebuild after submitting the data to see the results. Here is the basic html and jquery script below. Right now the form is doing the look-up and adding my submit and edit buttons along with the other form elements.

HTML

<div id="topmain">    <div>       <span>USER ADMINISTRATION</span>    </div>    </div>    <br />    <div id="mainuserdiv">       <label for="employeename">Employee:</label><input type="text" id="employeename" name="employeename"/>       <br />       <form method="get">          <div id="hiddenstuff"></div>          <br />          <div id="buttondiv"></div>          <br />          <div id="formcontent"></div>       </form> </div> 

jQuery

$(function(){      var ans ={             source:"../json/getpersonjson.php",             select: function(e,u){                 $("#hiddenstuff").empty();                 $("#formcontent").empty();                 $("#buttondiv").empty();                 $("#buttondiv").append(                     $('<input>').attr({                     type: 'submit',                     id:    'updateuserbutton',                     name: 'updateuserbutton',                     value: "Save"                 }).addClass("button rmargin5")                 ).append(                      $('<input>').attr({                         type: 'button',                         id:    'edituserbutton',                         name: 'edituserbutton',                         value: "Edit"                     }).addClass("button")                     );                 $("#hiddenstuff").append(                     $('<input>').attr({                     type: 'hidden',                     id: 'Mchnum',                     name: 'Mchnum',                     value: u.item.Mchnum                 })                 );                 $("#formcontent").addClass("incident").append(                     $('<div>').append(                          $('<label>').attr({                             for: 'username'                          }).text("User name:")                          ).append(                             $('<input>').attr({                             type: 'text',                             id: 'username',                             name: 'username',                             value: u.item.username                             }).addClass("rmargin10")                          ).append(                             $('<label>').attr({                                 for: 'syadmin'                             }).text("System Administrator")                          ).append(                             $('<input>').attr({                                 type: 'checkbox',                                 value: "1",                                 id: 'syadmin',                                 name: 'syadmin'                             }).addClass("rmargin10")                          ).append(                             $('<label>').attr({                                 for: 'Activeuser'                             }).text("Active User")                          ).append(                             $('<input>').attr({                                 type: 'checkbox',                                 id: 'Activeuser',                                 name: 'Activeuser',                                 value: "1"                              }).addClass("rmargin10")                          ).append(                              $('<label>').attr({                                 for: 'changepass'                             }).text("Change Password").addClass("rmargin3")                            ).append(                             $('<input>').attr({                                 type: 'checkbox',                                 id: 'changepass',                                 name: 'changepass',                                 value: "1"                              })                             )                     )                 if(u.item.syadmin=="1"){$("#syadmin").prop('checked', true)};                 if(u.item.Activeuser=="1"){$("#Activeuser").prop('checked', true)};                 if(u.item.changepass=="1"){$("#changepass").prop('checked', true)};                                   $("#formcontent *").attr('disabled',true);                 $("#edituserbutton").click(function(){                     $("#formcontent *").removeAttr('disabled');                  });               },             minLength:1         };         $("#employeename").autocomplete(ans);  } 

How do I separate out the form element into a separate function to be called, so that when I click on the submit save button, it rebuilds the form with the new results?

           
       
       

Lista de respuestas

1
 
vote

Después de pensarlo, intenté varias cosas, se me ocurrió con la siguiente solución a mi problema. Si alguien ve donde puedo mejorarlo, ponga su entrada. 1. He creado la función para construir el formulario, luego lo usé en mi jQuery Autocompletar Aquí está la función para construir el formulario

   function sysformbuild(earr){ $("#hiddenstuff").empty(); $("#formcontent").empty(); $("#buttondiv").empty(); $("#buttondiv").append( $('<input>').attr({         type: 'submit',         id:    'updateuserbutton',         name: 'updateuserbutton',         value: "Save"     }) ).append(     $('<input>').attr({         type: 'button',         id:    'edituserbutton',         name: 'edituserbutton',         value: "Edit"     }) ); $("#hiddenstuff").append(     $('<input>').attr({         type: 'hidden',         id: 'Mchnum',         name: 'Mchnum',         value: earr.item.Mchnum     }) ); $("#formcontent").addClass("incident").append(     $('<div>').append(         $('<label>').attr({             for: 'username'             }).text("User name:")     ).append(         $('<input>').attr({             type: 'text',             id: 'username',             name: 'username',             value: earr.item.username         })     ).append(         $('<label>').attr({             for: 'syadmin'         }).text("System Administrator")                          ) if(earr.item.syadmin=="1"){$("#syadmin").prop('checked', true)};                 $("#formcontent *").attr('disabled',true); $("#edituserbutton").click(function(){ $("#formcontent *").removeAttr('disabled');  }); }   

Luego usé la función de compilación de formularios en el autocompletar. Supongo que podré usar esta función de formulario en la función de envío de formulario.

  $(function(){ var ans ={ source:"../json/getmchpersonjson.php", select: function(e,u){     sysformbuild(u);     },     minLength:1 }; $("#employeename").autocomplete(ans);        });   
 

After thinking about it then tried several things I came up with the below solution to my problem. If anyone sees where I can improve it please put in your input. 1. I created the function to build the form then used it in my jquery autocomplete Here is the function to build the form

 function sysformbuild(earr){ $("#hiddenstuff").empty(); $("#formcontent").empty(); $("#buttondiv").empty(); $("#buttondiv").append( $('<input>').attr({         type: 'submit',         id:    'updateuserbutton',         name: 'updateuserbutton',         value: "Save"     }) ).append(     $('<input>').attr({         type: 'button',         id:    'edituserbutton',         name: 'edituserbutton',         value: "Edit"     }) ); $("#hiddenstuff").append(     $('<input>').attr({         type: 'hidden',         id: 'Mchnum',         name: 'Mchnum',         value: earr.item.Mchnum     }) ); $("#formcontent").addClass("incident").append(     $('<div>').append(         $('<label>').attr({             for: 'username'             }).text("User name:")     ).append(         $('<input>').attr({             type: 'text',             id: 'username',             name: 'username',             value: earr.item.username         })     ).append(         $('<label>').attr({             for: 'syadmin'         }).text("System Administrator")                          ) if(earr.item.syadmin=="1"){$("#syadmin").prop('checked', true)};                 $("#formcontent *").attr('disabled',true); $("#edituserbutton").click(function(){ $("#formcontent *").removeAttr('disabled');  }); } 

Then I used the form build function in the autocomplete. I am assuming I will be able to use this form function in the form submit function.

$(function(){ var ans ={ source:"../json/getmchpersonjson.php", select: function(e,u){     sysformbuild(u);     },     minLength:1 }; $("#employeename").autocomplete(ans);        }); 
 
 

Relacionados problema

2  Parámetros JavaScript - Mejores prácticas para configuraciones objeto / devolución de llamada  ( Javascript parameters best practices for settings object callback ) 
Tengo la siguiente función que se ejecuta como se esperaba y se define en el objeto 9988777665544339 .appedTo0 que funciona como se esperaba. Sin em...

2  Llamada Ajax en JavaScript  ( Ajax call in javascript ) 
Sé que hay muchas bibliotecas con esto construido en $.get() , etc ... Pero como para escribir esto en Javascript puro ¿Cómo se ve esto? Cells0 ...

5  Validación del formulario AJAX  ( Ajax form validation ) 
Este es mi primer intento de la validación del formulario AJAX, y todo funciona como se esperaba, el ejemplo final final mantendrá muchos más campos de entrad...

8  Biblioteca básica de JavaScript  ( Basic javascript library ) 
Mi propio CMS está utilizando actualmente JQERY, pero como uno de los objetivos es que todo el proyecto sea muy pequeño, he decidido escribir mi propia biblio...

8  Escribiendo un widget de jquery: plantilla  ( Writing a jquery widget templating ) 
Estoy haciendo mi primer mayor desarrollo de jQuery. Es un widget para eventos recurrentes, y es como una bestia bastante compleja. El código completo está di...

7  Plugin de paginación  ( Pagination plugin ) 
Este complemento está escrito en jQuery y se hace para admitir el marco de CodeIgniter . Es un complemento de paginación de tabla de AJAX diseñada para propo...

8  Tema / Cambio de la piel ... Versión 2! (CSS-Drived)  ( Theme skin swap version 2 css driven ) 
Básicamente, tengo una piel de AJAX (HTML / CSS) que se carga en un elemento ficticio (ID = SkinContainer) cuando la página está cargada, y luego el contenido...

0  ¿Cómo puedo mostrar los resultados de mysql_fetch_assoc en una tabla dinámica?  ( How can i display the results of mysql fetch assoc in a dynamic table ) 
Tengo una base de datos MySQL con varias columnas y dos filas de datos, hasta ahora. Estoy usando mysql_fetch_assoc para devolver los datos en la base de dato...

1  Actualización de una página web de DRUPAL con contenido basado en texto ingresado  ( Updating a drupal web page with content based on inputted text ) 
La intención es actualizar una página web de drupal existente con contenido basado en texto ingresado en un cuadro de texto. La página existente muestra dat...

3  MARCA DE TEXTBOX JavaScript de doble modo  ( Dual mode javascript textbox watermark ) 
Solo estaba tratando de hacer una marca de agua AJAX alternativa desde "Fecha de inserción" (primer modo) a "MM / DD / YYAY" (segundo modo). Después de algún ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos