¿ Consulta Ajax + div ? Refresca o no ?

miztkooo · #1 (**permalink**) 12/08/2012, 19:53

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

miztkooo · #2 (**permalink**) 12/08/2012, 19:55

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

Carloosolrac · #3 (**permalink**) 12/08/2012, 21:05

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

miztkooo · #4 (**permalink**) 12/08/2012, 21:34

Cita:

Iniciado por Carloosolrac

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 originalfunction ajaxFunction() {
  var xmlHttp;
  
  try {
   
    xmlHttp=new XMLHttpRequest();
    return xmlHttp;
  } catch (e) {
    
    try {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      return xmlHttp;
    } catch (e) {
      
      try {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        return xmlHttp;
      } catch (e) {
        alert("Tu navegador no soporta AJAX!");
        return false;
      }}}
}

FUNCIONES.JS

Código Javascript:

Ver originalfunction Enviar(_pagina,capa) {
    var ajax;
    ajax = ajaxFunction();
    ajax.open("POST", _pagina, true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
    ajax.onreadystatechange = function() {
        if (ajax.readyState==1){
            document.getElementById(capa).innerHTML = " Aguarde por favor...";
                 }
        if (ajax.readyState == 4) {
           
                document.getElementById(capa).innerHTML=ajax.responseText; 
             }}
             
    ajax.send(null);
}

miztkooo · #5 (**permalink**) 12/08/2012, 21:37

INDEX.PHP

Código PHP:

Ver original<!DOCTYPE html>
<html lang="es">
    <head>
        <title>INTEGRACION::INTRANET</title>
        <script src="js/ajax.js"></script>
        <script src="js/funciones.js"></script>
 
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/structure.css">
    
        <!-- IE -->
        <script>
            document.createElement('header');
            document.createElement('nav');
            document.createElement('article');
            document.createElement('footer');
        </script>
        
    </head>
    
    <body>
        <header>
            <hgroup>
                <h1 id="banner"><a href=""></a> Sistema del Sur Demo</h1>
                <h4>Control de Bodega</h4>
            </hgroup>
            <nav id="navMenu">
                <ul id="hMenu">
                    <li><a href="">DTH</a></li>
                    <li><a href="">HFC</a></li>
                    <li><a href="">GESTION</a></li>
                    <li><a href="">CONTRATOS</a></li>
                    <li>
                        <a href="">&nbsp;LOGISTICA</a>
                        <ul class="sub-menu">   
                            <li><a href="javascript:Enviar('logisticaMovimientos.php','contenido')">Movimientos</a></li>
                            <li><a href="javascript:Enviar('logisticaInformes.php','contenido')">Informes</a></li>
                            <li><a href="">Adminsistracion</a></li>
                            <li><a href="">Procesos</a></li>
                            <li><a href="">Procedimientos y Metodos</a></li>
                            <li><a href="">Saldos Tecnicos</a></li>
                        </ul>
                    </li>
                    <li><a href="">AVANCE</a></li>
                    <li><a href="">RRHH</a></li>
                    <li><a href="">SALIR</a></li>
                </ul>
            </nav>
        </header>
        
        <div id="contenido">
        
            CONTENIDO INDeX
        
        </div>
        
        <footer id="main">
            <p>Condiciones de Trabajo</p>
                <a href="#">T&eacute;rminos y Condiciones</a>
                <a href="#">Datos legales</a>
            <p>©copyright 2012 SISTEMA DEL SUR  Diseño:  Felipe Vargas</p>  
        </footer>
 
    </body>  
</html>

LOGISTICAMOVIMIENTOS.PHP

Código PHP:

Ver original<!doctype html>
<html lang="es">
<head>
    <title>INTEGRACION::INTRANET</title>
    <link rel="stylesheet" href="css/acordeon3.css">
    
</head>
<body>
 
        
        <aside id="asideMenu">
        <div class="verticalaccordion">
            <ul>
              <li>
                <h3>Bodega - Nuevos</h3>
                <div> <a href="javascript:Enviar('logisticaMovimientosBodNueIngreso.php','contenido')">Gu&iacute;a de Ingreso</a><br />
                      <a href="javascript:Enviar('logisticaMovimientosBodNueAsignacion.php','contenido')">Gu&iacute;a de Asignaci&oacute;n</a><br />
                      <a href="javascript:Enviar('logisticaMovimientosBodNueTransferenciaBod.php','contenido')">Transferencias de Bodegas</a><br />
                      <a href="javascript:Enviar('logisticaMovimientosBodNueTransferenciaTec.php','contenido')">Transferencias de Tecnicos</a><br />
                      <a href="javascript:Enviar('logisticaMovimientosBodNueDevolucionEqNue.php','contenido')">Devoluci&oacute;n equipos Nuevos</a><br />
                      <a href="javascript:Enviar('logisticaMovimientosBodNueGuiaSalida.php','contenido')">Gu&iacute;a de Salida</a> <br />
                      <a href="javascript:Enviar('logisticaMovimientosBodNueInventario.php','contenido')">Inventario</a></div>
              </li>
              <li>
                <h3>Bodega - Malos</h3>
                <div> <a href="javascript:Enviar('logisticaMovimientosBodMalosDevolucionTec.php','contenido')">Devoluci&oacute;n por Tecnico</a><br />
                      <a href="javascript:Enviar('logisticaMovimientosBodMalosDevolucionBod.php','contenido')">Devoluci&oacute;n por Bodega</a></div>
              </li>
              <li>
                <h3>Bodega - Reserva</h3>
                <div> <a href="">Gu&iacute;a de Recepci&oacute;n</a><br />
                      <a href="">Gu&iacute;a devoluci&oacute;n Telefonica del Sur</a><br /> 
                       <a href="">Informes</a></div>
              </li>
            </ul>
        </div>
        </aside>
        
        <div id="idImg">
                Movimientos
        </div>
</body>  
</html>

LOGISTICAMOVIMIENTOSBODNUEINGRESO.PHP

Código PHP:

Ver original<html lang="es">
<head>
    <title>INTEGRACION::INTRANET</title>
    <link rel="stylesheet" href="css/acordeon3.css">
    
</head>
<body>
        
<section id="idBodegaNuevoIngreso">
    <fieldset>
        <fieldset>
                <h1>Gu&iacute;a de Ingreso</h1>
                <br />
                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;
                Servicio: 
                <select name="cmb_servicio">
                        
                            <?php
                                require("conexion/Conexion.php");
                                $sql = "select * from material order by nombrematerial ASC";
                                $rs  = mysql_query($sql) or die(exit("ERROR _ "));
                                while ($row = mysql_fetch_array($rs)) {
                                    print "<option  value='".$row["idmaterial"]."'>".$row["nombrematerial"]."</option>";
                                }   
                                require("conexion/finConexion.php");
                            ?>
                    </select><br /><br />
                Empresa Proveedor: 
                <select name="cmb_empresa">
                        
                            <?php
                                require("conexion/Conexion.php");
                                $sql = "select * from empresa_proveedor order by nombreproveedor ASC";
                                $rs  = mysql_query($sql) or die(exit("ERROR _ "));
                                while ($row = mysql_fetch_array($rs)) {
                                    print "<option  value='".$row[" idproveedor"]."'>".$row["nombreproveedor"]."</option>";
                                }   
                                require("conexion/finConexion.php");
                            ?>
                </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                Bodega: 
                <select/>
                        <option value="1" >05-VI&Ntilde; </option>
                        <option value="2" >05-VI&Ntilde; </option>
                        <option value="3" >05-VI&Ntilde; </option>
                    </select><br /><br />
                Fecha: 
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="date" value="dd-mm-yyyy" /><br /><br />
                <input type="submit" value="Agregar" />
    </fieldset>
</section>
 
<aside id="asideMantenedor">
    <div class="verticalaccordion">
        <ul>
          <li>
            <h3>Mantenedores</h3>
            <div> <a href="javascript:Enviar('logisticaMovimientosBodNueIngresoConsultar.php','contenido')">Gu&iacute;a - Consultar</a><br />
                 <a href="javascript:Enviar('logisticaMovimientosBodNueIngresoModificar.php','contenido')">Gu&iacute;a - Modificar</a><br />
                 <a href="javascript:Enviar('logisticaMovimientosBodNueIngresoEliminar.php','contenido')">Gu&iacute;a - Eliminar</a></div>
          </li>
        </ul>
    </div>
</aside>
 
</body>
</html>

miztkooo · #6 (**permalink**) 12/08/2012, 21:55

Cita:

Iniciado por Carloosolrac

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

Carloosolrac · #7 (**permalink**) 12/08/2012, 22:09

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í.

miztkooo · #8 (**permalink**) 12/08/2012, 22:26

Cita:

Iniciado por Carloosolrac

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.