Foros del Web » Programando para Internet » Javascript » Frameworks JS »

problema para mostar contenido de etiquetas <DIV>

Estas en el tema de problema para mostar contenido de etiquetas <DIV> en el foro de Frameworks JS en Foros del Web. Hola a todos…. Nuevamente necesito de su ayuda, porque soy novato en AJAX y no tengo ni idea de como salir de este problema con ...
  #1 (permalink)  
Antiguo 16/10/2008, 10:55
Avatar de gisek  
Fecha de Ingreso: julio-2008
Mensajes: 12
Antigüedad: 15 años, 9 meses
Puntos: 0
problema para mostar contenido de etiquetas <DIV>

Hola a todos….

Nuevamente necesito de su ayuda, porque soy novato en AJAX y no tengo ni idea de como salir de este problema con AJAX.
Estoy armando un sistema que consulta un base de datos, esta DB almacena archivos PDF que son relacionados a clientes, el caso es que estoy atorado a la hora de mostrar estos PDF´s en una ventana (popoup AJAX) que contiene Datos de la consulta un menú tipo TAB´s ó de Pestañas; estas pestañas son etiquetas <div> llamada tabs y en cada una de ellas necesito ó pretendo que al dar click se muestre cada uno de los pdf´s del cliente consultado sobre otra etiqueta <div> llamada content.

Espero que me haya explicado ó mejor dicho que me hayan entendido. Ojala puedan orientarme y ayudarme…. Saludos.

Este es el código CSS y HTML que dibuja la estructura. Ojala puedan orientarme y ayudarme al como realizar el código en ajax para solucinar este lio.
Código HTML:
<style type="text/css">
body {
	margin: 0px 0px 0px 0px;
}
#container {
	margin-top:15px;
	margin-left:15px;
	width:669px;
}
.tabs {
	margin-right:10px;
	width:50px;
	border:3px double #C5C9BF;
	border-bottom:0;
	padding:4px;
	float:left;
	cursor:pointer;
	font-family:Tahoma, Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:center;
	color:#9FA594;
	font-weight:bold;
	font-variant:small-caps;
}
#content {
	border:4px double #A0A595;
	height:640px;
	clear:both;
}
</style>
<body>
[PHP]
require ('../admin/dbconexion.php');
$sql="SELECT	clientes.id_adg,
		clientes.id_cliente,
		clientes.nombre,
		contribuyentes.contribuyente,
		documentos.tipo
	FROM clientes
	inner join contribuyentes
	on clientes.id_contribuyente = contribuyentes.id_contribuyente
	inner join documentos
	on clientes.id_adg = documentos.id_adg  WHERE clientes.id_adg=$id";

$res=mysql_query($sql);  
while($registro=mysql_fetch_array($res))
	{
		 $num = $registro[id_adg];
		 $contrato = $registro[id_cliente];
		 $cliente = $registro[nombre];
		 $persona =  $registro[contribuyente];
	}

[/PHP]
<div id="container">
	<div class="tabs" id="tab1" onclick="outside(cual)">Tab 1</div>
	<div class="tabs" id="tab2">Tab 2</div>
	<div class="tabs" id="tab3">Tab 3</div>
	<div class="tabs" id="tab4">Tab 4</div>
	<div class="tabs" id="tab5">Tab 5</div>
	<div id="content">
[PHP]
echo "<div align='center'>
		<object width='99' height='98' 
			classid='CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95' 
			codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112' 
			type='application/pdf'>

			<embed src='../php/getfile.php?id=".$num."#zoom=50%&page=1' width='494' height='499'></embed>
		</object>
	  </div>";
[/PHP]
</div>
</body> 
ahhhhh El archivo getfile.php solo recibe id del archivo seleccionado y muestra ó imprime el contenido del pdf
  #2 (permalink)  
Antiguo 16/10/2008, 18:06
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: problema para mostar contenido de etiquetas <DIV>

Hola gisek,

¿Que problema exactamente tienes?

Saludos.
  #3 (permalink)  
Antiguo 17/10/2008, 10:51
Avatar de gisek  
Fecha de Ingreso: julio-2008
Mensajes: 12
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: problema para mostar contenido de etiquetas <DIV>

Antes que nada gracias por contestar nuevamente GatorV.

No sé como explicarme. Pero Mira te cuento todo de nuevo, me es más fácil. (Perdón ).

Estoy armando un sistema llamado archivo digital, en el se almacenaran datos de nuestros clientes y su documentación correspondiente, esta documentación se digitaliza y se divide en 5 diferentes pdf´s; todos estos datos y archivos se almacenan en una base de datos (MySQL) para posteriormente consultarlos, el caso es que tengo un ventana en donde listo todos los clientes almacenados (muestra los datos más relevantes) y también tengo un apartado en donde los pueden buscar, todas estas consultas previamente paginadas y ordenadas, entonces uno de esos campos en el listado es un link que me lleva a un PopUp (tipo ajax) en donde muestro los datos completos, y en una sección de ese mismo popup, tengo la estructura que mostré antes que simula un menú de pestañas (aquí es donde esta mi problema) pues en estas pestañas lo que necesito es que al dar click sobre cada una de las 5 pestañas muestre su pdf asignado y así muestre los datos del cliente consultado.

El problema es que no tengo idea de cómo mostrar y cambiar el contenido en el <div> “contenido” dependiendo (“del <div>”) de la pestaña que hayan clickeado en el menú.

Lo que estoy intentando hacer, es modificar un script que encontré, pero no funciona de la forma en la que necesito, porque este script abre una pagina dependiendo de la pestaña elegida. Y lo que yo quiero es algo como ocultar el contenido de las 5 pestañas ya con su pdf previamente asignado y solo mostrar la pestaña elegida ó la visitada mejor dicho y así visualizar el pdf correspondiente en su pestaña.


