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

¿ Consulta Ajax + div ? Refresca o no ?

Estas en el tema de ¿ Consulta Ajax + div ? Refresca o no ? en el foro de Frameworks JS en Foros del Web. Bueno saludos a los que visitaran este post y que intentaran ayudarme. Explico, tengo un archivo llamado index.php, logisticaMovimientos.php, ajax.js, funciones.js y logisticaMovimientosBodNueINgreso.php. La consulta ...
  #1 (permalink)  
Antiguo 12/08/2012, 19:53
 
Fecha de Ingreso: mayo-2012
Ubicación: Valparaiso
Mensajes: 30
Antigüedad: 11 años, 10 meses
Puntos: 0
¿ Consulta Ajax + div ? Refresca o no ?

Bueno saludos a los que visitaran este post y que intentaran ayudarme.

Explico, tengo un archivo llamado index.php, logisticaMovimientos.php, ajax.js, funciones.js y logisticaMovimientosBodNueINgreso.php.

La consulta es si me esta refrescando el div = contenido que tengo en el index, al llamar por ajax a la pagina logisticaMovimientosBodNueINgreso.php.


dejare los links de los archivos para que los prueben en xampp o apserv.

Deben entrar en el menu horizontal de "LOGISTICA->Movimientos->en la barra lateral Guia de ingreso, hasta allí llega el menu.

tengo la duda ya que consulte con un amigo y me dijo que "NO ESTABA RECARGANDO MI DIV" y "QUE DEBIA CAMBIAR MI IMPLEMENTACION DE AJAX EN LA PAGINA) y para mi creo que esta todo bien. Saludos


http://www.4shared.com/rar/39EBWnhd/miniSistemaAJax.html

-> ARCHIVO EN RAR
  #2 (permalink)  
Antiguo 12/08/2012, 19:55
 
Fecha de Ingreso: mayo-2012
Ubicación: Valparaiso
Mensajes: 30
Antigüedad: 11 años, 10 meses
Puntos: 0
Respuesta: ¿ Consulta Ajax + div ? Refresca o no ?

Estoy probando con un sistema como si fuera "empresarial" pero es para mi Universidad, estoy en ultimo año y empece hace poco a ver este temita de ajax, ya que por paros, explicaron muy muy mal .......Espero logren ayudarme y que me digan que tan mal estoy o si voy por el buen camino.

CONSEJOS, RETOS, TODO SERA BIENVENIDO
  #3 (permalink)  
Antiguo 12/08/2012, 21:05
 
Fecha de Ingreso: agosto-2012
Ubicación: Santiago
Mensajes: 124
Antigüedad: 11 años, 7 meses
Puntos: 60
Respuesta: ¿ Consulta Ajax + div ? Refresca o no ?

Me da lata registrarme en 4shared para bajarlo y poder ayudarte.

Pero si quieres comprobar si el div se "refresca" usa un firebug o la consola de Chrome.
O también podrías poner el código AJAX que tienes para ver si hace su proceso o no :P


PD: Por una educación de calidad! xD
__________________
~~Aprendiendo.
Become a Programmer, Moth*rf*cker
  #4 (permalink)  
Antiguo 12/08/2012, 21:34
 
Fecha de Ingreso: mayo-2012
Ubicación: Valparaiso
Mensajes: 30
Antigüedad: 11 años, 10 meses
Puntos: 0
Respuesta: ¿ Consulta Ajax + div ? Refresca o no ?

Cita:
Iniciado por Carloosolrac Ver Mensaje
Me da lata registrarme en 4shared para bajarlo y poder ayudarte.

Pero si quieres comprobar si el div se "refresca" usa un firebug o la consola de Chrome.
O también podrías poner el código AJAX que tienes para ver si hace su proceso o no :P


PD: Por una educación de calidad! xD
AJAX.JS

Código Javascript:
Ver original
  1. function ajaxFunction() {
  2.   var xmlHttp;
  3.  
  4.   try {
  5.    
  6.     xmlHttp=new XMLHttpRequest();
  7.     return xmlHttp;
  8.   } catch (e) {
  9.    
  10.     try {
  11.       xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  12.       return xmlHttp;
  13.     } catch (e) {
  14.      
  15.       try {
  16.         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  17.         return xmlHttp;
  18.       } catch (e) {
  19.         alert("Tu navegador no soporta AJAX!");
  20.         return false;
  21.       }}}
  22. }

