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

principiante - ayuda no se ni que buscar

Estas en el tema de principiante - ayuda no se ni que buscar en el foro de Frameworks JS en Foros del Web. Estoy creando una aplicación con Ajax y php, la idea es crear un menú con varias pestañas(las cuales cargan consultas de BD, y otras formularios), ...
  #1 (permalink)  
Antiguo 23/02/2010, 16:35
Avatar de fenix4  
Fecha de Ingreso: noviembre-2001
Ubicación: Caracas
Mensajes: 226
Antigüedad: 23 años, 1 mes
Puntos: 1
principiante - ayuda no se ni que buscar

Estoy creando una aplicación con Ajax y php, la idea es crear un menú con varias pestañas(las cuales cargan consultas de BD, y otras formularios), en las que tengo dudas, son las que tienen formularios, ya que les quisiera poner debajo del formulario una consulta de los datos existentes, y a medida que se cargan se actualicen. Necesito saber como cargar el formulario y luego la consulta (lo hice aparte, pero me carga todo al mismo tiempo, la idea es cargar el formulario, y que que se vaya cargando la consulta, cada uno independiente)

También lo hice pero solo, osea sin las pestañas. Es como un Ajax dentro de otro Ajax, allí es donde no se que hacer. le dejo el código.

Código HTML:
<!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"lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CCNPG - </title>
<link href="estilos.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div id="menu"> 
<a href="javascript:MostrarConsulta('consultaA.php', 'contenidos');">Formulario A</a> 
<a href="javascript:MostrarConsulta('formularioB.php', 'contenidos');">Formulario B</a> 
<a href="javascript:MostrarConsulta('formularioC.htm', 'contenidos');">Formulario C</a>
<a href="javascript:MostrarConsulta('formularioD.htm', 'contenidos');">Formulario D</a>
<a href="javascript:MostrarConsulta('formularioE.htm', 'contenidos');">Formulario E</a>
<a href="javascript:MostrarConsulta('formularioF.htm', 'contenidos');">Formulario F</a>
<a href="javascript:MostrarConsulta('formulario.htm', 'contenidos');">Resumen</a>
<a href="javascript:MostrarConsulta('formularioFin.htm', 'contenidos');">Fin</a>
</div>
<div id="contenidos">
   <h3>En esta capa se cargar&aacute; as&iacute;ncronamente varios fragmentos de c&oacute;digo (x)html.</h3>	
    <p>Consultas registros con ajax</p>	   
    <p>Insertar registros con ajax</p>
    <p>Escoger una opci&oacute;n del men&uacute;... </p>
</div>
</body>
</html> 
Código:
//ajax 1.1

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;
}

function enviarDatosEmpleado(){
	//donde se mostrará lo resultados
	divResultado = document.getElementById('resultado');
	//valores de los inputs
	nom=document.nuevo_empleado.nombres.value;
	apl=document.nuevo_empleado.apellidos.value;
	ci=document.nuevo_empleado.cedula.value;
	
	//instanciamos el objetoAjax
	ajax=objetoAjax();
	//uso del medotod POST
	//archivo que realizará la operacion
	//registro.php
	ajax.open("POST", "registro.php",true);
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			//mostrar resultados en esta capa
			divResultado.innerHTML = ajax.responseText
			//llamar a funcion para limpiar los inputs
			LimpiarCampos();
		}
	}
	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//enviando los valores
	ajax.send("nombres="+nom+"&apellidos="+apl+"&cedula="+ci)
}

function MostrarConsulta(datos,contenedor){
	divResultado = document.getElementById(contenedor);
	ajax=objetoAjax();
	ajax.open("GET", datos);
	ajax.onreadystatechange=function() {
		if(ajax.readyState == 4)  {
			if(ajax.status==200)	{
				divResultado.innerHTML = ajax.responseText;
			}else if(ajax.status==404){
				divResultado.innerHTML = 'La direccion no existe';
			}else	{
				divResultado.innerHTML = 'Error: '.ajax.status;
			}
  		}else{
    		divResultado.innerHTML = 'Cargando...';
  		}		
	}
	ajax.send(null)
}

function LimpiarCampos(){
	document.nuevo_empleado.nombres.value="";
	document.nuevo_empleado.apellidos.value="";
	document.nuevo_empleado.cedula.value="";
	document.nuevo_empleado.nombres.focus();
}
ajax.js


Código PHP:
<h3 id="titulos" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Formulario B</h3>
<p>Planta profesoral<br />
 
</p>
<TABLE BORDER="1"> 
<tr>
<td>Nombre:</td>
<td><input type="text" name="nombre" size="50" maxlength="50"</td><br>
</tr>
<tr>
<td>Apellido:</td>
<td><input type="text" name="apellido" size="50" maxlength="50"></td><br>
</tr>
<tr>
<td>Cédula de identidad:</td>
<td><input type="text" name="cedula" size="10" maxlength="10"></td><br>
</tr>
<tr>
    <td align="right">Grado academico</td>
    <td><select name="grado">
        <option value="">Seleccione</option>
        <option value="1">Técnico Superior Especialista</option>
        <option value="2">Especialista</option>
        <option value="3">Magister</option>
        <option value="4">Magister Scientiarum</option>
        <option value="5">Magister Scientiae</option>
        <option value="6">Master</option>
        <option value="7">Doctor</option>
        <option value="8">Ph.D</option>
        <option value="9">Philosophus Scientiarum</option></select></td>
        
