Combinar Lightbox (jQuery) con datos en XML

juaniquillo · #61 (**permalink**) 09/03/2010, 10:49

Por lo que explica mayid (todavía no he leído bien el tema) el problema del each y el array pasa porque no se puede usar each con un array ya que no es un Objeto jquery. En la documentación de jQuery explican como podemos usar each con un array normal, en este caso:

Código Javascript:

Ver originalvar items = ["web","multimedia","movil","erp"];
    
$.each(items, function(index, value){
        console.log(value);
})

Se pasa el array como 1er argumento y una función anónima con dos argumentos: el index del array y el valor del array. De esa forma se puede obtener el valor.

Espero que esto ayude.

mayid · #62 (**permalink**) 09/03/2010, 11:03

Mil gracias Juaniquillo.

Entonces esto quedaría así (espero no olvidarme nada):

Cita:

$(document).ready(function(){
$.ajax({

type: "POST",

url: "xml/trabajos.xml",

async: false,

dataType: "text",

success: function(data) {

function stringToDoc(s) {
var xml;
if (window.ActiveXObject) {
xml = new ActiveXObject('Microsoft.XMLDOM');
xml.async = 'false';
xml.loadXML(s);
return xml;
}
else
xml = (new DOMParser()).parseFromString(s, 'text/xml');
return (xml && xml.documentElement && xml.documentElement.tagName
!= 'parsererror') ? xml : null;
};
xml = stringToDoc(data);

var items = ["web","multimedia","movil","erp"];

$.each(items, function(index, value){

$(xml).find(value).each(function(){ <- ¿En (this) pongo cada vez uno diferente (web, multimedia, movil y erp)?

titulo = $(this).find('titulo').text();
fecha = $(this).find('fecha').text();
info = $(this).find('empresa').text();

not = '<p>'+fecha+'</p><p>'+titulo+'</p><p>'+finfo+'</p>';

$(".noticias").append(not)

}) // fin de each xml

}) // fin de each de categoria

},

error: function(avisoError) {

// FUNCION PARA AVISAR DEL ERROR

};

}) // fin de llamada ajax

}) // fin de llamada dom ready

Mr_Raymon · #63 (**permalink**) 09/03/2010, 14:57

Me alegro de que alguien ayude en este tema, ya que al pobre mayid le tengo un poco "quemado" con mis dudas.

El array se como funciona aunque mas bien he trabajado con el con codigo ActionScript.

Voy a probar primero lo de juaniquillo y si veo que funciona pruebo despues lo de mayid.

Muchisimas Gracias a juaniquillo y mayid.

mayid · #64 (**permalink**) 09/03/2010, 16:27

Nota: Le escribí un MP a Juaniquillo resumiendo el caso, porque el tema se estaba empastando, y cuando es así... es difícil que alguien se sume...

Sobre lo que está arriba: fijate que yo solo hice copy+paste de lo de Juaniquillo. Es el mismo codigo. Pero con todo lo demás que ya habíamos probado y había funcionado.

juaniquillo · #65 (**permalink**) 09/03/2010, 17:00

Sip, mayid me envío un privado explicándome el problema. Yo ya tenía tiempo que no pasaba por el foro y la primera vez que vi este mensaje parecía un monstruo de 3 cabezas

Para resumir, yo sólo ayude con esa parte. Tienes suerte que hayan usuarios como mayid que tienen pasión por ayudar y de resolver problemas.

Espero que todo funcione

Mr_Raymon · #66 (**permalink**) 10/03/2010, 05:31

Siempre estare muy agradecido por toda la ayuda que estoy recibiendo de mayid. Por supuesto la colaboracion de juaniquillo es muy buena.

Pero dejandonos de cumplidos, vamos directos al tema :P

He probado primero lo que me dijo juaniquillo y me sale esto:

Cita:

Detalles de error de página web

Agente de usuario: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Fecha: Wed, 10 Mar 2010 11:14:47 UTC

Mensaje: 'console' no está definido
Línea: 38
Carácter: 9
Código: 0
URI: file:///C:/Documents%20and%20Settings/Casa/Escritorio/Prueba/js/funciones.js

¿Deberia salir alguna ventana o algo parecido a un alert?

Luego he probado lo que me dijo mayid y FUNCIONA :D, aunque no exactamente como queria pero lo menos FUNCIONA y esto ya es un paso importante. Ahora solo faltaria conseguir poner cada categoria del XML ("web","multimedia","movil","erp" ) en divisores correspondientes (.web, .multimedia, .movil, .erp).

mayid · #67 (**permalink**) 10/03/2010, 08:22