FUNCIONES.JS

Código Javascript:
Ver original
  1. function Enviar(_pagina,capa) {
  2.     var ajax;
  3.     ajax = ajaxFunction();
  4.     ajax.open("POST", _pagina, true);
  5.     ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  6.  
  7.     ajax.onreadystatechange = function() {
  8.         if (ajax.readyState==1){
  9.             document.getElementById(capa).innerHTML = " Aguarde por favor...";
  10.                  }
  11.         if (ajax.readyState == 4) {
  12.            
  13.                 document.getElementById(capa).innerHTML=ajax.responseText;
  14.              }}
  15.              
  16.     ajax.send(null);
  17. }
  #5 (permalink)  
Antiguo 12/08/2012, 21:37
 
Fecha de Ingreso: mayo-2012
Ubicación: Valparaiso
Mensajes: 30
Antigüedad: 11 años, 10 meses
Puntos: 0
Respuesta: ¿ Consulta Ajax + div ? Refresca o no ?

INDEX.PHP

Código PHP:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3.     <head>
  4.         <title>INTEGRACION::INTRANET</title>
  5.         <script src="js/ajax.js"></script>
  6.         <script src="js/funciones.js"></script>
  7.  
  8.         <link rel="stylesheet" href="css/style.css">
  9.         <link rel="stylesheet" href="css/reset.css">
  10.         <link rel="stylesheet" href="css/structure.css">
  11.    
  12.         <!-- IE -->
  13.         <script>
  14.             document.createElement('header');
  15.             document.createElement('nav');
  16.             document.createElement('article');
  17.             document.createElement('footer');
  18.         </script>
  19.        
  20.     </head>
  21.    
  22.     <body>
  23.         <header>
  24.             <hgroup>
  25.                 <h1 id="banner"><a href=""></a> Sistema del Sur Demo</h1>
  26.                 <h4>Control de Bodega</h4>
  27.             </hgroup>
  28.             <nav id="navMenu">
  29.                 <ul id="hMenu">
  30.                     <li><a href="">DTH</a></li>
  31.                     <li><a href="">HFC</a></li>
  32.                     <li><a href="">GESTION</a></li>
  33.                     <li><a href="">CONTRATOS</a></li>
  34.                     <li>
  35.                         <a href="">&nbsp;LOGISTICA</a>
  36.                         <ul class="sub-menu">  
  37.                             <li><a href="javascript:Enviar('logisticaMovimientos.php','contenido')">Movimientos</a></li>
  38.                             <li><a href="javascript:Enviar('logisticaInformes.php','contenido')">Informes</a></li>
  39.                             <li><a href="">Adminsistracion</a></li>
  40.                             <li><a href="">Procesos</a></li>
  41.                             <li><a href="">Procedimientos y Metodos</a></li>
  42.                             <li><a href="">Saldos Tecnicos</a></li>
  43.                         </ul>
  44.                     </li>
  45.                     <li><a href="">AVANCE</a></li>
  46.                     <li><a href="">RRHH</a></li>
  47.                     <li><a href="">SALIR</a></li>
  48.                 </ul>
  49.             </nav>
  50.         </header>
  51.        
  52.         <div id="contenido">
  53.        
  54.             CONTENIDO INDeX
  55.        
  56.         </div>
  57.        
  58.         <footer id="main">
  59.             <p>Condiciones de Trabajo</p>
  60.                 <a href="#">T&eacute;rminos y Condiciones</a>
  61.                 <a href="#">Datos legales</a>
  62.             <p>©copyright 2012 SISTEMA DEL SUR  Diseño:  Felipe Vargas</p> 
  63.         </footer>
  64.  
  65.     </body>  
  66. </html>

LOGISTICAMOVIMIENTOS.PHP

