Plantilla Javascript

paskuini · #1 (**permalink**) 17/06/2011, 06:37

Tengo una plantilla hecha con Javascript. La plantilla tiene una serie de parámetros que varian en función del enlace desde donde abra la plantilla. Funciona de la siguiente manera:

En la página de origen:

Código:

<a href="destino.htm?var1=1&var2=2"></a>

Código:

/* Funcion para pasar variables de una página a otra */
	function pasarVariables(pagina,nombres){
		pagina +="?";
		nomVec=nombres.split(",");
		for(i=0;i<nomVec.length;i++)
		pagina +=nomVec[i] + "=" + escape(eval(nomVec[i]))+"&";
		pagina=pagina.substring(0,pagina.length-1);
		location.href=pagina;
	}

En la página de destino:

Código:

<script>document.write(var1)</script>

Código:

/* Funcion para pasar variables de una página a otra */
function pasarVariables(pagina,nombres){
pagina +="?";
nomVec=nombres.split(",");
for(i=0;i<nomVec.length;i++)
pagina +=nomVec[i] + "=" + escape(eval(nomVec[i]))+"&";
pagina=pagina.substring(0,pagina.length-1);
location.href=pagina;
}

Mi pregunta es: ¿cómo hacer para tomar las variables de un documento de texto en vez de hacerlo desde el enlace? Para tener un documento para cada producto que contenga su "ficha" por así decirlo...

paskuini · #2 (**permalink**) 20/06/2011, 01:39

nadie me puede ayudar?

paskuini · #3 (**permalink**) 21/06/2011, 01:55

Cita:

Iniciado por paskuini

nadie me puede ayudar?

Naahuel · #4 (**permalink**) 21/06/2011, 07:11

Usá ajax.

El método .load() de jQuery es fácil de usar y está muy bien documentado.

paskuini · #5 (**permalink**) 21/06/2011, 07:29

muchas gracias nahuel :) te lo curras

load() - jQuery API

paskuini · #6 (**permalink**) 12/07/2011, 04:41

no consigo hacerlo; alguien puede echarme un cable? y a ser posible, que sea un poco más específico... muchas gracias!

Panino5001 · #7 (**permalink**) 12/07/2011, 05:35

A ver si esto te da una idea:
archivo de texto tpl.txt:

Código PHP:

  <h1>{{TITULO}}</h1>
<p>{{CONTENIDO}}</p>

Achivo en el que usaríamos el template:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function http(){
    if(typeof window.XMLHttpRequest!='undefined'){
        return new XMLHttpRequest();    
    }else{
        try{
            return new ActiveXObject('Microsoft.XMLHTTP');
        }catch(e){
            alert('Su navegador no soporta AJAX');
            return false;
        }    
    }    
}
function requestGETCallbackParam(url,callback,params){
    var H=new http();
    if(!H)return;
    var p='';
    for(var i in params){
        p+='&'+i+'='+encodeURIComponent(params[i]);    
    }
    H.open('get',url+'?'+p+'&'+Math.random(),true);
    H.onreadystatechange=function(){
        if(H.readyState==4){
            callback(H.responseText);
            H.onreadystatechange=function(){}
            H.abort();
            H=null;
        }
    }
    H.send(null);
}
function cargarProducto(cambios){
    requestGETCallbackParam('tpl.txt',function(r){
                                           var t=r;
                                           for(i in cambios){
                                                t=t.split('{{'+i+'}}').join(cambios[i]);   
                                           }
                                           document.getElementById('prod').innerHTML=t;
                                      },{});
}
</script>

</head>

<body>
<div id="prod"></div>
<form>
<input onclick="cargarProducto({TITULO:'Este es un título',CONTENIDO:'Este es un contenido'})" type="button" value="prod1" /><input onclick="cargarProducto({TITULO:'Este es un título diferente',CONTENIDO:'Este es un contenido diferente'})" type="button" value="prod2" />
</form>
</body>
</html>

O mejor:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function http(){
    if(typeof window.XMLHttpRequest!='undefined'){
        return new XMLHttpRequest();    
    }else{
        try{
            return new ActiveXObject('Microsoft.XMLHTTP');
        }catch(e){
            alert('Su navegador no soporta AJAX');
            return false;
        }    
    }    
}
function requestGETCallbackParam(url,callback,params){
    var H=new http();
    if(!H)return;
    var p='';
    for(var i in params){
        p+='&'+i+'='+encodeURIComponent(params[i]);    
    }
    H.open('get',url+'?'+p+'&'+Math.random(),true);
    H.onreadystatechange=function(){
        if(H.readyState==4){
            callback(H.responseText);
            H.onreadystatechange=function(){}
            H.abort();
            H=null;
        }
    }
    H.send(null);
}
function cargarProducto(cambios){
    requestGETCallbackParam('tpl.txt',function(r){
                                           var t=r.replace(/{{[^}]*}}/g, function(key){
                                                                              return cambios[key.slice(2,-2)] || '';
                                                                           });
                                           document.getElementById('prod').innerHTML=t;
                                      },{});
}
</script>

</head>

<body>
<div id="prod"></div>
<form>
<input onclick="cargarProducto({TITULO:'Este es un título',CONTENIDO:'Este es un contenido'})" type="button" value="prod1" /><input onclick="cargarProducto({TITULO:'Este es un título diferente'})" type="button" value="prod2" />
</form>
</body>
</html>

paskuini · #8 (**permalink**) 12/07/2011, 05:52

Código HTML:

<form>
<input onclick="cargarProducto({TITULO:'Este es un título',CONTENIDO:'Este es un contenido'})" type="button" value="prod1" /><input onclick="cargarProducto({TITULO:'Este es un título diferente',CONTENIDO:'Este es un contenido diferente'})" type="button" value="prod2" />
</form>

La idea es que el contenido y el título no se encuentren en el mismo documento; si no en uno separado... cada producto con su página en .txt desde el cual se sacan los datos para introducirlos en la web...
entonces, de alguna forma deberia tomar la referencia del producto (ID)

Código:

function cargaDatos(ref) {

Y en función de la referencia que sea, que busque entre los archivos -a los que se les puede poner de nombre la referencia- (que contienen variables con los mismos nombres pero distinto contenido) y las envíe a la plantilla.

Panino5001 · #9 (**permalink**) 12/07/2011, 06:08

Pero ese no es el concepto de plantilla o template. Para eso, basta cambiarle el nombre a los archivos de texto (1.txt, 2.txt, elIdQueSea.txt) y en lugar de llamar a tpl.txt llamar a esos archivos.

paskuini · #10 (**permalink**) 12/07/2011, 06:44

hm... si te soy sincero, no acabo de comprender muy bien el código; me lo tendría que leer unas cuantas veces más, jeje (soy un poco negado), pero al ver aquello en el onClick... eso se parece a lo que tengo por ahora, que carga los datos que le das desde el enlace.... entonces, no acabo de entender cómo funciona. Seria mucho pedir que me lo expliques un poquito? o si puedes comentarme el código lo justo para saber qué es lo que hace cada instrucción... así, tambien aprendo más deprisa. Muchas gracias por todo, panino! :)

paskuini · #11 (**permalink**) 14/07/2011, 02:33

¿?

paskuini · #12 (**permalink**) 18/07/2011, 04:06

rescatado de la página 6...

paskuini · #13 (**permalink**) 19/07/2011, 01:41

... otra vez no, por favor!! ...no me creo q nadie en todo el foro me sepa ayudar...