Lo de Juaniquillo fue esquematico. Vos sos respinsable de tomar del codigo lo que se ajusta a tu caso. En el ejemplo, la variable console no está definida para tu script. Era un ejemplo!

En cuanto a los distinto divisiores... sugiero que se llamen tal cual se llaman las categorias. Y las manejaremos desde esta linea:

$(".noticias").append(not)

Yo sugiero que dentro del "noticias", que supongo es un div, pongas cuatro divs mas, con un id. Y que luego alteres la linea que te marco así:

$(".noticias #"+value).append(not);

Ahora entro en duda de si hay que dejar o no un espacio: ".noticias#"+value

Te guias?

Mr_Raymon · #68 (**permalink**) 10/03/2010, 18:15

Pensaba que lo de juaniquillo era para comprobar datos. Otra cosa mas que he aprendido :P

En cuanto a lo que dices, sinceramente no entiendo como lo quieres hacer. Yo el codigo del HTML lo tengo asi:

Código HTML:

<div id="s1"><h1>WEB</h1><ul class="web"></ul></div>
<div id="s2"><h1>MULTIMEDIA</h1><ul class="multimedia"></ul></div>
<div id="s3"><h1>MOVIL</h1><ul class="movil"></ul></div>
<div id="s4"><h1>ERP</h1><ul class="erp"></ul></div>

Lo suyo seria meter cada categoria dentro de cada ul correspondiente con su seccion.

mayid · #69 (**permalink**) 10/03/2010, 18:28

Puedo ver que es lo que imprime el script?

Otra cosa. Donde esta el div .noticias? Existe por fuera de ese 4 divs?

La idea es generar una lista en cada div, basandose en los datos de xml?

Planeemos.

Mr_Raymon · #70 (**permalink**) 11/03/2010, 09:32

El codigo que has cogido imagino que lo habras copiado del ejemplo cuando me ayudaste a cargar simplemente el XML sin el array que puse para PROYECTOS y otro para NOTICIAS.

Hace mas de dos semanas que puse el codigo con el que trabajamos para sacar informacion con array y no funcionaba:

Código Javascript:

Ver original$.ajax({
 
type: "GET",
 
url: "xml/trabajos.xml",
 
async: false,
 
dataType: "text",
 
success: function(data) {
 
function stringToDoc(s) {
var xml;
if (window.ActiveXObject) {
xml = new ActiveXObject('Microsoft.XMLDOM');
xml.async = 'false';
xml.loadXML(s);
return xml;
}
else
xml = (new DOMParser()).parseFromString(s, 'text/xml');
return (xml && xml.documentElement && xml.documentElement.tagName
!= 'parsererror') ? xml : null;
};
xml = stringToDoc(data);
 
items = new Array(4);
 
items[0] = "web"; 
items[1] = "multimedia";
items[2] = "movil";
items[3] = "erp";
 
items.each(function(web){
 
$(xml).find(web).each(function(){ 
 
imagen = $(this).find('imagen').text()
info = $(this).find('info').text()
emp = $(this).find('empresa').text()
tecno = $(this).find('tecnologia').text()
miniatura = $(this).find('miniatura').text() 
proyecto = $(this).find('proyecto').text()
 
s_web = '<li><a href="'+imagen+'" rel="prettyPhoto[web]" title="<strong>'+proyecto+'</strong><br/>'+emp+'<br/>'+info+'<br/>'+tecno+'"><img src="'+miniatura+'" class="imagen_hover"></a></li>';
 
$(".web").append(s_web)
 
}) // fin de each
 
}) // fin del each por categorias
 
error: function(avisoErrorProyecto) {
 
alert("No ha sido posible cargar los datos. Por favor, intentelo mas tarde.");
 
}
 
})  // fin de llamada ajax
 
}

Estoy trabajando con PROYECTOS ya que las secciones "web", "multimedia", "movil" y "erp" corresponden a este tema (por asi decirlo). Por lo tanto no hay divisor para noticias y lo he adaptado para PROYECTOS.

El codigo de jQuery a ACTUAL es el siguiente:

Código Javascript:

Ver original//INICIO DE LAS FUNCIONES CORRESPONDIENTES //
$(document).ready(aplicaciones)
 