</tr>

<tr>
    <td align="right">Escalafon</td>
    <td><select name="escalafon">
        <option value="">Seleccione</option>
        <option value="1">Instructor</option>
        <option value="2">Asistente</option>
        <option value="3">Agregado</option>
        <option value="4">Asociado</option>
        <option value="5">Titular</option>
        <option value="6">Otros</option></select></td>
<tr>
<td colspan="2"><table border "1">
    <td><input name="agregar"  type="button" value="Añadir" ></td>
    <td><input type="button" name="siguiente" value="Siguiente"></td>
    
</tr>
</table></td>
<tr>
    <td colspan="2">&nbsp;.</td>
</tr>

</table>
<div id="resultado"><?php include('consultaB.php');?></div>
Código PHP:
<?php
//Configuracion de la conexion a base de datos
$bd_host "localhost"
$bd_usuario "user"
$bd_password "xxxx"
$bd_base "db";

$con mysql_connect($bd_host$bd_usuario$bd_password); 

mysql_select_db($bd_base$con); 

//consulta todos los empleados

$sql=mysql_query("SELECT * FROM profesionales LIMIT 0,1000",$con);

//muestra los datos consultados
//haremos uso de tabla para tabular los resultados
?>
<table style="border:1px solid #FF0000; color:#000099;width:400px;">//css
<tr style="background:#99CCCC;">
    <td>Nombres</td>
    <td>Apellidos</td>
    <td>cedula</td>
</tr>

<?php
while($row mysql_fetch_array($sql)){
    echo 
"    <tr>";
    echo 
"         <td>".$row['nombres']."</td>";
    echo 
"         <td>".$row['apellidos']."</td>";
    echo 
"         <td>".$row['cedula']."</td>";
    echo 
"    </tr>";
}
?>
</table>
Por favor denme una orientación, de que buscar.

Aun estoy leyendo muchos tutoriales, y sigo buscando.

Gracias
__________________
S.L.P.S.
  #2 (permalink)  
Antiguo 26/02/2010, 11:28
Avatar de fenix4  
Fecha de Ingreso: noviembre-2001
Ubicación: Caracas
Mensajes: 226
Antigüedad: 23 años, 1 mes
Puntos: 1
Respuesta: principiante - ayuda no se ni que buscar

Listo!!! luego de 3 días de busqueda por internet, consegui hacer lo que queria.

Simplemente resolvi de otra forma...

El menú lo tengo en un div, el formulario lo presento en otro div, el resultado en otro div, y la consulta de los datos ingresados en otro div..

Para no complicarme mucho, practicamente hago 3 conexiones ajax. Una para cada uno de los Divs le dejo el codigo del HTML y el Ajax.

Aun estoy mejorando el código

Código:
addEvent(window,'load',inicializarEventos,false);



function inicializarEventos()

{

  // Mostramos los comentarios actuales

  // Asignamos el evento Onclick al boton1

  var $ob0=document.getElementById('enlaceA');

  addEvent($ob0,'click',presionBotonA,false); 

  var $ob1=document.getElementById('enlaceB');

  addEvent($ob1,'click',presionBotonB,false);
  var $ob2=document.getElementById('enlaceC');

  addEvent($ob2,'click',presionBotonC,false);
  var $ob3=document.getElementById('enlaceD');

  addEvent($ob3,'click',presionBotonD,false);  
  var $ob4=document.getElementById('enlaceD2');

  addEvent($ob4,'click',presionBotonD2,false);  
  var $ob5=document.getElementById('enlaceE');

  addEvent($ob5,'click',presionBotonE,false);
  var $ob6=document.getElementById('enlaceF');

  addEvent($ob6,'click',presionBotonF,false);     

}



//Presionaron un Boton

function presionBotonA(e)

{  
  cargarPagina('php/consultaA.php')	;
  var $IdContenidos = document.getElementById("contenidos");

  $IdContenidos.innerHTML = ""; 
  var $IdDiv = document.getElementById("resultados");

  $IdDiv.innerHTML = ""; 

}

function presionBotonB(B)

{	

  cargarFormulario('php/formularioB.php')	;		

  cargarPagina('php/consultaB.php')	;

}
function presionBotonBA(e)
{  
  var ob1=document.getElementById('nombre');
  var ob2=document.getElementById('apellido');
  var ob3=document.getElementById('cedula');  
  cargarDocente(ob1.value,ob2.value,ob3.value);
}

function presionBotonC(B)

{	

  cargarFormulario('php/formularioC.php')	;		

  cargarPagina('php/consultaC.php')	;

}
function presionBotonD(B)

