Doble request de información con Ajax + PHP

[kapitol]

[Solucionado!!!!] 2-6-2010



Hola gente!! Os comento mi reto:

Estoy construyendo una web cuya index va cargando mediante ajax las demás páginas del sitio...para que las páginas se carguen con una animación jquery se le pasa por get una "señal" que es "ajax=true"...algo así:

Código HTML:

$j(document).ready(function () { 
	function loadContent(menu_item) {
		showLoader();
		var urlToLoad = menu_item;
		$j.ajax({
			type: "GET",
			url: urlToLoad,
			data: "ajax=true",

			success: function(msg) {
				$j(".container100x100").append(msg);
				loading = false;
				open_section();
				hideLoader();
			}
		});
	}

todo me funcionaba perfecto hasta que me he puesto a pasar por método GET id´s de noticias, es decir hasta que he dinamizado con php la página...

si yo ejecuto la consulta "a pelo" con lo siguiente todo funciona:

data: "ajax=true&id=X"

pero claro ese "X" no es fija y necesita ser leida de la URL...he probado con muchas maneras de recoger por jquery o JS la variable del GET y darsela al parametro "data:" creo que se recoje bien, pero a la hora de decirselo al parametro "data:" ya no va

¿estoy desencaminado? ¿habría otra forma de hacerlo?

muchas gracias a todos por vuestro valioso tiempo, salud!

[XLogus]

Hola

Es muy fácil hacer eso, no requieres ajax, sólo un poquito de PHP e imaginación para arreglar eso, si tienes la url:

www.miweb.com/index.php?ajax=true&id=345

La forma de invocar esa variable GET dentro de tu javascript sería algo así

Código:

type: "GET",
			url: urlToLoad,
			data: "ajax=true&id=<?php echo $_GET['id'] ?>"

De esta forma si ejecutas tu página verás que el código fuente toma el valor de la URL, pasando a verse algo así:

Código:

type: "GET",
			url: urlToLoad,
			data: "ajax=true&id=345"

[kapitol]

hola XLogus !! gracias por contestar :D

resulta que el código que pegue arriba lo tengo junto con bastantes más lineas en archivo js que sólo es llamado desde el index (ya que hace de "container" de toda la página)

de todas formas he probado a colocarlo como texto plano en el index y no funciona ya lo que antes funcionaba (la animación de carga de las demás páginas)

[kapitol]

intuyo, que el problema está en la serialización de lo que ocurre en la página...si yo escribo ese php que me comentas, en el momento de escribirse, como php es lo 1º de la lista de ejecución, está tomando la URL de la index, en la que no hay id alguna...y claro al llegar a la siguiente página no me sale la noticia seleccionada porque tendría que "recargarse" esa escritura para que la cogiera

voy a pegar todo el tocho de *.js aqui de todas maneras

[kapitol]

Código:

var siteTitle = "Mi sitio Web XXXXXXX";
var $j = jQuery.noConflict();
var tabSpeed = 500;
var slideShowSpeed = 1000;
var slideShowTimeout = 10000;
var slideTransitionEffect = "easeInOutBack";
var transitionTime = 1200; // page changing speed
var loading = false;

var homePageSlideImageWidth = 640;

$j(document).ready(function () { 
	function loadContent(menu_item) {
		showLoader();
		var urlToLoad = menu_item;
		var tuputamadreya = window.location.href;
		var i = tuputamadreya.split("id="); 
		$j.ajax({
			type: "GET",
			url: urlToLoad,
			data: "ajax=true&id="+i[1],

			success: function(msg) {
				$j(".container100x100").append(msg);
				loading = false;
				open_section();
				hideLoader();
			}
		});
	}
	function open_section() {
		$j(".size100x100:first").animate({left: "-100%"}, {queue:false, duration:transitionTime, easing:"easeInOutBack"} );
		$j(".size100x100:last").animate({left: "-50%"}, {queue:false, duration:transitionTime, easing:"easeInOutBack", "complete" : function() {removeContainer()} } );
		//
		themeBehaviours();
	}
	function removeContainer() {
		var containerToDelete = $j(".size100x100:first");
		var containerToPosition = $j(".size100x100:last");
		$j(containerToDelete).remove();
		$j(containerToPosition).css({"left":0});
	}
	function showLoader() {
		$j(".ajax_loader").remove();
		$j("body").append('<div class="ajax_loader">Cargando ...</div>');
		$j(".ajax_loader").fadeOut(0).fadeIn("slow");
	}
	function hideLoader() {
		$j(".ajax_loader").fadeOut("slow", function() { $j(this).remove(); });
	}
	
	//easeInOutExpo, easeInOutElastic
	function themeBehaviours() {
		linksBehaviour();
		inputsBehaviour();
		slideshowBehaviour();
		tabsBehaviour();
		thumbnailBehaviour();
		portfolioBehaviour();
		themeCommonBehaviour();
		accordionBehaviour();
	}
	
	function linksBehaviour () {
		$j("#header a, .ajax_link").click(function () { 
			if ($j(this).hasClass("current-item") == false && loading == false) {
				loading = true;
				//$j(".current-item").removeClass("current-item");
				//$j(this).addClass("current-item");
				//loadContent($j(this).attr("href"));
				SWFAddress.setValue($j(this).attr("href"));
			}
			return false;
		});
	}
	
	function handleChange(event) {
		if (event.path != "/" && event.path != "respond") {
			$j(".small_slideshow, .tabs").each(function(){
				$j(this).cycle('stop');				
			});
			//
			var path = event.path;
			if (path.substr(path.length - 1) != '/') {
				path += '/';
			}
			var pathToLoad = event.path.substr(1);
			SWFAddress.setTitle(siteTitle + pathToLoad);
			$j(".current-item").removeClass("current-item");
			$j("#header a").each(function(){
				if ($j(this).attr("href") == pathToLoad) {
					$j(this).addClass("current-item");
				}
			});
			loadContent(pathToLoad);
		}
	}
	SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleChange);
});

[XLogus]

Ahi esta el error no puedes usarlo como archivo con extensión js, sino en la cabecera de un archivo PHP para que sea ejecutado.

Otra forma aunque más complicada es ponerle extensión PHP con una cabecera javascript para que sea convertido, pero mejor prueba con la primera opción y fijate siempre en el código fuente generado para ver si hace efecto el PHP.

[kapitol]

si, también lo he probado como cabecera, pero es lo que comentaba antes...

Iniciado por kapitol

intuyo, que el problema está en la serialización de lo que ocurre en la página...si yo escribo ese php que me comentas, en el momento de escribirse, como php es lo 1º de la lista de ejecución, está tomando la URL de la index, en la que no hay id alguna...y claro al llegar a la siguiente página no me sale la noticia seleccionada porque tendría que "recargarse" esa escritura para que la cogiera

existe un problema espacio-temporal jajaja...cuando intento recoger y pasar el GET de la url por AJAX aún no esite, existe en un futuro inmediatamente próximo...realmente no contemplo recargar la página que si tiene realmente ya la id en la url, porque la animación también se repetiría y queda fatal...

es un problema de planteamiento, y aunque parece facil no lo es!

gracias por ayudarme, a ver si se te ocurre algo :D

[XLogus]

La verdad no me gusta mucho la forma en que estas planteandolo, no veo xq estas invocando javascript desde un archivo ajax no hace falta hacer eso ya que aplicando un poco de los eventos de jquery con .live deberías hacer que un sólo javascript se aplique a todos los contenidos invocados usando ajax.

¿Cómo capturo el id?
Pues coloca el id dentro de un campo hidden o como un atributo, incluso es muy común en jquery ponerlo como parte del nombre de la clase algo como:

Código:

<input type="hidden" name="id" id="id" value="123" />

y luego tendrías que capturarlo usando el propio jquery, algo como:

Código:

data: "ajax=true&id="+$("#id").val(),

Hay que pulir un poco mi código para que funcione al 100% pero espero te haya dado una idea más clara

[kapitol]

mmmm...eso del hidden es interesante XLogus...ya veo un poco de luz...muchas gracias por como me estas ayudando

el caso es que tengo un slider que pinto por php desde una BD...cada una de las fotos del slider es el link que lleva a cada artículo...el html resultante es este...

Código:

<ul class="accordion">

<li class="accordionSlide">
<div>
         <h2><p>titulo1</p></h2>
         <p>texto descriptivo1...</p>
</div>
<input type="hidden" name="ide" class="ide" id="ide" value="1"/>
<a title="n" href="miurl.php">
<img alt="n" src="foto1.jpg"height="400" width="640" />
</a>
</li>

<li class="accordionSlide">
<div>
<h2><p>titulo2</p></h2>
<p>texto descriptivo2...</p>
</div>
<input type="hidden" name="ide" class="ide" id="ide" value="2"/>
<a title="n" href="miurl.php">
<img alt="n" src="foto2.jpg"height="400" width="640" />
</a>
</li>    
                
</ul>

según tu consejo, el "data:" está ahora mirando el elemento $j("ide")...ahora mismo la cosa funciona pero siempre me pasa al mismo articulo, que es el primero que se pinta, pique la foto que pique, o sea el 1...

ahora lo único que falta es que, según lo que haga el navegante, el js sepa que value debe prevalecer, el caso es que no se me ocurre como!! (quizás podamos probar algo con el onclick(); o similar)

pd:
por cierto ¿no había un botón aquí para darle karma a la gente? gente como tú se merece tener más de dos estrellitas, aunque a lo mejor va por el número de mensajes no se!

[XLogus]

Hola
Me vas a querer matar por lo que voy a decir, pero viendo lo que estas programando mejor olvidate de hacer llamadas ajax cada vez que cambia el slide por lo siguiente:

- Es muy lento y corres el riesgo que no se cargue el texto en el momento adecuado
- Generas un muy alto consumo de ancho de banda
- Saturas el servidor MySQL innecesariamente

Lo que normalmente se hace es cargar todo el contenido de la base de datos en un XML (de ahi el nombre ajax), pero para no enredarte más simplemente haz un bucle en PHP que imprima todas las noticias de la base de datos, algo como:

Código:

<ul id="slider">
  <li>
     <h2>titulo</h2>
     <a href="aqui el link">Leer más</a>
  </li>
<li>
     <h2>titulo</h2>
     <a href="aqui el link">Leer más</a>
  </li>
<li>
     <h2>titulo</h2>
     <a href="aqui el link">Leer más</a>
  </li>
 etc etc etc
</ul>

Y ahora hay un plugin muy sencillo que lo convierte en slider, que lo bajas aqui http://jquery.malsup.com/cycle/

Y con 5 líneas de código (revisa la ayuda) lo implementas con el efecto que quieras (cada <li> es un slide)
http://jquery.malsup.com/cycle/begin.html

[kapitol]

Hola de nuevo!! No se si no me he explicdo bien en mi anterior mensaje, pero justamente lo que me comentas tú es lo que ya hago desde un principio...recorrer la BD y pintar el slide con php

mi duda era referente al campo hidden que apuntabas tu en tu anterior post...ya que la id que pilla ek Jquery habría que "filtrarla" según lo que haga el usuario !

te paso por privado la url de la página en pruebas para que, junto con mi mensaje anterior, entiendas más visualmente que es lo que ocurre :D

[kapitol]

listo !!

el onclick que me suponía ha funcionado...muchas gracias XLogus por tu orientación, muchas muchas :D