Mira tengo Algo así como esto.
Código HTML:
<div id="container">
   <div class="tabs" id="tab1">PDF 1</div> //pestaña 1
   <div class="tabs" id="tab2">PDF 2</div> //pestaña 2
   <div class="tabs" id="tab3">PDF 3</div> //pestaña 3
   <div class="tabs" id="tab4">PDF 4</div> //pestaña 4
   <div class="tabs" id="tab5">PDF 5</div> //pestaña 5
   <div id="content"> //div que alojara el contenido de la pestaña seleccionada
   <?php // consulta del cliente seleccionado en la ventana anterior
    //$id lo cacha de la consulta en la ventana anterior
    require ('../admin/dbconexion.php');
    $sql="SELECT clientes.id_adg,
		   clientes.id_cliente,
		   clientes.nombre,
		   contribuyentes.contribuyente,
		   documentos.tipo
	FROM clientes
	inner join contribuyentes
	on clientes.id_contribuyente = contribuyentes.id_contribuyente
	inner join documentos
	on clientes.id_adg = documentos.id_adg  WHERE clientes.id_adg=$id";
            $res=mysql_query($sql);  
            while($registro=mysql_fetch_array($res))
            {
               $num = $registro[id_adg];
               $contrato = $registro[id_cliente];
               $cliente = $registro[nombre];
               $persona =  $registro[contribuyente];
            }
            echo "<div align='center'>
               <object 
                   classid='CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95' 
                   codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112' 
                   type='application/pdf'>
               <embed src='../php/getfile.php?id=".$num."#zoom=50%&page=1' width='494' height='499'>
               </embed></object></div>";
// El archivo getfile.php solo recibe id del archivo seleccionado y muestra ó imprime el contenido del pdf en el div “content”
?>
   /div>
</div
Ejemplo que estoy siguiendo.
estoy intentando modificarlo pero nada.

script.js
Código HTML:
//Desarrollado por Jesús Liñán
//[email protected]
//ribosomatic.com
//Puedes hacer lo que quieras con el código
//pero visita la web cuando te acuerdes

//crear objeto ajax
function objetoAjax(){
	var xmlhttp=false;
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
		   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (E) {
			xmlhttp = false;
  		}
	}

	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}
//hasta aquí no hay problema

//en esta parte no sé como pasarle los parámetros para solo mostrar el <DIV> elegido.
//Ya que también recibe la pagina a mostrar
function MostrarPagina(pagina,boton){
	cont = document.getElementById('contenido');
	
	ajax=objetoAjax();
	
    ajax.open("GET", pagina); 
    ajax.onreadystatechange = function(){
		if (ajax.readyState == 4 && ajax.status == 200) {
			cont.innerHTML = ajax.responseText;
		}
	}
	ajax.send(null);
	//----------- configuraciones previas -------------//
	
	//definir los titulos de los botones
	titulo=new Array();
	titulo[0]="CSS";
	titulo[1]="HTML";
	titulo[2]="PHP";
	
	//definir numero de botones
	nrobtn=3;
	
	//definir prefijo de botones
	//(esto con el objetivo de no tener
	//problemas al momento de validar
	//nuestra página.)
	pref="boton_";
	
	//-------------------- fin ------------------------//

	//quita el estilo a todos los botones
	for(i=1;i<=nrobtn;i++){
		tit=titulo[i-1];
		btn=document.getElementById(pref+i);
		btn.innerHTML="<span style=\"border-top:1px #FF9900 solid; border-left:1px #FF9900 solid; border-right:1px #FF9900 solid;	border-bottom:1px #FF9900 solid; margin-left:5px; padding-left:2px;padding-right:2px; padding-top:1px; padding-bottom:1px; text-decoration:none; 	background-color:#FFFFCC;\">"+tit+"</span>";
	}
	//le da estilo al boton actual
	btnA = document.getElementById(pref+boton);
	tit=titulo[boton-1];
	btnA.innerHTML="<span style=\"border-top:1px #FF9900 solid;	border-left:1px #FF9900 solid; border-right:1px #FF9900 solid;	margin-left:5px; padding-left:2px;padding-right:2px; padding-top:1px; padding-bottom:5px; text-decoration:none; 	background-color:#FFCCCC;\">"+tit+"</span>";
}
estilos.css
Código HTML:
body {
	margin: 0px 0px 0px 0px;
}
#container {
	margin-top:15px;
	margin-left:15px;
	width:669px;
}
.tabs {
	margin-right:10px;
	width:50px;
	border:3px double #C5C9BF;
	border-bottom:0;
	padding:4px;
	float:left;
	cursor:pointer;
	font-family:Tahoma, Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:center;
	color:#9FA594;
	font-weight:bold;
	font-variant:small-caps;
}
#content {
	border:4px double #A0A595;
	height:640px;
	clear:both;
}
tabs.html
Código HTML:
<html><head>
<script language="JavaScript" type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body onload="MostrarPagina()">
<div id="botones">
<a id="boton_1" onclick="MostrarPagina('pagina1.html','1')">P&aacute;gina 1</a> 
<a id="boton_2" onclick="MostrarPagina('pagina2.html','2')">P&aacute;gina 2</a> 
<a id="boton_3" onclick="MostrarPagina('pagina3.html','3')">P&aacute;gina 3</a> 
</div>
<div id="contenido"> </div>
</body></html> 
Perdon si te molesto que te haya puesto tanto texto pero así me es más facil explicarme, ojala puedas ayudarme. SALUDOS
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 01:11.