{	

  cargarFormulario('php/formularioD.php')	;		

  cargarPagina('php/consultaD.php')	;

}
function presionBotonD2(B)

{	

  cargarFormulario('php/formularioD2.php')	;		

  cargarPagina('php/consultaD2.php')	;

}
function presionBotonE(B)

{	

  cargarFormulario('php/formularioE.php')	;		

  cargarPagina('php/consultaE.php')	;

}
function presionBotonF(B)

{	

  cargarFormulario('php/formularioF.php')	;		

  cargarPagina('php/consultaF.php')	;

}


//La variable es global para los manejos de eventos



var conexion1;///con1

function cargarFormulario(url)

{

  if(url=='')

  {
   var contenidos = document.getElementById("contenidos");

	contenidos.innerHTML = "";
	//document.getElementById("contenidos").setAttribute("visibility","hidden");
	//contenidos.disabled=true;
	return; 	

  }

  conexion1=crearXMLHttpRequest();

  conexion1.onreadystatechange = procesarEventosContenidos;

  conexion1.open("GET", url, true);

  conexion1.send(null);

}



function procesarEventosContenidos()

{

  var detalles = document.getElementById("contenidos");

  if(conexion1.readyState == 4)

  {

	if(conexion1.status==200)	

	{

		detalles.innerHTML = conexion1.responseText;		

	}else if(conexion1.status==404){

		detalles.innerHTML = 'La direccion no existe';

	}else	{

		detalles.innerHTML = 'Error: '.conexion1.status;

	}   

  }

  else

  {

    detalles.innerHTML ='<img src="/MI3/img/cargando.gif">';

  }

}



var conexion3;
function cargarDocente(nombres,apellidos,cedula) 
{
	 
  conexion3=crearXMLHttpRequest();
  conexion3.onreadystatechange = procesarEventosResultados;
  conexion3.open('GET','php/registroB.php?nombres='+nombres+'&apellidos='+apellidos+'&cedula='+cedula, true);
  conexion3.send(null);
  //cargarPagina('php/consultaB.php'); 
}

function procesarEventosResultados()
{
  var resultados = document.getElementById("resultados");
  if(conexion3.readyState == 4)
  {
    resultados.innerHTML = conexion3.responseText;
    cargarPagina('php/consultaB.php');
  } 
  else 
  {
    resultados.innerHTML = 'Cargando su comentario...';
  }
}
///
//La variable es global para los manejos de eventos
var conexion;
function cargarPagina(url)
{
  if(url=='')
  {
    return;
  }
  conexion=crearXMLHttpRequest();
  conexion.onreadystatechange = procesarEventosReporte;
  conexion.open("GET", url, true);
  conexion.send(null);
}

function procesarEventosReporte()
{
  var detalles = document.getElementById("reporte");
  if(conexion.readyState == 4)
  {
	if(conexion.status==200)	
	{

		detalles.innerHTML = conexion.responseText;

	}else if(conexion.status==404){

		detalles.innerHTML = 'La direccion no existe';

	}else	{

		detalles.innerHTML = 'Error: '.conexion.status;

	}   
  }
  else
  {
    detalles.innerHTML ='<img src="/MI3/img/cargando.gif">';
  }
}
///



//***************************************

//Funciones comunes a todos los problemas

//***************************************



function addEvent(elemento,nomevento,funcion,captura){

  if (elemento.attachEvent)  {

    elemento.attachEvent('on'+nomevento,funcion);

    return true;

  }  else  

    if (elemento.addEventListener)    {

      elemento.addEventListener(nomevento,funcion,captura);

      return true;

    }

    else

      return false;

}



function crearXMLHttpRequest() {

  var xmlHttp=null;

  if (window.ActiveXObject) 

    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

  else 

    if (window.XMLHttpRequest) 

      xmlHttp = new XMLHttpRequest();

  return xmlHttp;

}
Código HTML:
<!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"lang="es" xml:lang="es">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>CCNPG - </title>

<link href="css/estilos.css" rel="stylesheet" type="text/css">

<script language="JavaScript" type="text/javascript" src="ajax/funciones2.js"></script>

</head>

<body>
<table>
<tr>
<td valign="top"  >

<div id="menu"> 
<a id="enlaceA" href="#">Formulario A</a>
<a id="enlaceB" href="#">Formulario B</a>
<a id="enlaceC" href="#">Formulario C</a>
<a id="enlaceD" href="#">Formulario D</a>
<a id="enlaceD2" href="#">Formulario D2</a>
<a id="enlaceE" href="#">Formulario E</a>
<a id="enlaceF" href="#">Formulario F</a>
<a href="javascript:MostrarConsulta('formulario.htm', 'contenidos');">Resumen</a>
<a href="javascript:MostrarConsulta('formularioFin.htm', 'contenidos');">Fin</a>
</div>
</td><td>

<div id="contenidos"></div>
<div id="resultados"></div>
<div id="reporte"></div>
</td>
</tr>
</table>

</body>

</html> 
__________________
S.L.P.S.

Etiquetas: ajax, principiante
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 03:57.