Código PHP:
Ver original
  1. <!doctype html>
  2. <html lang="es">
  3. <head>
  4.     <title>INTEGRACION::INTRANET</title>
  5.     <link rel="stylesheet" href="css/acordeon3.css">
  6.    
  7. </head>
  8. <body>
  9.  
  10.        
  11.         <aside id="asideMenu">
  12.         <div class="verticalaccordion">
  13.             <ul>
  14.               <li>
  15.                 <h3>Bodega - Nuevos</h3>
  16.                 <div> <a href="javascript:Enviar('logisticaMovimientosBodNueIngreso.php','contenido')">Gu&iacute;a de Ingreso</a><br />
  17.                       <a href="javascript:Enviar('logisticaMovimientosBodNueAsignacion.php','contenido')">Gu&iacute;a de Asignaci&oacute;n</a><br />
  18.                       <a href="javascript:Enviar('logisticaMovimientosBodNueTransferenciaBod.php','contenido')">Transferencias de Bodegas</a><br />
  19.                       <a href="javascript:Enviar('logisticaMovimientosBodNueTransferenciaTec.php','contenido')">Transferencias de Tecnicos</a><br />
  20.                       <a href="javascript:Enviar('logisticaMovimientosBodNueDevolucionEqNue.php','contenido')">Devoluci&oacute;n equipos Nuevos</a><br />
  21.                       <a href="javascript:Enviar('logisticaMovimientosBodNueGuiaSalida.php','contenido')">Gu&iacute;a de Salida</a> <br />
  22.                       <a href="javascript:Enviar('logisticaMovimientosBodNueInventario.php','contenido')">Inventario</a></div>
  23.               </li>
  24.               <li>
  25.                 <h3>Bodega - Malos</h3>
  26.                 <div> <a href="javascript:Enviar('logisticaMovimientosBodMalosDevolucionTec.php','contenido')">Devoluci&oacute;n por Tecnico</a><br />
  27.                       <a href="javascript:Enviar('logisticaMovimientosBodMalosDevolucionBod.php','contenido')">Devoluci&oacute;n por Bodega</a></div>
  28.               </li>
  29.               <li>
  30.                 <h3>Bodega - Reserva</h3>
  31.                 <div> <a href="">Gu&iacute;a de Recepci&oacute;n</a><br />
  32.                       <a href="">Gu&iacute;a devoluci&oacute;n Telefonica del Sur</a><br />
  33.                        <a href="">Informes</a></div>
  34.               </li>
  35.             </ul>
  36.         </div>
  37.         </aside>
  38.        
  39.         <div id="idImg">
  40.                 Movimientos
  41.         </div>
  42. </body>  
  43. </html>

LOGISTICAMOVIMIENTOSBODNUEINGRESO.PHP

Código PHP:
Ver original
  1. <html lang="es">
  2. <head>
  3.     <title>INTEGRACION::INTRANET</title>
  4.     <link rel="stylesheet" href="css/acordeon3.css">
  5.    
  6. </head>
  7. <body>
  8.        
  9. <section id="idBodegaNuevoIngreso">
  10.     <fieldset>
  11.         <fieldset>
  12.                 <h1>Gu&iacute;a de Ingreso</h1>
  13.                 <br />
  14.                 Gu&iacute;a de Despacho: <input type="text" name="gdespacho" size="12" value="0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  15.                 Servicio:
  16.                 <select name="cmb_servicio">
  17.                        
  18.                             <?php
  19.                                 require("conexion/Conexion.php");
  20.                                 $sql = "select * from material order by nombrematerial ASC";
  21.                                 $rs  = mysql_query($sql) or die(exit("ERROR _ "));
  22.                                 while ($row = mysql_fetch_array($rs)) {
  23.                                     print "<option  value='".$row["idmaterial"]."'>".$row["nombrematerial"]."</option>";
  24.                                 }  
  25.                                 require("conexion/finConexion.php");
  26.                             ?>
  27.                     </select><br /><br />
  28.                 Empresa Proveedor:
  29.                 <select name="cmb_empresa">
  30.                        
  31.                             <?php
  32.                                 require("conexion/Conexion.php");
  33.                                 $sql = "select * from empresa_proveedor order by nombreproveedor ASC";
  34.                                 $rs  = mysql_query($sql) or die(exit("ERROR _ "));
  35.                                 while ($row = mysql_fetch_array($rs)) {
  36.                                     print "<option  value='".$row[" idproveedor"]."'>".$row["nombreproveedor"]."</option>";
  37.                                 }  
  38.                                 require("conexion/finConexion.php");
  39.                             ?>
  40.                 </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  41.                 Bodega:
  42.                 <select/>
  43.                         <option value="1" >05-VI&Ntilde; </option>
  44.                         <option value="2" >05-VI&Ntilde; </option>
  45.                         <option value="3" >05-VI&Ntilde; </option>
  46.                     </select><br /><br />
  47.                 Fecha:
  48.                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  49.                     <input type="date" value="dd-mm-yyyy" /><br /><br />
  50.                 <input type="submit" value="Agregar" />
  51.     </fieldset>
  52. </section>
  53.  
  54. <aside id="asideMantenedor">
  55.     <div class="verticalaccordion">
  56.         <ul>
  57.           <li>
  58.             <h3>Mantenedores</h3>
  59.             <div> <a href="javascript:Enviar('logisticaMovimientosBodNueIngresoConsultar.php','contenido')">Gu&iacute;a - Consultar</a><br />
  60.                  <a href="javascript:Enviar('logisticaMovimientosBodNueIngresoModificar.php','contenido')">Gu&iacute;a - Modificar</a><br />
  61.                  <a href="javascript:Enviar('logisticaMovimientosBodNueIngresoEliminar.php','contenido')">Gu&iacute;a - Eliminar</a></div>
  62.           </li>
  63.         </ul>
  64.     </div>
  65. </aside>
  66.  
  67. </body>
  68. </html>
  #6 (permalink)  