function aplicaciones(){
    
// Carga del XML en AJAX
 
    $.ajax({
    
    type: "GET",
    
    url: "xml/trabajos.xml",
    
    async: false,
    
    dataType: "text",
    
    success: function(data) {
    
    function stringToDoc(s) {
    var xml;
    if (window.ActiveXObject) {
    xml = new ActiveXObject('Microsoft.XMLDOM');
    xml.async = 'false';
    xml.loadXML(s);
    return xml;
    }
    else
    xml = (new DOMParser()).parseFromString(s, 'text/xml');
    return (xml && xml.documentElement && xml.documentElement.tagName
    != 'parsererror') ? xml : null;
    };
    xml = stringToDoc(data);
 
    var items = ["web","multimedia","movil","erp"];
 
    $.each(items, function(index, value){
 
    $(xml).find(value).each(function(){ 
 
    imagen = $(this).find('imagen').text()
    info = $(this).find('info').text()
    emp = $(this).find('empresa').text()
    tecno = $(this).find('tecnologia').text()
    miniatura = $(this).find('miniatura').text() 
    proyecto = $(this).find('proyecto').text()
    
    s_web = '<li><a href="'+imagen+'" rel="prettyPhoto[web]" title="<strong>'+proyecto+'</strong><br/>'+emp+'<br/>'+info+'<br/>'+tecno+'"><img src="'+miniatura+'" class="imagen_hover"></a></li>';
    
    $(".web").append(s_web)
 
    }) // fin de each xml
 
    }) // fin de each de categoria
 
    }
 
    }) // fin de llamada ajax
 
    } // fin de llamada dom ready

La idea es colocar cada seccion en cada <ul> ya que lo que habra dentro seran elementos <li> con la informacion. Es mas correcto asi, por lo menos a mi parecer.

Espero que no te hagas un lio con todo este rollo que he escrito.

mayid · #71 (**permalink**) 11/03/2010, 09:39

Ok. Creo que lo único que tenes que cambiar es esta linea:

$(".web").append(s_web)

En vez de que escriba "web", habría que escribir una variable. Que por cierto ya tenemos.

$("ul."+value).append(s_web)

Proba eso. Funcionará en tanto en tu html tengas en un para cada categoria, que se llame especificamente así:

<div id="s1"><h1>WEB</h1><ul class="web"></ul></div>
<div id="s2"><h1>MULTIMEDIA</h1><ul class="multimedia"></ul></div>
<div id="s3"><h1>MOVIL</h1><ul class="movil"></ul></div>
<div id="s4"><h1>ERP</h1><ul class="erp"></ul></div>

Mr_Raymon · #72 (**permalink**) 12/03/2010, 04:18

Ya esta hecho. Funciona perfecto tal y como yo quiero :D

Tambien he probado a hacerlo asi y es valido.

Cita:

$("."+value).append(s_web)

El punto se puede cambiar por la almohadilla (#).

Cita:

$("."+value).append(s_web)

Logicamente cambiando las clases por ids en el HTML.

Otra cosa para terminar que seguro le interesara a mas de uno.

Para los que utilizamos prettyPhoto o parecidos hay que tener en cuenta una cosa. Si ponemos asi el siguiente codigo que crea los li, no estarian separados sino sumaria todos los elementos del XML. Por ejemplo, si la seccion "web" tiene 10 imagenes, "multimedia" tiene otras 10, "movil" tiene 5 y "erp" tiene 3, sumaria en total 28 imagenes. En prettyPhoto apareceria 1 de 28 en vez de estar separadas por secciones.

Este es el codigo original:

Cita:

s_web = '<li><a href="'+imagen+'" rel="prettyPhoto[web]" title="<strong>'+proyecto+'</strong><br/>'+emp+'<br/>'+info+'<br/>'+tecno+'"><img src="'+miniatura+'" class="imagen_hover"></a></li>';

Se cambia lo que hay dentro de los corchetes de rel por +value+.

Este es el codigo modificado para la separacion:

Cita:

s_web = '<li><a href="'+imagen+'" rel="prettyPhoto['+value+']" title="<strong>'+proyecto+'</strong><br/>'+emp+'<br/>'+info+'<br/>'+tecno+'"><img src="'+miniatura+'" class="imagen_hover"></a></li>';

Y asi en vez de aparecer el total de todas las imagenes, solo seria el total de cada seccion y en mi opinion queda mejor. En vez de aparecer 1 de 28, apareceria pinchando en "web", 1 de 10 o en "erp", 1 de 3.

MUCHISIMAS GRACIAS a mayid por todo el esfuerzo que has hecho en este tema y por aguantar mis pesadas dudas.

EDITO: Acabo de "arreglar" un poco el tema para que sea mas facil de ver los codigos que escribi en su momento. Aunque no se como se puede cambiar el titulo para poner COMPLETADO Y SOLUCIONADO, si alguien lo sabe que lo escriba.