Inquitudes sobre Jquery

[miguelangelb]

Hola a todos, tengo una serie de inquietudes sobre Jquery qué me guastaría resolver con la ayuda de los miembros del foro.

1. La primera tiene que ver con los métodos .html() y .load() para cargar mediante una peticion ajax en un div de una página inicial (inicio.html), el contenido de un archivo externo ( html o php), en éste caso (contenido.php).

a. Qué diferencias de fondo hay entre estos dos métodos y cual es mejor de ellos para cargar y mostrar el resultado?

b. Qué ventajas o desventajas tiene su uso y en qué casos se debe usar uno u otro método?

2. Si se requiere manipular el contenido resultante del div (la carga de contenido.php) mediante scripts específicos de jquery (como por ejemplo validar un formulario de contenido.php)...

a. En dónde se deben escribir estos scripts para que funcionen correctamente? en la página inicial(inicio.html) ? en la página a ser insertada(contenido.php)?

b. En que parte de la página es mejor insertar un script en la parte superior al interior del head del documento? al final de la página justo antes de la etiqueta </body>?

c. Si se utiliza un archivo único de scripts (scripts.js) el llamado de éste archivo (mediante include@ o src=) se debe hacer desde la página inicial? se debe hacer desde la página a cargar en el div? se debe hacer en ambas páginas?

3.Actualmente se recomienda centralizar los scripts del sitio WEB en un archivo externo tipo .js pero en el caso de páginas que van a ser eventualmente insertadas en divs es preferible colocar directamente el código jquery al interior de ellas? o bien sigue siendo recomendable colocarlo en el archivo externo tipo .js? máxime cuando su uso es eventual y se da sólo si el usuario lo requiere?

4.Existe algún sistema para validad que un script de Jquery ha sido cargado totalmente y está disponible para su uso similar a los loaders que se usan para verificar la carga de imágenes o archivos .swf de flash?

Me ha sucedido haciendo pruebas en los 5 navegadores más usados, que a veces el código de las páginas a cargar en los div de la inicial, aparentemente no ha cargado en su totalidad cuando se hace una peticion ajax y no responde o no responde correctamente, aunque a la segunda petición del mismo en todos ellos han funcionado correctamente los scripts sin generar errores en las herramientas de validación.

Les agradezco de antemano su colaboración porque he leído un montón de manuales de jQuery y en ninguno he encontrado respuesta a las inquietudes arriba mencionadas.

[sander]

Hola.

Primero decirte que estas un poco perdido y estas confundiendo las funciones que tiene jquery.

Veamos, para empezar te recomiendo que te leas las especificaciones tecnicas sobre jquery en www.jquery.com, esta muy bien explicado y tiene ejemplos, te aseguro que te sacara de muchas dudas.

Segundo conseguite una chuleta de jquery para tenerla siempre a al mano.

En cuanto a tus dudas te aclaro algunas de forma rapida.

1. La primera tiene que ver con los métodos .html() y .load() para cargar mediante una peticion ajax en un div de una página inicial (inicio.html), el contenido de un archivo externo ( html o php), en éste caso (contenido.php).
a. Qué diferencias de fondo hay entre estos dos métodos y cual es mejor de ellos para cargar y mostrar el resultado?
b. Qué ventajas o desventajas tiene su uso y en qué casos se debe usar uno u otro método?

a. Son completamente diferentes ya que .html() inserta en el DOM codigo formateado en html, mientras que .load() realiza una peticion ajax de un contenido de un archivo especifico y lo inserta en el elemento asociado en formato .html().

b. .html() usalo para insertar en el DOM codigo y que reconosca de forma correcta los tags de html, .load() usalo para pedir un archivo mediante ajax.

2. Si se requiere manipular el contenido resultante del div (la carga de contenido.php) mediante scripts específicos de jquery (como por ejemplo validar un formulario de contenido.php)...
a. En dónde se deben escribir estos scripts para que funcionen correctamente? en la página inicial(inicio.html) ? en la página a ser insertada(contenido.php)?
b. En que parte de la página es mejor insertar un script en la parte superior al interior del head del documento? al final de la página justo antes de la etiqueta </body>?
c. Si se utiliza un archivo único de scripts (scripts.js) el llamado de éste archivo (mediante include@ o src=) se debe hacer desde la página inicial? se debe hacer desde la página a cargar en el div? se debe hacer en ambas páginas?

a. Rapido y puntual, todas las formas son validas y correctas, ya que si no no funcionarian, pero a mi parecer lo mas optimo es tener todo tu javascript en lo posible separado en un archivo .js, para tener un mejor mantenimiento, tener el codigo limpio y no intrusivo y optimizar la velocidad de tu web. Este arvhico se lo debe llamar en el head de forma tradicional.

3.Actualmente se recomienda centralizar los scripts del sitio WEB en un archivo externo tipo .js pero en el caso de páginas que van a ser eventualmente insertadas en divs es preferible colocar directamente el código jquery al interior de ellas? o bien sigue siendo recomendable colocarlo en el archivo externo tipo .js? máxime cuando su uso es eventual y se da sólo si el usuario lo requiere?

R.- Siempre en un archivo externo .js y recuerda usar live para que los elementos cargados por ajax o insertados en el DOM funcionen correctamente.

4.Existe algún sistema para validad que un script de Jquery ha sido cargado totalmente y está disponible para su uso similar a los loaders que se usan para verificar la carga de imágenes o archivos .swf de flash?
Me ha sucedido haciendo pruebas en los 5 navegadores más usados, que a veces el código de las páginas a cargar en los div de la inicial, aparentemente no ha cargado en su totalidad cuando se hace una peticion ajax y no responde o no responde correctamente, aunque a la segunda petición del mismo en todos ellos han funcionado correctamente los scripts sin generar errores en las herramientas de validación.