Antiguo 12/08/2012, 21:55
 
Fecha de Ingreso: mayo-2012
Ubicación: Valparaiso
Mensajes: 30
Antigüedad: 11 años, 10 meses
Puntos: 0
Respuesta: ¿ Consulta Ajax + div ? Refresca o no ?

Cita:
Iniciado por Carloosolrac Ver Mensaje
Me da lata registrarme en 4shared para bajarlo y poder ayudarte.

Pero si quieres comprobar si el div se "refresca" usa un firebug o la consola de Chrome.
O también podrías poner el código AJAX que tienes para ver si hace su proceso o no :P


PD: Por una educación de calidad! xD
Postie todo menos el .css, por si quieres copiar codigo ....lo pongo.

En resumidas cuentas yo veo que SI actualiza el div y el ajax funciona correctamente. Mi amigo dice que NO actualiza el div.

Ahora bien la implementacion de los enlaces y de lo demas que tengo hecho, estara bien o debere proceder de otra manera ? una duda que me asalto ahora, atentamente gracias men
  #7 (permalink)  
Antiguo 12/08/2012, 22:09
 
Fecha de Ingreso: agosto-2012
Ubicación: Santiago
Mensajes: 124
Antigüedad: 11 años, 7 meses
Puntos: 60
Respuesta: ¿ Consulta Ajax + div ? Refresca o no ?

Lo probé y si me refresca el Div. Y el ajax funciona bien.

Lo que cambiaría un poco, sería poner un .status == 200 en el Ajax.

También dividiría el contenido, entre un menu y uno de contenido. Resulta muy molesto después de apretar en "Guía de Nuevo Ingreso" volver a hacer todo de nuevo.

La manera de procesar los datos, depende de ti, si así te resulta más fácil, déjalo así.
__________________
~~Aprendiendo.
Become a Programmer, Moth*rf*cker
  #8 (permalink)  
Antiguo 12/08/2012, 22:26
 
Fecha de Ingreso: mayo-2012
Ubicación: Valparaiso
Mensajes: 30
Antigüedad: 11 años, 10 meses
Puntos: 0
Respuesta: ¿ Consulta Ajax + div ? Refresca o no ?

Cita:
Iniciado por Carloosolrac Ver Mensaje
Lo probé y si me refresca el Div. Y el ajax funciona bien.

Lo que cambiaría un poco, sería poner un .status == 200 en el Ajax.

También dividiría el contenido, entre un menu y uno de contenido. Resulta muy molesto después de apretar en "Guía de Nuevo Ingreso" volver a hacer todo de nuevo.

La manera de procesar los datos, depende de ti, si así te resulta más fácil, déjalo así.
Si tambien pense en ver el tema del status 200, solo utilice un script bastante simple para el ajax, ya que tengo uno mas complejo y mas completo.

Ahora bien tu entras al menu horizontal ...eliges logistica, despues movimientos y
tengo un "menu lateral" en el cual elijes lo que quieres hacer en movimientos ....
en este caso es Guia de ingreso. EL cual deberia mostrar los datos rescatados de la BD. No entendi a que te referias con hacer todo denuevo (con un ejemplito sencillo entenderia), me podrias explicar que te resulto molesto ....si a ti te parecio asi, mi profe que dira jajajaj

Saludos y espero tu respuesta.
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 23:00.