Libro “jQuery 1.3 con PHP”

DESCARGAR

Cambiar la imagen de fondo CSS con jQuery

Establecer una imagen de fondo usando jQuery en algunos div. Al principio, mi código de configuración de fondo era así:

$('#myDiv').css('background-image', 'my_image.jpg');
// OR
$('#myDiv').css('background', 'path/to/image.jpg');

Mi div no tenía imágenes de fondo. FireBug no mostró propiedades de fondo CSS conjunto y no podía ver por qué las imágenes de fondo no se están estableciendo por jQuery.

Solución a las imágenes de fondo “no se están creando” el problema es establecer que de esta manera:

$('#myDiv').css('background-image', 'url(my_image.jpg)');
// OR
$('#myDiv').css('background', 'url(path/to/image.jpg)');

HTML 5 y Ajax

HTML 5 es la última versión de una de las primeras lenguajes de los sitios web. El proyecto se inició en 2004 – una línea de tiempo adecuado teniendo en cuenta las mejoras en la industria de software y en línea han sido muy impresionantes. Esta actualización en HTML planes para atender más que interfaces simples en la adecuada creación de un sitio web.

En las versiones anteriores, el HTML es que acaba de hacer para cargar la página completa para cada solicitud de datos. Aunque esta opción es todavía adaptarse a sitios web simples, la carga cada vez mayor de los navegadores, incluso con HTML ha llevado a exigir cambios importantes en los idiomas página web. El mero hecho de que la adición de otros lenguajes de programación en la mayoría de los sitios web deben hacer los desarrolladores de buscar soluciones a los retos de HTML.

AJAX en jQuery:mensaje de carga mientras el usuario espera la respuesta Ajax del servidor

Por qué un mensaje de carga al hacer Ajax

Cuando hacemos una solicitud por Ajax, los resultados de dicha llamada a veces tardan en llegar. Durante ese tiempo el usuario puede no ver ninguna reacción por parte del navegador, lo que le puede confundir y pensar que no ha hecho clic correctamente en el enlace o botón. Sería normal en ese caso que el usuario pulse repetidas veces un enlace o un botón de envío de formulario, generando repetidas e innecesarias llamadas al servidor, lo que puede derivar en diversos problemas.

Así pues, es conveniente mostrar un mensaje de carga para advertir que su solicitud fue realizada y el proceso está en marcha y esperando respuesta del servidor.

Vamos a explicar la implementación de este mensaje de carga, pero siempre teniendo en cuenta que nuestra intención en este ejemplo es mantener un código pequeño que se pueda entender fácilmente. Aunque queremos remarcar que las cosas se podrían hacer de otra manera, algo mejorada, cuando sepamos más cosas sobre el framework Javascript jQuery y pongamos en marcha algunas prácticas aconsejables de programación orientada a objetos.

Preparando el código HTML
Como un primer paso, vamos a mostrar el código HTML que tendremos en la página que hará la solicitud Ajax.

<a href="#" id="enlaceajax">Haz clic!</a>
<div id="cargando" style="display:none; color: green;">Cargando...</div>
<br>
<div id="destino"></div>

Tutorial Subir Archivo con AJAX

Paso 1 – AJAX carga de archivos

En primer lugar he de decir que para crear un puro AJAX sistema de carga de archivos no es posible debido a limitaciones de seguridad del Javascript. Todos los sistemas de carga Ajax sé usar alguna herramienta de terceros / paquete o sólo imita la sensación de AJAX. Aún así, el proceso de carga de archivos hace un poco mejor. En la próxima sección voy a presentarles una solución que imita el proceso de AJAX, pero utiliza un proceso de carga normal y iFrames.

Concepto:

• Crear un simple formulario HTML para la carga de archivos
• Establecer la meta de un iframe que se encuentra en la página real, pero no es visible.
• Llame a una función de JavaScript en el formulario para presentar la pantalla de animación.
• Después de la parte de PHP termina el proceso de carga, y luego se esconde la animación.

Crear el archivo HTML:

El archivo HTML que usaremos en este artículo es bastante simple. Sólo tienen un simple formulario con un archivo de campo y un botón de enviar. Sin embargo, no se olvide de la enctype parámetro.

      <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" >
      File: <input name="myfile" type="file" />
      <input type="submit" name="submitBtn" value="Upload" />
      </form>

Además de esto tenemos que añadir un poco más de código a la misma. Primero necesitamos un bloque en el que mostrará el progreso de animación. Tenemos otro bloque en el que informará a los visitantes si la subida fue el éxito o no. Además de esto tenemos que añadir un iFrame de oculta a la página que se utiliza como forma de destino. Al menos añadir un evento onSubmit del formulario. Por lo tanto, nuestro cuerpo HTML parecido a este: