como situo la respuesta de load() jquery

RIVERMILLOS · #1 (**permalink**) 14/03/2010, 11:32

hola quiciera saber cuando llamo la funcion load de jquery como hago para que echo de la pagina php imprima en una parte pretederminada.......quiero hacer una galeria por paginacion pero no se como hacer para que cuando cambie de "pagina " el resultado de las fotos queden donde estaban las anteriores.

saludos

mayid · #2 (**permalink**) 14/03/2010, 11:50

Si tenes un div identificado, y queres actualizar sus contenidos, podes hacer esto:

<div id="target">
... contenidos ...
</div>

$("#target").html("<p>Nuevos contenidos que reemplazan a los anteriores</p>");

De similar manera, pero usando ajax, podrías hacer:

$("#target").load("url.php");

Y vas a tener tu php sobreescribiendo el contenido original.

nota: si no lo quisieras sobreescribir, usarías metodos como .append()

RIVERMILLOS · #3 (**permalink**) 15/03/2010, 07:11

Cita:

Iniciado por mayid

Si tenes un div identificado, y queres actualizar sus contenidos, podes hacer esto:

<div id="target">
... contenidos ...
</div>

$("#target").html("<p>Nuevos contenidos que reemplazan a los anteriores</p>");

De similar manera, pero usando ajax, podrías hacer:

$("#target").load("url.php");

Y vas a tener tu php sobreescribiendo el contenido original.

nota: si no lo quisieras sobreescribir, usarías metodos como .append()

hola muchas gracias por tu respuesta ,tengo otra duda pero si quiero mandar los datos a la misma url me refiero el script de jaquey esta en home.php y si en el load quiero escribir home.php?hola es valido???

saludos...

mayid · #4 (**permalink**) 15/03/2010, 07:19

Depende. Si tenes un condicional en PHP, que evite recarga todo el <head>, los scripts, etc,etc,etc, es válido. Pero me parece que hacerlo así sería ensuciar tu pagina. Pone el php en pagina aparte, que es mucho mejor. Si necesitas pasar variables, eso no es ningun problema.

RIVERMILLOS · #5 (**permalink**) 15/03/2010, 07:24

Cita:

Iniciado por mayid

Depende. Si tenes un condicional en PHP, que evite recarga todo el <head>, los scripts, etc,etc,etc, es válido. Pero me parece que hacerlo así sería ensuciar tu pagina. Pone el php en pagina aparte, que es mucho mejor. Si necesitas pasar variables, eso no es ningun problema.

hola mira este es el codigo que necesito recargar por jquery ....la variable tmp es un array con los nombres de fotos pero quiero que tome solo de ha 10 y que con un link me tome las siguiente 10 y las actualice .....ojala me pudieras ayudar como re estructuro todo en otro php...

Código:

if(isset($_GET['resul'])){

$tmp =$_SESSION['array'];

if(count($tmp)==0){

echo '
  <script type="text/javascript">
  alert("No Hay Registros");
  </script>';
			
	}else{
		echo'
<div id="fotos"></div>
<div class="foto">
<ul class="lul">
';
		$gale = new gallery();
		$gale->loadFolder('../FTP/'.$folder.'');
		sort($gale->files);
		for($i=0; $i<count($tmp);$i++){
			echo'<li><img width="100" height="100" id="'.$tmp[$i].'" border="4px" class="thumb" src="'.$gale->path.'/'.$tmp[$i].'" /></li>';
		}

echo'</ul>
</div>
<img id="prev" class="prev" src="estilo/images/iqz.png"></img>
<img id="next" class="next" src="estilo/images/dere.png"></img>';	
	}
}

saludos

mayid · #6 (**permalink**) 15/03/2010, 07:37

Cita:

<ul class="lul">
';
$gale = new gallery();
$gale->loadFolder('../FTP/'.$folder.'');
sort($gale->files);
for($i=0; $i<count($tmp);$i++){
echo'<li><img width="100" height="100" id="'.$tmp[$i].'" border="4px" class="thumb" src="'.$gale->path.'/'.$tmp[$i].'" /></li>';
}

echo'</ul>

A esto lo podes tener perfectamente en otro pagina. Y pasarle una variable GET para que cargue lo necesario:

$("#target").load("url.php?var=val", function(respuesta){alert (respuesta);});

RIVERMILLOS · #7 (**permalink**) 15/03/2010, 08:47

Listo ya puedo hacer lo que tu me dijiste pero tengo un problema

este trozo de codigo era utilizado por otros script de jquery y ya no lo toma como puedo hacer para que los tome .......

Código:

for($i=0; $i<count($tmp);$i++){
echo'<li><img width="100" height="100" id="'.$tmp[$i].'" border="4px" class="thumb" src="'.$gale->path.'/'.$tmp[$i].'" /></li>';
}

saludos

mayid · #8 (**permalink**) 15/03/2010, 09:01

No se si entiendo. Ese codigo PHP imprime algo de html. Luego de impreso, jquery puede modificarlo. SI el problema que estas teniendo es que jquery intenta modificar algo que todavía no existe... entonces hay prioridades que resolver. Fijate que las llamadas ajax tienen una sección para ejecutar codigo "tras haber cargado los contenidos":

$("#target").load("url.php?var=val", function(respuesta){alert (respuesta);});

RIVERMILLOS · #9 (**permalink**) 15/03/2010, 09:16

Cita:

Iniciado por mayid

No se si entiendo. Ese codigo PHP imprime algo de html. Luego de impreso, jquery puede modificarlo. SI el problema que estas teniendo es que jquery intenta modificar algo que todavía no existe... entonces hay prioridades que resolver. Fijate que las llamadas ajax tienen una sección para ejecutar codigo "tras haber cargado los contenidos":

$("#target").load("url.php?var=val", function(respuesta){alert (respuesta);});

mmm creo que no me entendiste o no te entendi lo que me dijiste XD , te explico bn ese codigo yo lo tenia en otro php antes de que tu me dijera que lo pasara a otro cuando uno le daba click en una imagen por jquery mostraba la imagen en un div y le tenia el efecto carrusel pero ahora ya no me toma esos efectos es mi pregunta ...

saludos

mayid · #10 (**permalink**) 15/03/2010, 09:30

Sostengo lo que dije. No hablemos de que jquery usa codigo PHP porque eso no es posible. Hablemos del html. Que lo imprimas desde la misma pagina o desde una pagina externa da perfectamente lo mismo. Tu enfoque tiene que ser en el lado cliente. Hay html para manipular?

RIVERMILLOS · #11 (**permalink**) 15/03/2010, 09:42

Cita:

Iniciado por mayid

Sostengo lo que dije. No hablemos de que jquery usa codigo PHP porque eso no es posible. Hablemos del html. Que lo imprimas desde la misma pagina o desde una pagina externa da perfectamente lo mismo. Tu enfoque tiene que ser en el lado cliente. Hay html para manipular?

si manipula las fotos ....

saludos

mayid · #12 (**permalink**) 15/03/2010, 09:45

Yo a veces lo que hago es imprimir la primera pagina usando include() de PHP. Y luego, por ejmplo para la paginación que querés, uso ajax. Pero lo mejor es usar siempre ajax, porque si no entrarías en problemas con las rutas relativas.

RIVERMILLOS · #13 (**permalink**) 15/03/2010, 09:49

que pena contigo pero no estoy entendiendo....osea que no puedo hacer es manipular con jquery lo que devuelve .load().. eso es.. creo que estamos hablando de dos cosas muy diferente..

saludos

RIVERMILLOS · #14 (**permalink**) 15/03/2010, 10:06

ya hice una pruba pero quiero saber si asi es que lo tenia que hacer .

los efectos que me faltaban los coloque hay mismo en el php nuevo que me dijiste..

Código:

<?php
session_start();
require_once '../Logic/gallery.php';
$folder=$_SESSION['usuario'];
$tmp=$_SESSION['array'];
$gale = new gallery();
$gale->loadFolder('../FTP/'.$folder.'');
sort($gale->files);

for($i=0; $i<count($tmp);$i++){
echo'<li><img width="100" height="100" id="'.$tmp[$i].'" border="4px" class="thumb" src="'.$gale->path.'/'.$tmp[$i].'" /></li>';
}
echo'
 <script type="text/javascript">
 
$(function() {
	$(".foto").jCarouselLite({
	        btnNext: ".next",
	        btnPrev: ".prev",
	        visible:4,
	        circular :false,
	        speed:100
	   });
});

$(document).ready(function() {
	$(".thumb").mouseover(function() {
					// obtenemos el valor del atributo ID de la miniatura
						var imagen = this.id;
						// luego, asignamos ese valor, como fondo del <div> con ID "foto"

						$("#fotos").css("background-image",
								"url(../FTP/'.$folder.'/" + imagen + ")");
					
					
		});
});

  </script>
';
?>

saludos

mayid · #15 (**permalink**) 15/03/2010, 11:13

Cita:

osea que no puedo hacer es manipular con jquery lo que devuelve .load().. eso es.. creo que estamos hablando de dos cosas muy diferente..

Es que a veces al usar ajax hay un problema de sincronicazión. Eso es lo que digo. Espero que alguien más opine sobre esto, a ver si estamos hablando de cosas diferentes o no.

Tu script se ve bien!

Dany_s · #16 (**permalink**) 15/03/2010, 12:53

a ver, vos haces un load y te carga una lista con imágenes que tienen la clase "thumb"

Código HTML:

<li><img width="100" height="100" id="algunid" border="4px" class="thumb" src="laurl" /></li>

a esas imágenes vos queres asignarle un evento mouseover

Código HTML:

	$(".thumb").mouseover(function() {
					// obtenemos el valor del atributo ID de la miniatura
						var imagen = this.id;
						// luego, asignamos ese valor, como fondo del <div> con ID "foto"

						$("#fotos").css("background-image",
								"url(../FTP/'.$folder.'/" + imagen + ")");
					
					
		});

pero ese evento no te fnciona al hacer el onload?

lo que pasa es jquery no maneja eventos en elementos creados dinamicamente con ajax, append, etc

para eso está el evento live, simplemente cambia la linea

Código HTML:

$(".thumb").mouseover(function() {

por

Código HTML:

$(".thumb").live('mouseover', function() {

no creo que sea muy limpio hacer un load y que me devuelva html y código jquery como respuesta, tratá que en tu php se genere html y lo que tenias de jquery ponelo en un archivo js

RIVERMILLOS · #17 (**permalink**) 15/03/2010, 13:40

Cita:

Iniciado por Dany_s

a ver, vos haces un load y te carga una lista con imágenes que tienen la clase "thumb"

Código HTML:

<li><img width="100" height="100" id="algunid" border="4px" class="thumb" src="laurl" /></li>

a esas imágenes vos queres asignarle un evento mouseover

Código HTML:

	$(".thumb").mouseover(function() {
					// obtenemos el valor del atributo ID de la miniatura
						var imagen = this.id;
						// luego, asignamos ese valor, como fondo del <div> con ID "foto"

						$("#fotos").css("background-image",
								"url(../FTP/'.$folder.'/" + imagen + ")");
					
					
		});

pero ese evento no te fnciona al hacer el onload?

lo que pasa es jquery no maneja eventos en elementos creados dinamicamente con ajax, append, etc

para eso está el evento live, simplemente cambia la linea

Código HTML:

$(".thumb").mouseover(function() {

por

Código HTML:

$(".thumb").live('mouseover', function() {

no creo que sea muy limpio hacer un load y que me devuelva html y código jquery como respuesta, tratá que en tu php se genere html y lo que tenias de jquery ponelo en un archivo js

muchas gracias por tu respuesta , pero entendi lo que dices que mi php genere el html.

saludos

mayid · #18 (**permalink**) 15/03/2010, 13:53

Ha de ser eso, Dany. Claro! Que bueno que lo señalaste.

@Rivermillos: Dany ha querido decir "que el segundo archivo PHP genere el html" al decir "tratá que en tu php se genere html".

RIVERMILLOS · #19 (**permalink**) 15/03/2010, 13:55

Cita:

Iniciado por mayid

Ha de ser eso, Dany. Claro! Que bueno que lo señalaste.

@Rivermillos: Dany ha querido decir "que el segundo archivo PHP genere el html" al decir "tratá que en tu php se genere html".

pues es precisamente lo que tengo aqui no ??

Código:

<?php
session_start();

require_once '../Logic/gallery.php';
$folder=$_SESSION['usuario'];
$tmp=$_SESSION['array'];
$gale = new gallery();
$gale->loadFolder('../FTP/'.$folder.'');
sort($gale->files);
for($i=0; $i<count($tmp);$i++){
echo'<li><img width="100" height="100" id="'.$tmp[$i].'" border="4px" class="thumb" src="'.$gale->path.'/'.$tmp[$i].'" /></li>';
}
echo'
<script type="text/javascript">
$(function() {
	$(".foto").jCarouselLite({
	        btnNext: ".next",
	        btnPrev: ".prev",
	        visible:4,
	        circular :false,
	        speed:100
	   });});
</script>
';
?>

saludos

Dany_s · #20 (**permalink**) 15/03/2010, 14:18

vamos a ver esto, modifique para que sea algo sencillo

si en el index imprimis la lista de imagenes y le asignas el evento mouseover funciona

Código PHP:

 
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
    $( function (){
        $(".thumb").mouseover(function() {
            var imagen = this.id;
            $("#fotos").html("el valor de id "+imagen);
        });
    });
  </script>
</head>
<body>
    <div id="fotos"></div>
<?php
echo "<ul>";
for($i=0; $i<5;$i++){
    echo'<li><img width="10" height="10" id="'.$i.'" border="4px" class="thumb" src="url'.$i.'" /></li>';
}
echo "</ul>";
?>

</body>
</html>

-----------------------------

otra puede ser que el código php y jquery esté en otro archivo y lo cargo con load

el archivo index que llama a galeria.php va a ser

Código HTML:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
    $( function (){
        //Cargo la galeria que se encuentra en galeria.php en el div con id "galeria
        $('#galeria').load("galeria.php");
    });
  </script>
</head>
<body>
    <div id="fotos"></div>

    <div id="galeria"></div>

</body>
</html>

el archivo php galeria.php con la porción de jquery va a ser

Código PHP:

  <?php
echo "<ul>";
for($i=0; $i<5;$i++){
    echo'<li><img width="10" height="10" id="'.$i.'" border="4px" class="thumb" src="url'.$i.'" /></li>';
}
echo "</ul>";
?>
<script type="text/javascript">
$(".thumb").mouseover(function() {
    var imagen = this.id;
    $("#fotos").html("el valor de id "+imagen);
});
</script>

eso también funciona porque el codigo jquery esta en el archivo php que llamo con load

-------------------------

pero si está separado el html con jquery en el index:

Código HTML:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
    $( function (){
        //Cargo la galeria que se encuentra en galeria.php en el div con id "galeria
        $('#galeria').load("galeria.php");

        $(".thumb").mouseover(function() {
            var imagen = this.id;
            $("#fotos").html("el valor de id "+imagen);
        });

    });
  </script>
</head>
<body>
    <div id="fotos"></div>

    <div id="galeria"></div>

</body>
</html>

y en galeria.php tengo solo php que imprime la lista de imagenes

Código PHP:

  <?php
echo "<ul>";
for($i=0; $i<5;$i++){
    echo'<li><img width="10" height="10" id="'.$i.'" border="4px" class="thumb" src="url'.$i.'" /></li>';
}
echo "</ul>";
?>

eso no funciona porque la lista de imagen se crea dinamicamente con load y no se puede manejar eventos pero para arreglar eso existe el metodo live
reemplazas
$(".thumb").mouseover(function() {
por
$(".thumb").live('mouseover',function() {
y vas a ver que funciona

trata de que funcione primero con ejemplos similares sencillos que sean estáticos, la parte que posteas de php
como:
require_once '../Logic/gallery.php';
$folder=$_SESSION['usuario'];
$tmp=$_SESSION['array'];
$gale = new gallery();
$gale->loadFolder('../FTP/'.$folder.'');

y el loop que genera la lista no sirve, es solo para confusión

hace el html estático

RIVERMILLOS · #21 (**permalink**) 15/03/2010, 14:48

muchas gracias por tu respuesta yo lo tengo exactamente como el segundo ejemplo que colocaste....pero aun no entiendo que me quieres dar a entender ? osea mi codigo esta mal??

saludos

Dany_s · #22 (**permalink**) 15/03/2010, 15:13

jeje no, para nada

digo que te conviene publicar solo código html y jquery porque hay personas que te pueden ayudar pero como ven código php no llegan a entender que es lo que quieres hacer y por eso es mejor que te crees un ejemplo sencillo similar a tu problema con solo html/jquery y publiques eso así es más fácil de leer y más personas te pueden ayudar jeje

fijate de hacer algo sencillo solo con html y publica el código completo asi vemos como quedo todo y descubrimos el problema

RIVERMILLOS · #23 (**permalink**) 15/03/2010, 15:24

ahhh jajaja ya entendi jejeje pues ya no tengo el problema lo solucione asi ....

en mi index coloque el javascript

Código:

$(".thumb").live("click", function() {

// obtenemos el valor del atributo ID de la miniatura
						var imagen = this.id;
						// luego, asignamos ese valor, como fondo del <div> con ID "foto"

						$("#fotos").css("background-image",
								"url(../FTP/'.$folder.'/" + imagen + ")");
}
);

para que me funciones con lo que carga este php..

Código:

for($i=$ini;$i<$fin;$i++){
echo'<li><img width="100" height="100" id="'.$tmp[$i].'" border="4px" class="thumb" src="'.$gale->path.'/'.$tmp[$i].'" /></li>';
}

y ahora si toma los eventos.

mil gracias