jQuery función de carga - la manera simple Ajax (Parte 1)

La carga de función puede ser simplemente elementos HTML de un archivo en el prospecto actual. Esta función es principalmente para la "importación" de código HTML en el pensamiento y por lo tanto no se corresponde con la típica petición Ajax en el ejemplo es un script PHP acceso, los datos de la base de datos lee y / o se golpee contra otros procesos de servidor.

Esto en cuanto a la primera teoría, la llamada a la función es el siguiente:

  Un

  ) . load ( '/someFile #mydiv' ) ; $ ('# SomeElement »). Carga (' / somefile myDiv # '); 

Tan corto de simple. En el elemento con el ID "someElement" divs, todo el contenido de la myDiv "" cargado id. Lo genial es que "myDiv" nada en el documento actual es, pero en el archivo "fichero".
El segundo parámetro, la carga de datos como función también llamados pares de valor clave que pasa.

  Un

  ) . load ( 'someFile.php' , { 'param' : 'someValue' } ) ; $ ('# SomeElement »). Carga (' someFile.php ', (' param ':' someValue ')); 

Esto corresponde, sin embargo, ahora parece más a la normal petición Ajax. La clave de uno o más pares de valor se pasan al script PHP como un parámetro de entrada. Por supuesto, se pierde la ventaja del ejemplo anterior con otros elementos HTML desde un simple script para obtener DOM. Pero si usted solicita un único directo, sin más transformación se traduciría en un elemento de la inserción, que es una fácil y cómoda opción muy.

La siguiente parte entonces progresó a otras variantes como obtener jQuery Ajax, getJSON, etc ir.

la validación de formularios jQuery - Un panorama

Como en el post anterior anunciamos el lanzamiento de hoy de nuestro post de la serie "Los formularios con jQuery - La serie completa".

Hoy queremos parte 1 - "Visión general de la forma-Validaton Scripts recientes empezar.
A medida que estos guiones son numerosas, y esto es en parte una diferencia mínima respecto de los demás sólo porque en el plugin bassistance por Jörn Zaefferer se basan normalmente, vamos a tratar sólo imaginar el lo que en términos de funcionalidad, tamaño y facilidad de implementación son especiales.

En la validación de plugin bassistance probablemente pueda hablar el plugin de validación oficial de jQuery. Este plugin no hace casi nada que desear.
El plugin es para la multitud de posibilidades que ofrece, con sólo 24KB de distancia focal: en la versión no es particularmente grande. Es a partir de jQuery 1.2.6 + y es compatible con la versión 1.3.2.

Ofrece todo tipo imaginable de la validación de formularios.

• La validación sobre la marcha (cambio en el siguiente campo) para validar en enviar al validar los campos de texto, áreas de texto, botones de radio y casillas de verificación.
• Por ejemplo, hay también la posibilidad de considerar, dependiendo el uno del otro. En un grupo de casillas de verificación se puede comprobar por ejemplo, cuántos deben ser seleccionados, etc
• También el control de múltiples Selecciona y selecciona-es fácilmente posible.
• Las entradas pueden ser validadas en longitud, tipo (e-mail, Number, String ...), número de elementos seleccionados y así sucesivamente.
• La salida de mensajes de error se mantiene muy flexible. Así, esta directamente en el elemento de forma apropiada, o recogida, por ejemplo, en un div será publicado. Cambie la entrada del usuario se equivoca y los cambios de la reacción de los mensajes de error de validación sobre la marcha.
• Con el plugin correctamente los formularios completados a presentar, a través de AJAX también han sido tratados directamente.

El integrar la script es muy simple.

  Un
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17:00
 18
 19:00
 20

  ( function ( ) { $ (). Ready (función () (
	 ) . validate ( { $ ("# FormularID"). Validar ((
		 reglas: (
			 , nombre: "necesaria",
			 , apellido: "necesaria",
			 nombre de usuario: (
				 , requiere: verdad,
				 minLength: 2
			 ),
			 contraseña: (
				 , requiere: verdad,
				 minLength: 5
			 ),
			 confirm_password: (
				 , requiere: verdad,
				 , minLength: 5,
				 equalTo: "# password"
			 )
	 ));
 )); 

Ahora sólo tiene forma de sus elementos indican la identificación apropiada.

Una variedad de demos y los archivos para descargar se puede encontrar en la página oficial del sitio .

leer más

Los formularios con jQuery - una amplia serie

¿Qué tan importante el tema Fomular y jQuery se está cayendo, volando sobre nosotros durante nuestras estadísticas blog regular y otra vez. Muchas de las búsquedas en Google Palabras claves incluyen las formas tienen que ver con jQuery.
Las partes que a veces tienen más tráfico que va en esa dirección.
Todos queremos tener esto en cuenta, y empezar hoy un plazo y global larga serie sobre todo el tema de "las formas y jQuery.
La serie constará de varias partes y desglosados de la siguiente manera:

• Vista general de la forma Validaton scripts reciente.
• Información general de las funciones clave de las ofertas de validación de jQuery.
• Tutorial "Crear su propio script de validación usando jQuery.
• Listado de plugins jQuery actuales para procesar los datos del formulario a través de AJAX.
• Tutorial "plugin de jQuery propia para procesar los datos del formulario a través de AJAX incluyendo carga de archivos".
• Listado de las principales funciones de jQuery para modificar las características de las formas.
• Información general sobre "las formas a medida". Hermoso formularios con jQuery.
• Información general sobre "técnicas de forma avanzada." Autocompletar, en su lugar de edición, Selector de fecha, la información sobre herramientas evitar la doble Amigo y algunas otras cosas pequeñas.

Al término de la serie que formarán el nuevo plug-in para presentarle el momento estamos trabajando a toda máquina. Tanto por adelantado.

Hoy, queremos lo mismo con la parte 1 - " Visión general de la forma Validaton scripts recientes de comenzar.

Carga de archivos Ajax con jQuery

y el método rápido para subir archivos en los formularios para hacer una inteligente es, como tantas veces Ajax. Un plugin agradable para él está ahí para http://valums.com/ajax-upload/ , que también admite cargas múltiples.
El plug-in no sólo brilla por su facilidad de uso, puede ser también el molesto problema del diseño de campos de formulario de carga, por lo que "input type =" file ".." para poder familiarizarse con ella. Este campo no a menudo la CSS como debería, etc

Por qué usted tiene que pagar, sin embargo, es que los archivos se han subido ya el plugin con Presentar ante el depuesto, o antes de enviar el formulario que se encuentra en el servidor, mientras que el resto de los datos POST simplemente haga clic en un botón Enviar sólo a una secuencia de comandos para ser aprobada. En resumen, si Ajax y cargar el formulario como un atributo Método GET / POST con, presta atención. Eso significa que se debe comprobar si las imágenes publicadas son efectivamente utilizada y el usuario no es simplemente salvaje archivos subidos ha completado sin este formulario.

Screeshot la demo:

Corto sobre los componentes del código:

- La parte HTML

  Un
 2
 3

 <Previsto! - Crear un divs fácil subir más adelante la función ->
 <div <id="upload_button"> Cargar / div> 

- La parte JavaScript (js otros no son necesarios)

  Un
 2
 3
 4
 5
 6
 7

 "ajaxupload.3.1.js" type = "text/javascript" > < script type = "text/javascript" > $ ( document ) . ready ( function ( ) { new AjaxUpload ( 'upload_button' , { action : 'upload.php' } ) ; } ) ; </ script > <SCRIPT Src = "ajaxupload.3.1.js" type = "text / tipo <script javascript"> = "text / javascript"> $ (document). Ready (función () (Ajax 'Subir upload_button nueva (', (la acción: "'));)) <upload.php / script> 

La carga de Ajax se puede establecer por las funciones de devolución de llamada y otros parámetros. El código en el sitio Inglés se explica por sí mismo. Preguntas que puede hacer aquí.

- Después de ABES de datos a "upload.php" va a la tramitación del lado del servidor

  Un
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11

 '/var/www/uploads/' ; $uploadfile = $uploaddir . basename ( $_FILES [ 'userfile' ] [ 'name' ] ) ; //move_uploaded_file ist die Standard PHP-Funktion um Dateien auf dem Server zu verarbeiten if ( move_uploaded_file ( $_FILES [ 'userfile' ] [ 'tmp_name' ] , $uploadfile ) ) { echo "success" ; } else { // Als echo keinesfalls false benutzen. $ Uploaddir = '/ var / www / uploads /' $ = $ UploadFile uploaddir. basename ($ ['userfile _FILES [nombre]']) / move_uploaded_file / es el estándar de la función de PHP para archivos en el servidor proceso si ( move_uploaded_file $ _FILES ['userfile'] ['tmp_name'] (, $ UploadFile)) (echo "éxito";) else (/ / Cuando no utilice eco perturbador.  "error" ; } Lleva a conflictos con la petición AJAX echo 'error';) 

En el lugar también hay ejemplos Valums para Ruby y ColdFusion.

La demostración se puede encontrar aquí

jQuery - ¿Qué debe tenerse en cuenta en relación con Performacne

Acabo de tropezó con un buen artículo sobre el rendimiento y jQuery.

El artículo es sobre lo que debe para lograr un rendimiento óptimo con jQuery.
Abarca temas como la razón por la que se debe utilizar como selector de identificación, o por qué hay que tomar más clases, etiquetas etc planteada.
Normas de rendimiento jQuery

Los formularios con AJAX y jQuery - Un pequeño tutorial

AJAX es una cuestión de principio, la tecnología muy simple. Solicitud de transmisión JS, proceso de investigación con el servidor de secuencias de comandos y mostrar los resultados en el navegador e imprimir de nuevo. Sin embargo, no es el diablo, como siempre en los detalles. Este artículo es una pequeña guía de cómo utilizar un formulario se puede utilizar AJAX. Esto es mucho más fácil con el uso de marcos de JS, jQuery aquí.

En primer lugar le gustaría una vez que la estructura estándar en HTML para un formulario.

  Un
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17:00
 18
 19:00
 20
 21
 22
 23
 24
 25
 26
 27

  class="block"> <div
 class="done"> <div
 Gracias <b>.  Hemos recibido su petición </ b>
 </ Div>
	 class="myForm"> <div
	 <form method="post" action="saveData.php">
	 class="input"> <div
		 <<label> Nombre / label>
		 <input name="nombre" class="text" />
	 </ Div>
	 class="input"> <div
		 <label> correo electrónico </ label>
		 name="email" <input class="text" />
	 </ Div>
	 class="input"> <div
		 <<label> Comentario / label>
		 <textarea name="kommentar" class="text textarea" /> </ textarea>
	 </ Div>
	 class="input"> <div

		 <input type="submit" id="submit"/>
		 <div class="loading_icon"> </ div>
	 </ Div>
	 </ Form>
	 </ Div>
 </ Div>
 <div class="clear"> </ div> 

Nada en especial. Cada campo de entrada también está provisto de una etiqueta descriptiva. Para facilitar la configuración de las entradas individuales se envuelven en un div con sus etiquetas. Los divs con la clase "loading_icon" y "hecho" son invisibles para la fecha de inicio.
El CSS esto podría ser aplicado de esta manera:

  Un
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17:00
 18
 19:00
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52

 : center ; } .loading_icon { float : right ; background : url ( ajax-loader.gif ) no-repeat 1px ; height : 30px ; width : 30px ; display : none ; } .done { background : url ( iconIdea.gif ) no-repeat 2px ; padding-left : 20px ; font-size : 12px ; width : 70% ; margin : 20px auto ; display : none } . clear { clear : both } . block { width : 400px ; margin : 0 auto ; text-align : left ; } .input * { padding : 5px ; margin : 2px ; font-size : 12px ; } .input label { float : left ; width : 75px ; font-weight : 700 } .input input. text { float : left ; width : 270px ; padding-left : 20px ; } .input .textarea { height : 120px ; width : 270px ; padding-left : 20px ; } .input #submit { float : right ; margin-right : 10px ; } cuerpo (text-align: center;) (float loading_icon.: derecha, de fondo: url (ajax-loader.gif)-repito 1px no; altura: 30px; anchura: 30px; display: none;). hacer (fondo: url (iconIdea.gif)-repito no 2px; padding-left: 20 píxeles; font-size: 12px; anchura 70;% de margen: auto 20 píxeles; display: none). transparente (claro: ambos). cuadra (ancho: 400px; margin: 0 auto; texto-align: left;). * entrada (padding: 5px; margin: 2px; font-size: 12px;). entrada de etiqueta (float: left; anchura: 75px; font-weight: 700). de entrada. ingreso de texto (float: left; ancho: 270px; padding-left: 20px;) de entrada .. área de texto (altura: 120px; ancho: 270px; padding-left: 20px;). # entrada de presentar (float: right; margen -derecha: 10px;) 

Dom Ahora por fin puede hacerse cargo de la petición AJAX. Echemos un vistazo a cómo procesamos los datos de ahora y hacia adelante con el script PHP.

  Un
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17:00
 18
 19:00
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52

 . ready ( function ( ) { //click event für submit button ( '#submit' ) . click ( function ( ) { //Daten von den HTML Feldern in JS-Vars übersetzen var name = $ ( 'input[name=name]' ) ; var email = $ ( 'input[name=email]' ) ; var website = $ ( 'input[name=website]' ) ; var comment = $ ( 'textarea[name=comment]' ) ; //die Daten sollen per GET an das PHP Skript weitergeleitet werden. Dafür bauen wir einen //String var data = 'name=' + name . val ( ) + '&email=' + email. val ( ) + '&comment=' + encodeURIComponent ( kommentar. val ( ) ) ; //alle Textfelder deaktivieren $ ( '.text' ) . attr ( 'disabled' , 'true' ) ; //Icon während des Requests einblenden $ ( '.loading_icon' ) . show ( ) ; //Request abschicken $. ajax ( { //Ort des Skriptes in dem die per GET übertragenen Daten verarbeitet werden sollen url : "saveData.php" , //Angabe der GET Methode, auch POST wäre möglich. Allerdings nur sinnvoll //bei größeren Datenmengen type : "GET" , //Daten die gesendet werden sollen data : data , //bei Antwort des Requests (Response) success : function ( reqCode ) { //wenn saveData.php true bzw. den Status 1 zurückliefert if ( reqCode == 1 ) { //verstecken des Formulars $ ( '.form' ) . fadeOut ( 'slow' ) ; //anzeigen der Erfolgsmeldung $ ( '.done' ) . fadeIn ( 'slow' ) ; //wenn der Request eine Form von false zurückschickt, Fehler ausgeben. } else { alert ( 'Fehler beim Abschicken des Formulares.' ) ; } } } ) ; return false ; //der return wird benötigt, damit das Formular nicht tatsächlich abgeschickt wird und //sich nicht wie ein normales Form mit Seiten Refresh verhält. } ) ; } ) ; $ (Document). Ready (función () (/ / evento de clic del botón de envío ('# submit'). Haga clic en (función () (/ / datos de los campos HTML en JS-traducir Vars nombre de var = $ ('input [name = nombre] '); email = $ (' [nombre = entrada de correo electrónico] var ') var página web = $ (' [nombre = input sitio web] '); var comentario = $ (' textarea [nombre = comentario] ') / / los datos es llegar a la secuencia de comandos PHP se transmitirá. Construimos una / / cadena de datos var =' name = "+ nombre. val () +" & email = '+ e-mail. val () +' & comentario = 'encodeURIComponent + (kommentar. val ()) / / todos los campos de texto de $ ('. texto '). atr (' discapacidad ',' true '); / / Icon en la demostración de la petición $ ('. loading_icon ' show (); / enviar $. ajax solicitud / ((/ / Lugar del script donde se procesan los datos se transfieren al.) url: "saveData.php", / / especificando el método GET, POST sería posible. Sin embargo, sólo es útil / / cuando grandes cantidades de datos de tipo: "GET", / / datos que se transmiten los datos: datos, / / respuesta a la solicitud (respuesta) el éxito: function (reqCode) (/ / si es cierto o saveData.php la condición de devoluciones si (reqCode == 1) (/ / ocultar la forma $ ('. forma "). FadeOut (' lento ') / / mensaje de éxito Mostrar $ ('. hacer»). FadeIn ('lento' ) / / si la solicitud es devuelta por una forma de, salida de error falso.) else (alert ('Error al presentar la declaración .');)))) forma falsa; / / El retorno es necesario para que la forma no es efectivamente enviados, y / / no se actualizan las páginas como una forma normal se comporta con .));)); 

Toda magia se hace ...

Demo

uploadify - un plugin para jQuery carga de archivos

¿Quién no lo ha hecho!? La búsqueda de un script de carga adecuado o plugin es, a veces mucho más difícil de lo esperado.
A pesar del número de secuencias de comandos y plugins hay, al menos para mí lo que siempre es una o la otra inspiración.
Por ejemplo, ninguna barra de progreso o no con la asistencia de varios archivos, etc

Así que quiero que en breve uploadify imaginar. Un plugin de jQuery que uno es demasiado fácil de integrar y el otro tiene todo lo que usted así lo desea.
Subir uno o más archivos, barra de progreso y un increíble número de ajustes.

El único inconveniente, en su caso, es el hecho de que el cargador de la tecnología Flash.

Un pequeño ejemplo de la aplicación:

  Un
 2
 3
 4
 5
 6
 7
 8
 9

  . ready ( function ( ) { $ (Document). Ready (función () (
      ) . fileUpload ( { $ ('# FileInput »). FileUpload ((
           'uploader.swf' , "Uploader ':' uploader.swf '
           'upload.php' , 'Script': 'upload.php,
           'cancel.png' , "CancelImg ':' cancel.png '
           true , "Auto": true,
           '/uploads' 'Carpeta': / uploads "
      ));
 )); 

Una demostración del conjunto se puede encontrar aquí .

QFocuser - Los widgets de AJAX con el teclado de control

Navegando a través de aplicaciones de inspección superior del teclado es una parte importante en todos los aspectos de usabilidad y accesibilidad.
Daniel Steigerwald ha ocupado de la cuestión que se plantea cuando hay más de un widget en una página de AJAX y he escrito una pequeña biblioteca independiente llamada QFocuser.

Actualmente QFocuser está disponible en la versión 0.95 y funciona en IE6 / 7 FF2 / 3, Safari, WebKit, Opera y chorme.

Las principales características de QFocuser de un vistazo:

• permite el widget para interceptar eventos clave cuando se recibe el foco
• El enfoque se puede activar para cada elemento
• resuelve enfoque y desenfoque de eventos (de manera que por ejemplo, una fila de la tabla no permanecer más tiempo gehighlighted si hace clic fuera del cuadro)
• Le permite elegir el más widget en Tab

Una demostración del conjunto se puede encontrar aquí.

Código de ejemplo:

  Un
 2
 3
 4
 5
 6
 7
 8

   new QFocuser ( widgetContainer , { onFocus : function ( focusedEl ) { .. add highlighted class or whatever } onBlur : function ( focusedEl ) { .. remove highlighted class or whatever } } ) ; // attach your own keys listeners $ ( focuser. getKeyListener ( ) ) . addEvent ( 'keydown' , e. g . handleArrows ) ; // when your widget decided to set the focus (and then receive key events) focuser. focus ( tableRowForExample ) ; var = nuevo enfoque QFocuser (contenedor widget (onFocus: function (focusedEl) (..) o cualquier clase de relieve añadir onBlur: function (focusedEl) (.. quitar destacó clase o lo que sea))); / adjuntar / sus oyentes propias llaves $ focuser. getKeyListener ()). addEvent 'KeyDown ((, e. g. handleArrows) / / cuando el widget decidió fijar el enfoque (y luego recibir los eventos clave) se centra. foco (tableRowForExample); 

encontrar la totalidad del proyecto en Google Code .