ajax

.rn3w. · 27 Octubre 2013, 05:10 AM

hola necesito su ayuda nuevamente, esta ves con ajax

tengo el siguiente codigo: html

<html>
<head>
<title>Problema</title>
<script src="1.js" language="javascript"></script>
<link rel="StyleSheet" href="1.css" type="text/css">
</head>
<body>
<h1>sección COMITE ACADEMICO.</h1>
<div id="menu">
<p><a id="enlace1" href="Subir.php">subir</a></p>
<p><a id="enlace2" href="SubirCA.html">bajar</a></p>
</div>
<div id="cambio"> QUE DESEA HACER</div>
</body>
</html>

y mi archivo js es el siguiente :

Código [Seleccionar]

addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
  var ob;
  for(f=1;f<=2;f++)
  {
    ob=document.getElementById('enlace'+f);
    addEvent(ob,'click',presionEnlace,false);
  }
}

function presionEnlace(e)
{
  if (window.event)
  {
    window.event.returnValue=false;
    var url=window.event.srcElement.getAttribute('href');
    cargar(url);     
  }
  else
    if (e)
    {
      e.preventDefault();
      var url=e.target.getAttribute('href');
      cargar(url);     
    }
}


var conexion1;
function cargar(url) 
{
  if(url=='')
  {
    return;
  }
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open("get", url, true);
  conexion1.send(null);
}

function procesarEventos()
{
  var detalles = document.getElementById("cambio");
  if(conexion1.readyState == 4)
  {
    cambio.innerHTML = conexion1.responseText;
  } 
  else 
  {
    cambio.innerHTML = 'Cargando...';
  }
}

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

el archivo html que muestro es el siguiente Subir.php

Código [Seleccionar]

<html>
<head></head>
<body>
<form action="SubirArchivo.php" method="post" enctype="multipart/form-data">
    <label>Seleccione el programa</label>
         <input type="file" name="programa"><br>
    <label>descripcion del archivo:</label>
         <input type="text" width="50" height="100"><br>
         <input type="submit" value="Enviar">
</form>
</body>
</html>

ahora cuando le doy click en "enviar" ya no me refresca la siguiente pagina con ajax, como puedo solucionarlo?

ayuda please!!!

miloscorp · 28 Octubre 2013, 15:39 PM

Hola. Podrias explicar un poco mejor que es lo que queres hacer?. Queres cargar el archivo asincroniamente? y cuando termine te muestre algo o te redireccione a otra pagina?

.rn3w. · 28 Octubre 2013, 21:14 PM

el subir archivos solo es un ejemplo.
mi problema es que cuando hago click en el boton enviar me direcciona a otra pagina
y deja de funcionar con ajax, ahora mi pregunta es si hay alguna forma de que cuando haga click en el boton enviar me recargue ahi mismo...

gracias por ayudar!!!

miloscorp · 28 Octubre 2013, 22:45 PM

Ahora entendi. Lo que podes hacer es poner el codigo del formulario dentro de un iframe de esa manera cuando pulses enviar no se refresca toda la pagina sino solamente el iframe.

Código [Seleccionar]

<html>
<head></head>
<body>
<iframe width="400" height="400" scrolling="no" frameborder="0" src="pagina_con_el_form.php
" target="_top">
</iframe>
</body>
</html>

O en HTML5

Código [Seleccionar]


<html>
<head></head>
<body>
< object type="text/html" data="pagina_con_el_form.php" width="400" height="400"> < /object> 
</body>
</html>

.rn3w. · 29 Octubre 2013, 02:32 AM

hola gracias !!!

tengo una nueva duda!!!

como puedo dividir una pagina web sin marcos, sin div??

jdc · 29 Octubre 2013, 04:49 AM

Puedes explicarte mejor? Sin frames sería usando divs xD

.rn3w. · 29 Octubre 2013, 05:05 AM

se puede hacer mediante iframes?

ejemplo:
pagina principal contiene 2 paginas (pagina 1 y pagina 2)
la pagina 1 contiene referencias de (pagina 3 , pagina 4...)
la pagina 2 muestra la (pagina 3, pagina 4...)

como puedo hacer esa comunicacion entre pagina 1 y pagina 2, cuando se haga click en las referencias de la pagina 1 me muestre en la pagina 2

ojala me entiendas...

gracias por la colaboracion

miloscorp · 29 Octubre 2013, 17:12 PM

Todo se puede hacer solo que aveces es facil o dificil

Supongamos que tenemos una pagina con dos iframe tendremos que navegar por el arbol DOM ya sea hacia arriva o abajo hasta llegar a nuestro objetivo

Pagina Princial:

Código [Seleccionar]

<html>
<head>
 <title>Comunicando iframes</title>
</head>
<body>
 <iframe id="frame1" src="pagina1.html">
 </iframe>
 <iframe id="frame2" src="pagina2.html">
 </iframe>
</body>

Pagina 1

Código [Seleccionar]

<html>
<head>
 <script language="javascript">
  function enviar(){
   window.parent.frames[1].document.getElementById("mensaje").innerHTML = 'Enviado desde el iframe 1';
  }
 </script>
</head>
<body>
 <a href="#" onclick="javascript:enviar();">Enviar hacia el iframe 2</a>
 <h1 id="mensaje"></h1>
</body>

window.parent - > hace referencia a nuestra pagina principal
window.parent.frames[] nos devuelte un array con todos los frames que hay

y creo que le resto se explica solo

Pagina 2

Código [Seleccionar]

<html>
<head>
 <script language="javascript">
  function enviar(){
   window.parent.frames[0].document.getElementById("mensaje").innerHTML = 'Enviado desde el iframe 2';
  }
 </script>
</head>
<body>
 <a href="#" onclick="javascript:enviar();">Enviar hacia el iframe 1</a>
 <h1 id="mensaje"></h1>
</body>