R.- $( document ).ready(); hace lo que quieres, aunque si quieres ser mas riguroso usa $(window).ready.

Saludos.

[miguelangelb]

Iniciado por sander

a. Son completamente diferentes ya que .html() inserta en el DOM codigo formateado en html, mientras que .load() realiza una peticion ajax de un contenido de un archivo especifico y lo inserta en el elemento asociado en formato .html().
b. .html() usalo para insertar en el DOM codigo y que reconosca de forma correcta los tags de html, .load() usalo para pedir un archivo mediante ajax.

En primer lugar te agradezco la respuesta a mis inquietudes y en realidad la mayoría me han quedado bastante claras, sin embargo creo que el primer punto no lo expresé adecuadamente en mi pregunta y mis dudas sobre el uso de los métodos .html() y .load() siguen aún vigentes por lo que voy a intentar ser más gráfico a ver si se entiende la razón de mi cuestionamiento:

El caso es que haciendo un ejercicio, en la práctica ambos métodos me han operado aparentemente de forma correcta pero sigo sin resolver cual de las dos vías es la más adecuada.

El propósito que deseo obtener es que desde un archivo inicial (inicio.html), mediante un formulario, el usuario seleccione las fechas de inicio y final de una consulta de registros y al pulsar el botón enviar, mediante ajax (especificamente el método $post - serialize), se envían éstos dos datos a un archivo php (contenido.php) que los procesa y selecciona los registros adecuados a la solicitud. Una vez efectuado esto si la comunicación con el servidor fue correcta, se debe cargar en un <div> de inicio.html el resultado solicitado para que el cliente lo pueda visualizar.

1. El resultado de la consulta se puede cargar en el div de inicio.html de dos maneras.

a) mediante .html() así:

Código Javascript:

$(document).ready(function(){
 
    $("#boton1").click(function(e){
        if (!e.isDefaultPrevented()){
            $.post("contenido.php",function(data){
                if (data!=false){
                    $('#div_recibe').html(data);
                };
            });
        e.preventDefault();
        }
    });
 
});
 

Hay que tener en cuenta que el archivo php sólo visualiza mediante un IF el contenido html si se cumplen ciertos requisitos como que las fechas no vengan vacías por decirlo así. Y la data recibida es toda la información html de contenido.php.


b) mediante .load() así:

Código Javascript:

$(document).ready(function(){
 
    $("#boton1").click(function(e){
        if (!e.isDefaultPrevented()){
            $.post("contenido.php",function(data){
                if (data!=false){
                    $('#div_recibe').load('ctcsdets.php');
                };
            });
        e.preventDefault();
        }
    });
 
});
 

Al igual que en el caso anterior, si las fechas no están "vacías" contenido.php visualiza mediante in IF el contenido html del mismo que es el que se carga en el div.


En ambos casos se cumple el propósito de visualizar la información pedida por el usuario pero quiero regresar a mi pregunta inicial a ver si aclaro lo siguiente:

a. Qué diferencias de fondo hay entre estos dos métodos y cual es mejor de ellos para cargar y mostrar el resultado?

b. Qué ventajas o desventajas tiene su uso y en qué casos se debe usar uno u otro método?

[sander]

Hola.

Primero que nada me parece que tus codigos ni siquiera los has corrido por que es imposible que te den el mismo resultado como tu afirmas, tratare de explicarte brevemente por que, leete los comentarios que pongo en tu codigo.

Código Javascript:

}
$(document).ready(function(){
 
    $("#boton1").click(function(e){
        if (!e.isDefaultPrevented()){
            $.post("contenido.php",function(data){ //esta funcion post manda mediante ajax datos post a un archivo y la respuesta la recibe en la variable data
                if (data!=false){
                    $('#div_recibe').html(data); //luego con esta funcion html insertas ese data en el div di_recibe formatenado el resultado en html
                };
            });
        e.preventDefault();
        }
    });
 
});
 

Código Javascript:

$(document).ready(function(){
 
    $("#boton1").click(function(e){
        if (!e.isDefaultPrevented()){
            $.post("contenido.php",function(data){
                if (data!=false){
                    $('#div_recibe').load('ctcsdets.php');// Aca lo que ta hace es cargar el resultado del archivo "ctcsdets.php" en el div_recibe, desechando asi el envio por post y el contenido de la variable data
                };
            });
        e.preventDefault();
        }
    });
 
});
 

Como te podrás dar cuenta tus códigos nunca darán el mismo resultado, por eso supongo que ni siquiera los corriste.

También explicarte que la función .html() de jquery lo que hace es insertar en formato html a un elemento, no necesariamente tiene que venir de una petición ajax, puede ser generada por un javascript, xml, php, etc. el origen le es indiferente.

En cambio la función .load() lo que hace es cargar el resultado obtenido de una peticion ajax en el elemento establecido en formato html.

Ahora ves las diferencias:

1.- html() no te trae nada por ajax, load() siempre.
2.- con html() puedes insertar html desde cualquier origen, en load no, pues siempre sera resultado del ajax.

Espero puedas entenderlo ahora.

Saludos.

[miguelangelb]

En primer lugar discúlpa el error al acomodar el código para el ejemplo ya que se me olvidó cambiar el nombre del archivo que uso en el código real (ctcsdets.php) por el que estaba usando para el ejemplo (contenido.php)... lo cierto es que funciona en ambos casos.

Ahora bien, me queda bien claro que en éste caso en particular cualquiera de los dos métodos funciona similarmente por la forma en que está estructurado el contenido.php (en el código real ctcsdets.php) y te agradezco la explicación sobre la naturaleza de cada uno de los dos métodos.