Foros del Web » Programando para Internet » Javascript »

Plantilla Javascript

Estas en el tema de Plantilla Javascript en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/06/2011, 07:37
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 10 años, 4 meses
Puntos: 7
Plantilla Javascript

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...
  #2 (permalink)  
Antiguo 20/06/2011, 02:39
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 10 años, 4 meses
Puntos: 7
Pregunta Respuesta: Plantilla Javascript

nadie me puede ayudar?
  #3 (permalink)  
Antiguo 21/06/2011, 02:55
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 10 años, 4 meses
Puntos: 7
Respuesta: Plantilla Javascript

Cita:
Iniciado por paskuini Ver Mensaje
nadie me puede ayudar?
  #4 (permalink)  
Antiguo 21/06/2011, 08:11
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 8 años, 7 meses
Puntos: 192
Respuesta: Plantilla Javascript

Usá ajax.

El método .load() de jQuery es fácil de usar y está muy bien documentado.
__________________
nahueljose.com.ar
  #5 (permalink)  
Antiguo 21/06/2011, 08:29
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 10 años, 4 meses
Puntos: 7
Respuesta: Plantilla Javascript

muchas gracias nahuel :) te lo curras

load() - jQuery API
  #6 (permalink)  
Antiguo 12/07/2011, 05:41
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 10 años, 4 meses
Puntos: 7
Respuesta: Plantilla Javascript

no consigo hacerlo; alguien puede echarme un cable? y a ser posible, que sea un poco más específico... muchas gracias!
  #7 (permalink)  
Antiguo 12/07/2011, 06:35
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.098
Antigüedad: 15 años, 5 meses
Puntos: 790
Respuesta: Plantilla Javascript

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> 

Última edición por Panino5001; 12/07/2011 a las 06:41
  #8 (permalink)  
Antiguo 12/07/2011, 06:52
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 10 años, 4 meses
Puntos: 7
Respuesta: Plantilla Javascript

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.

Última edición por paskuini; 12/07/2011 a las 06:58
  #9 (permalink)  
Antiguo 12/07/2011, 07:08
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.098
Antigüedad: 15 años, 5 meses
Puntos: 790
Respuesta: Plantilla Javascript

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.
  #10 (permalink)  
Antiguo 12/07/2011, 07:44
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 10 años, 4 meses
Puntos: 7
Respuesta: Plantilla Javascript

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! :)
  #11 (permalink)  
Antiguo 14/07/2011, 03:33
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 10 años, 4 meses
Puntos: 7
Respuesta: Plantilla Javascript

¿?

Última edición por paskuini; 15/07/2011 a las 05:33
  #12 (permalink)  
Antiguo 18/07/2011, 05:06
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 10 años, 4 meses
Puntos: 7
Respuesta: Plantilla Javascript

rescatado de la página 6...
  #13 (permalink)  
Antiguo 19/07/2011, 02:41
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 10 años, 4 meses
Puntos: 7
Respuesta: Plantilla Javascript

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

Etiquetas: plantilla, var, variables
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:56.