Comunidad de diseño web y desarrollo en internet online

Problema con AJAX+DIV+ pagina php con javascript.

Citar            
MensajeEscrito el 08 Ago 2009 04:46 pm
Hola, este tema ya se ha tratado pero la verdad no he entendido bien ninguna de las soluciones que se han dado, no se por donde empezar,aunque las he leido todas, ayudaría si hubiese algun pequeño ejemplo que explique cómo hay que ir haciendo cada cosa o si alguno podeis darme algunas indicaciones.

Tengo una página .php con 2 divs, uno es el menu superior y otro para cargar contenido de otras páginas php mediante Ajax.

Lás páginas php contienen funciones javascript para validar formularios y tambien para mostrar mapas de GoogleMaps en algunos casos, antes todo esto lo tenía funcionando con frames e iba perfectamente.

El problema es que al cargar las páginas .php dentro del div, no reconoce el código javascript que hay en esas páginas. Algunas soluciones que he leido es usar jquery o separar el html de javascript pero no explicaban cómo hacerlo así que estoy un poco perdido, no se por donde empezar o exactamente cuales son los pasos a seguir para que reconozca el código javascript dentro del DIV. Agradecería cualquier ayuda o indicación.
A continuación pongo el código de princpal.php que es donde está el menu superior y el div contenido e insertarMarca.php que es la página con código javascript que no se reconoce en el div de principal.php

principal.php

Código :

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<script type="text/javascript" src="ajax.js"></script>
<script>

</script>
<style type="text/css">
<!--
#div-superior {
   position:absolute;
   width:1024px;
   height:49px;
   z-index:2;
   background-color: #333333;
}
#div-inicio {
   position:absolute;
   width:38px;
   height:24px;
   z-index:1;
   left: 8px;
   top: 15px;
}
#div-conexion {
   position:absolute;
   width:64px;
   height:23px;
   z-index:2;
   left: 59px;
   top: 14px;
}
#div-texto {
   position:absolute;
   width:395px;
   height:40px;
   z-index:3;
   left: 561px;
   top: 11px;
}
#Layer1 {
   position:absolute;
   width:434px;
   height:46px;
   z-index:6;
   left: 0px;
   top: 52px;
   background-image: url(img/header_left.jpg);
}
#Layer2 {
   position:absolute;
   width:537px;
   height:44px;
   z-index:6;
   left: 436px;
   top: 52px;
   background-image: url(img/ourense2.jpg);
}
#div-azul-izq {
   position:absolute;
   width:325px;
   height:75px;
   z-index:1;
   left: 25px;
   top: 51px;
   background-image: url(img/blue_menor.PNG);
}
#div-naranja-centro {
   position:absolute;
   width:323px;
   height:76px;
   z-index:1;
   left: 351px;
   top: 50px;
   background-image: url(img/orange_menor.PNG);
}
#div-verde-dch {
   position:absolute;
   width:322px;
   height:76px;
   z-index:1;
   left: 674px;
   top: 50px;
   background-image: url(img/green_menor.PNG);
}
#div-nuevamarca {
   position:absolute;
   width:127px;
   height:23px;
   z-index:1;
   left: 7px;
   top: 7px;
}
.Estilo1 {
   color: #FFFFFF;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   font-size: 14px;
}
#div-actualizar {
   position:absolute;
   width:287px;
   height:23px;
   z-index:1;
   left: 13px;
   top: 9px;
}
#div-eliminar {
   position:absolute;
   width:296px;
   height:22px;
   z-index:1;
   left: 10px;
   top: 11px;
}
#Layer9 {
   position:absolute;
   width:268px;
   height:49px;
   z-index:1;
   left: 64px;
   top: 1px;
}
.Estilo2 {
   font-size: 36px;
   font-family: Arial, Helvetica, sans-serif;
   color: #FFFFFF;
}
#div-barra-horizontal {
   position:absolute;
   width:1024px;
   height:85px;
   z-index:0;
   top: 50px;
   background-color: #333333;
}
.Estilo3 {color: #FFFFFF; text-decoration: none}
.Estilo4 {color: #FFFFFF; font-size: 18px; }
#div-texto-superior {
   position:absolute;
   width:765px;
   height:30px;
   z-index:4;
   left: 189px;
   top: 12px;
}
#Layer12 {
   position:absolute;
   width:211px;
   height:21px;
   z-index:2;
   left: 7px;
   top: 120px;
}
#Layer13 {
   position:absolute;
   width:200px;
   height:115px;
   z-index:3;
   left: 364px;
   top: 38px;
}
#Layer14 {
   position:absolute;
   width:200px;
   height:17px;
   z-index:2;
   left: 5px;
   top: 118px;
}
#Layer15 {
   position:absolute;
   width:200px;
   height:24px;
   z-index:2;
   top: 99px;
   left: 0px;
}
#div-nuevamarca-entrar {
   position:absolute;
   width:61px;
   height:36px;
   z-index:3;
   left: 234px;
   top: 34px;
}
#div-actualizar-entrar {
   position:absolute;
   width:82px;
   height:32px;
   z-index:3;
   left: 220px;
   top: 39px;
}
#div-eliminar-entrar {
   position:absolute;
   width:83px;
   height:27px;
   z-index:3;
   left: 219px;
   top: 44px;
}
#div-principal {
   position:absolute;
   width:1024px;
   height:136px;
   z-index:3;
   left: 0px;
   top: 0px;
}

#div-nuevamarca-entrar {
   position:absolute;
   width:61px;
   height:36px;
   z-index:3;
   left: 234px;
   top: 34px;
}
#menu{
   position:absolute;
   width: 61px;
   height: 32px;
   left:234:px;
   top: 34:px;
   border: 3px solid #ececff;
   border-right-color: #006;
   left: 228px;
   top: 33px;
}
#menu a{
position:absolute;
    padding: 3px 1px;
    display: block;
    width: 61px;
    height: 36px;
   left:234:px;
   top: 34:px;

    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid gray;    color: #606;
}
#menu a:hover{
position:absolute;
    background-color: #99c;
    color: #fff;
   position:absolute;
   width: 61px;
    height: 36px;
   left:234:px;
   top: 34:px;

   z-index:1;
}
#contenidos {

   position:absolute;
   width:1024px;
   height:auto; 
   min-height:500px;
   z-index:4;
   top: 137px;
   background-color: #CCCCCC;
}

-->
</style>
</head>

<body>

<div id="div-superior">
  <div class="Estilo3" id="div-inicio"><a href="inferior1.html" target="inferior">Inicio</a></div>
  <div class="Estilo3" id="div-conexion"><a href="salir.php" target="superior">Salir</a></div>
  <div  class="Estilo4" id="div-texto-superior"> SISTEMA DE INFORMACI&Oacute;N TUR&Iacute;STICA DE LA CIUDAD DE OURENSE BASADO EN MAPAS </div>
</div>
<div id="div-azul-izq">
  <div class="Estilo1" id="div-nuevamarca">NUEVA MARCA </div>
  <div id="menu"> <a href="javascript:llamarasincrono('insertarMarca.php', 'contenidos');">Entrar</a></div>
</div>
<div id="div-naranja-centro">
  <div class="Estilo1" id="div-actualizar">ACTUALIZAR CONTENIDO DE UNA MARCA </div>
  <div id="div-actualizar-entrar"><a href="javascript:llamarasincrono('mostrar_marcas.php', 'contenidos');">Entrar</a></div>
</div>
<div id="div-verde-dch">
  <div class="Estilo1" id="div-eliminar">ELIMINAR CONTENIDO MULTIMEDIA </div>
  <div id="div-eliminar-entrar"><a href="javascript:llamarasincrono('mostrar_fotos_videos.php', 'contenidos');">Entrar</a></div>
</div>
<div id="div-barra-horizontal"></div>


<div id="contenidos"></div>
</body>
</html>






insertarMarca.php

Código :

<?php include ("bloqueDeSeguridad.php"); ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Documento sin t&iacute;tulo</title>

<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=TU-GOOGLE-MAPS-KEY"></script>
<script type="text/javascript">
//<![CDATA[

function addOpt(oCntrl, iPos, sTxt, sVal){
   var selOpcion=new Option(sTxt, sVal);
   eval(oCntrl.options[iPos]=selOpcion);
   }
 
function cambia(obj,Cntrl){
   var oCntrl=document.getElementById(Cntrl);
   while (oCntrl.length!=0){
      oCntrl.remove(0);
   }
   switch (obj.selectedIndex){
   case 0:
      addOpt(oCntrl, 0, "Antes elige tipo de marca", "0");
      break;
   case 1:
      addOpt(oCntrl, 0, "4 estrellas", "4 estrellas");
      addOpt(oCntrl, 1, "3 estrellas", "3 estrellas");
      addOpt(oCntrl, 2, "2 estrellas", "2 estrellas");
      addOpt(oCntrl, 3, "1 estrellas", "1 estrellas");
      break;
   case 2:
      addOpt(oCntrl, 0, "3 estrellas", "3 estrellas");
      addOpt(oCntrl, 1, "2 estrellas", "2 estrellas");
      addOpt(oCntrl, 2, "1 estrella", "1 estrella");
      break;
   case 3:
      addOpt(oCntrl, 0, "grupo A", "grupo A");
      addOpt(oCntrl, 1, "grupo B", "grupo A");
      addOpt(oCntrl, 2, "grupo C", "grupo C");
      break;
   case 4:
      addOpt(oCntrl, 0, "Municipal", "municipal");
      addOpt(oCntrl, 1, "Arqueologico", "arqueologico");
      addOpt(oCntrl, 2, "Catedralicio", "catedralicio");
      break;
   case 5:
      addOpt(oCntrl, 0, "Catedral", "catedral");
      addOpt(oCntrl, 1, "Iglesia", "iglesia");
      addOpt(oCntrl, 2, "Centro Historico", "centro historico");
      addOpt(oCntrl, 3, "Puente", "puente");
        addOpt(oCntrl, 4, "Edificio", "edificio");
      break;
   case 6:
      addOpt(oCntrl, 0, "Estatua", "estatua");
      addOpt(oCntrl, 1, "Parque", "parque");
      addOpt(oCntrl, 2, "Exposicion", "exposicion");
      break;
   case 7:
      addOpt(oCntrl, 0, "Deporte", "deporte");
      addOpt(oCntrl, 1, "Moda", "moda");
      addOpt(oCntrl, 2, "Complementos", "complementos");
      break;
   case 8:
      addOpt(oCntrl, 0, "Bar", "bar");
      addOpt(oCntrl, 1, "Cafeteria", "cafeteria");
      break;
   case 9:
      addOpt(oCntrl, 0, "Primera hora", "primera hora");
      addOpt(oCntrl, 1, "Ultima hora", "ultima hora");
      break;
   case 10:
      addOpt(oCntrl, 0, "3 tenedores", "3 tenedores");
      addOpt(oCntrl, 1, "2 tenedores", "2 tenedores");
      addOpt(oCntrl, 2, "1 tenedor", "1 tenedor");
      break;
   
   case 11:
      addOpt(oCntrl, 0, "Gratis", "gratis");
      addOpt(oCntrl, 1, "De pago", "de pago");
      break;
   }
}

function control_imagenes(f){
   var ext=['gif','jpg','jpeg','png'];
   var v=f.value.split('.').pop().toLowerCase();
   for(var i=0,n;n=ext[i];i++){
      if(n.toLowerCase()==v)
         return
   }
   var t=f.cloneNode(true);
   t.value='';
   f.parentNode.replaceChild(t,f);
   alert('El campo foto cabecera debe de ser de tipo imagen');
   
}

function validar(){
    //valido el nombre
    if (document.formulario.nombre.value.length==0){
       alert("El campo nombre esta vacio")
       document.formulario.nombre.focus()
       return false;
    }
   if (document.formulario.tipo_marca.selectedIndex ==0){
      alert("No hay ningun tipo de marca seleccionada")
       document.formulario.tipo_marca.focus()
       return false;
   }
   
   if (document.formulario.descripcion_breve.value.length==0){
       alert("El campo datos esta vacio")
       document.formulario.descripcion.focus()
       return false;
    }

   if (document.formulario.descripcion.value.length==0){
       alert("El campo descripcion esta vacio")
       document.formulario.descripcion.focus()
       return false;
    }
   if (document.formulario.imagen.value.length ==0){
      alert("No hay ninguna foto de cabecera seleccionada")
       document.formulario.tipo_marca.focus()
       return false;
   }
    if (document.formulario.lat.value.length==0){
       alert("El campo latitud esta vacio")
       document.formulario.lat.focus()
       return false;
    }
   if (document.formulario.lng.value.length==0){
       alert("El campo longitud esta vacio")
       document.formulario.lng.focus()
       return false;
    }
   
   if (isNaN(document.formulario.lat.value)) {
      alert("El campo latitud solo puede contener numeros");
      document.formulario.tipo_marca.focus()
      return false;
    }
    
    if (document.formulario.lng.value < -180 || document.formulario.lat.value > 180){
       alert("El rango de valores para Longitud es de -180 a 180")
       document.formulario.lng.focus()
       return false;
    }
   if (isNaN(document.formulario.lng.value)) {
      alert("El campo longitud solo puede contener numeros");
      document.formulario.tipo_marca.focus()
      return (false);
    }
    if (document.formulario.lat.value < -90 || document.formulario.lat.value > 90){
       alert("El rango de valores para Latitud es de -90 a 90")
       document.formulario.lat.focus()
       return false;
    }

  
  
    return true;
} 


 //google.load('maps', '2');

function load() {
   if (GBrowserIsCompatible()) {

      var map = new GMap2(document.getElementById("map"));   
      map.setCenter(new GLatLng(42.33989,-7.866),13);   

      map.addMapType(G_SATELLITE_3D_MAP);
   
      map.addControl(new GHierarchicalMapTypeControl());
      map.addControl(new GLargeMapControl());




      
      var point = new GPoint (-7.866,42.33989);
      var marker = new GMarker(point);
      map.addOverlay(marker);
      
      GEvent.addListener(map, "click", function (overlay,point){
         if (point){
            marker.setPoint(point);
            document.formulario.lat.value=point.y
            document.formulario.lng.value=point.x
         }
      });
   }
}

window.onload=load
//]]>
</script>

<style type="text/css">
<!--
#map {
   position:absolute;
   left:550px;
   top:18px;
   width:300px;
   height:391px;
   
}
-->
a.estilo1 { font-weight: bold; font-size:18px; color: #0B0B3B; text-decoration: none}
a.estilo2 { font-weight: bold; fotn-size:10px; color: #0B0B3B; text-decoration: none}
</style>
</head>

<body >



<div id="principal">
<form  enctype="multipart/form-data" name="formulario" method="post" action="procesar_marca.php" onSubmit="return validar()">
  <table width="200" border="0">
    <tr>
      <td>Nombre:</td>
      <td><label>
        <input name="nombre" type="text" size="50"  />
      </label></td>
    </tr>
   <tr>
      <td>Tipo:</td>
      <td>
        <select name="tipo_marca" id="tipo_marca" onChange="cambia(this,'categoria')">
      <option value="0">Elige tipo de marca</option>
      <option value="hotel">Hotel</option>
      <option value="pension">Pension</option>
      <option value="casa_rural">Casa rural</option>
      <option value="museo">Museo</option>
      <option value="arquitectura">Arquitectura</option>
      <option value="otros_espacios">Otros espacios</option>
      <option value="tienda_ropa">Tienda de ropa</option>
      <option value="bar_cafeteria">Bar/Cafeteria</option>
      <option value="pub">Pub</option>
      <option value="restaurante">Restaurante</option>
      <option value="termalismo">Termalismo</option>
      </select>
       </td>
    </tr>
   <tr>
      <td>Categoría:</td>
     <td>
      <select name="categoria"  id="categoria">
      <option value="0">Antes elige tipo de marca</option>
      </select>
      </td>
   </tr>
   <tr>
   <td>Foto de cabecera:</td>
      <td><label>
      <input name="imagen" type="file" onchange="control_imagenes(this)">
      </label></td>
    </tr>
   <tr>
      <td>Datos:</td>
      <td><label>
        <textarea name="descripcion_breve"  cols="50" rows="5"></textarea>
      </label></td>
    </tr>
   
    <tr>
      <td>Descripcion:</td>
      <td><label>
        <textarea name="descripcion"  cols="50" rows="13"></textarea>
      </label></td>
    </tr>
    <tr>
      <td>Latitud:</td>
      <td><label>
        <input type="text" name="lat"  />
      </label></td>
    </tr>
    <tr>
      <td>Longitud:</td>
      <td><label>
        <input type="text" name="lng"  />
      </label></td>
    </tr>
   
    <tr>
      <td>&nbsp;</td>
      <td>
        <input type="submit" name="enviar"  value="Guardar marca" />
        <input type="reset" name="vaciar"  value="Limpiar formulario" />
      </td>
    </tr>
  </table>
  
</form>



<div id="map" ></div>
</div>
</body>
</html>

Por riestra

73 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Nov 2009 09:28 pm
Tengo el mismo problema que tu y no se como solucionarlo, agradeceria si lo has solucionado que lo explicaras. Gracias, si supiera la solucion la compartiria que no veas que quebradero.

Por davidvina

1 de clabLevel



 

firefox
Citar            
MensajeEscrito el 05 Nov 2009 11:05 am
Hola,
lo he solucionado usando i-Frames. Los i-Frames son similares a los Frames pero con algunas ventajas:

Código HTML :

<div id="colores">   
<div id="div-azul-izq">
  <div class="Estilo1" id="div-nuevamarca">NUEVA MARCA </div>
  <div id="menu"> <a href="javascript:loadintoIframe('myframe', 'insertarMarca2.php')">Entrar</a></div>
</div>
<div id="div-naranja-centro">
  <div class="Estilo1" id="div-actualizar">ACTUALIZAR CONTENIDO DE UNA MARCA </div>
  <div id="menu2"><a href="javascript:loadintoIframe('myframe', 'mostrar_marcas.php')">Entrar</a></div>
</div>
<div id="div-verde-dch">
  <div class="Estilo1" id="div-eliminar">ELIMINAR CONTENIDO MULTIMEDIA </div>
  <div id="menu3"><a href="javascript:loadintoIframe('myframe', 'mostrar_fotos_videos.php')">Entrar</a></div>
</div>
</div>


Además existe una solución-parche-técnica, que usando javascript puedes hacer que el frame se adapte al tamaño del contenido que va a ir dentro de él, evitando asi las barras de scroll que son un verdadero coñazo

Echa un vistazo aquí http://www.dynamicdrive.com
Si no te queda claro, pregunta de nuevo, un saludo!

Por riestra

73 de clabLevel



 

firefox
Citar            
MensajeEscrito el 11 Nov 2009 08:57 am
aaammm tu problema es que no has entendido completamente lo que es AJAX, y pues la recomendacion que te hago es que leas un tutorial al en su totalidad de ajax, JavaScript y DOM+JavaScript, y no solo busques librerias y librerias, veo en tu codificacion vastantes malas practicas, desde tener CSS,HTML y JavaScript y PHP en un solo documento, eso no esta mal pero es una mala practica para cuando quieres reciclar codigo y hacer legible y matentimble tu codigo, y en el contexto en el que estas manejando AJAX trantando de simular un "frame" es erroneo desde el concepto de la idea, lamento decirte que no hay pasos, por los cuales no los pidas, lo mas que te puedo dar un ejemplo, y pues de alli tu ver que tecnicas utilice y aplicalo en tus casos segun te indique tu logica.

primero necesitas
separar tu JavaScript en archivos .js
separar tus CSS en archivos .css
seria ideoneo separar tu PHP y HTMLS

para el ejemplo voy a utilizar algunas librerias de mi autoria que que utilizo en mis proyectos:
la libreria jsRqst(jsRequest) que es una Clase(prototipo JSON) en js que me permite realizar peticiones http de forma ansicronica lo que comunmente se conoce como AJAX(solo que yo si le llamo x su nombre real). en el ejemplo utilizo dos metodos estaticos
jsRqst.rHTML(URL,div,onload,postVars) , que hace una peticion a la URL(1er parametro) y el Response(respuesta) este lo colca en el div(2do parametro es un Strntring con el id del Div dode se colocara la respuesta) , este metodo esta pensado para cargar HTML o lo que fuera que generara un codigo html y esa lo que sea la respuesta del request, el tercer parametro es el nombre de la funcion que se ejecutara una ves que la respuesta se alla realizado y que el texto se alla colocado en la div, el utlimo parametro es un JSON con las variables que se envien a la url atraves de POST

jsRqst.rJs(URL,onload,postVars), este metodo esta pensado para traer archivos js. al igula que rHTML solo que ahora se espera un JavaScript, el primer parametro es la URL, el segundo es la funcion a ejecutar cuando se cree el script y se coloque en el head, y por ultimo el JSON que seran las variables que se envien por POST

jsRqst utiliza mi libreria cElement, que me sirve para crear elementos en el DOM

Bueno una ves que te comente las librerias que utilizo para maneajar "AJAX" (peticiones http ansicronicas para mi) paso a darte los archivos que utilice:
index.php

Código PHP :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>       
        <link href="styles.css" rel="stylesheet" type="text/css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script type="text/javascript" src="cElement.js"></script>
        <script type="text/javascript" src="jsRqst.js"></script>
        <script type="text/javascript" src="scripts.js"></script>
    </head>
    <body>
        <div id="pagina">
            <div id="menu">
                <a href="" onclick="cargarPHP1(); return false;">Php1</a> ::
                <a href="" onclick="cargarPHP2(); return false;">Php2</a>
            </div>
            <div id="contenidos">
                Aqui se carga el resultados de los PhP
            </div>
            <div id="pie">
                Ejemplo por Fco Díaz, [email protected] <a href="http://wwww.devtics.com.mx">www.devtics.com.mx</a>
            </div>
        </div>
    </body>
</html>


Observa que que incluyo las librerias que te comente que utilizo en la libreria scripts,js que es donde tengo las funciones cargaPHP1() y cargaPHP2(), tambien separe las CSS a un .css

stiles.css

Código HTML :

body{
    background-color:black;
    font-family:Arial;
    font-size:13px;
}
#pagina{
    background-color:white;
    width:500px;
    margin:0 auto;
}
#menu{
    background-color:gray;
    font-weight:bold;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:10px;
}
#menu a{
    color:black;
    
}
#contenidos{
    padding:10px;
}
#pie{
    text-align:center;
    background-color:#c0c0c0;
    font-family:verdana;
    padding:5px;
    font-size:10px;
}

php1.php

Código PHP :

<?php
/*
 * el proceso que sea
 */
?>
<input type="button" value="Este Boton lo Hiso Php1.php" onclick="php1();" />
?>

Este solo es un ejemplo, en "el proceso que sea" es donde irian tus proceso conexiones a BD, operaciones etc, recuerda que este solo es un ejemplo y pues no pienso complicarme mas :P
php2.php

Código PHP :

<?php
/*
 * el proceso que sea
 */
?>
<input type="button" value="Este Boton lo Hiso Php2.php" onclick="php2();" />

Exactamente lo mismo que el php1.php, (recuerda es un ejemplo), bueno solo cambia la funcion del onclick

ahora los js
php1.js

Código Javascript :

function php1() {
    alert("Este JS lo uso en php1");
}

php2.js

Código Javascript :

function php2(){
    alert("Este JS lo uso en php2")
};

en php1.js y php2.js coloco los JavaScript que en teoria utlizare en los php, (lo que tu tienes en los head o toda funcion que utilices en tus php que cargas)

y el script que contiene las funciones del menu y los "AJAX"

Código Javascript :

function cargaRespuestaPhp1(){    
    jsRqst.rHTML("php1.php",'contenidos');//cargo php1.php
}
function cargarPHP1(){
    try{//meti en try catch por que me marcaba error al intentar acceder a php1
        if(php1)//si existe la variable o funcion php1, esto para que solo se incluya una sola vez el script en el head, 
            cargaRespuestaPhp1();//solo se carga la respuesta de php1.php
    }catch(e){
        jsRqst.rJs("php1.js",cargaRespuestaPhp1);//se carga el js en el se define la funcion php1 por lo que a la siguiente vuelta se ejecutara la otra parte de try, despues de cargarse se llamara a caraRespuestaPhp1
    }
}

/*
 *duplique el codigo para PHP2 auque se podria hacer mas elegante, reciviendo el php a descargar y
 *reduciendo codigo, el funcionamiento es el mismo que para los php1
 **/
function cargaRespuestaPhp2(){
    jsRqst.rHTML("php2.php",'contenidos');
}
function cargarPHP2(){
    try{
        if(php2)
            cargaRespuestaPhp2();
    }catch(e){
        jsRqst.rJs("php2.js",cargaRespuestaPhp2);
    }
}


por ultimo las librerias utilizada:
cElement.js

Código Javascript :

/**
Crea un Elemento Dom en document e inicializa sus atributos segun el 
json que se le alla pasado

Ejemplo: 

input = cElement('input',{'type':'text','value':'hola Mundo'});

divX.appendChild(input);

Fco Diaz 
[email protected]
http://www.devtics.com.mx
*/
function cElement(type,jsonAtributes){
   var element=document.createElement(type);
   for(i in jsonAtributes){
      element[i]=jsonAtributes[i];
   }
   return element;
}


jsRsqt.js

Código Javascript :

/* Clase (Prototpo JSON)
 * Fco Díaz Arredondo (wariodiaz, pakos)
 * www.devtics.com.mx
 * [email protected]
 * [email protected]
 * libreria que realiza peticiones ansicronicas a travez de http (AJAX)
 *
 * Sep 2009
 **/
//jsRqst = jsRequest
function obj(id){
    return document.getElementById(id);
}
function jsRqst(URL,onResponse,PostVars,autoRequest){   
   
    try {
      this.httpR = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
       try {
          this.httpR = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (E) {
          this.httpR = false;
//          /alert('no se construllo');
       }
    }
    if (!this.httpR && typeof XMLHttpRequest!='undefined') {
       this.httpR = new XMLHttpRequest();
    }
    if(PostVars.tagName){
        var jsonvars=new Object();
        for(i=0;i<PostVars.length;i++){

            var campo=PostVars[i];
            if(campo.name){
                switch(campo.type){
                    default:
                        jsonvars[campo.name]=campo.value;
                    break;
                }
            }
        }
        PostVars=jsonvars;
    }    
    this.PostVars=(PostVars!=undefined)?PostVars:"";
    this.URL=URL;

    this.gethttpRon=function(){
        return this.httpR;
    }
    this.getUrl=function(){
        return this.URL+(
            (this.URL.indexOf("?")==-1)?"?":""
            )+this.jSon2UrlEncode(this.GetVars);

    }
    this.getVarsPost = function(){
        return this.jSon2UrlEncode(this.PostVars);
    }
    this.jSon2UrlEncode=function(jSon,name){
        var url="";
        for(i in jSon){           
            if((typeof jSon[i])=='object'){
                url+=  this.jSon2UrlEncode(jSon[i],i+"[]")+"&";                
            }else
                url+=((name==undefined)?escape(i):name)+'='+escape(jSon[i])+"&";
        }        
        return url.substr(0,url.length-1);
    }
    this.onResponse=onResponse;
    this.onError=function(){
        alert("Error:"+this.httpR.status);
    }
    this.request=function(){        
        var evitaCache=Math.floor(Math.random() * (100000000000000));         
        var url = this.getUrl()+((this.getUrl().indexOf('?')==-1)?"?":"&")+evitaCache;        
        if(this.getVarsPost()){
           
            this.httpR.open("POST",url,true);
            this.httpR.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //cabeceras del post
            this.httpR.send(this.getVarsPost());
            
        }else{           
           this.httpR.open("GET",url,true);
            this.httpR.send(null);//hay que mandar null por que si no da broncas 
        }
        var jsRqst=this;
        var httpR=this.httpR;
      
        this.httpR.onreadystatechange=function(){           
            if (httpR.readyState==4){               
                if(httpR.status==200){
                    jsRqst.onResponse();
                }else{
                    jsRqst.onError();
                }
            }
        }
        this.getResponse = function(){
            return this.httpR.responseText;
        }
   }
    if(autoRequest)this.request();
    
}
jsRqst.rHTML=function(URL,div,onload,postVars){
   jsRqst(URL,function(){
      obj(div).innerHTML=this.getResponse();
      if(onload)onload();
   },((postVars==undefined)?{}:postVars),1);
}
jsRqst.rJs=function(URL,onload,postVars){
       jsRqst(URL,function(){      
                document.getElementsByTagName("head")[0].appendChild(cElement("script",{text:this.getResponse(),'type':'text/javascript'}))                
      if(onload)onload();
   },((postVars==undefined)?{}:postVars),1);
}


en librerias cElement y jsRqst te puedes abstraer de como funcionan (una de las bentajas de la OOP) y solo enfocate en como las utilizo en los ejemplos


pues bien espero que con este te quede un poco mas claro que un Div no puede funcionar como un FRAME, y al trarer un HTML y solo colocarlo en un DIV los scripts no se ejecutan ya que JS se ejecuta en primera vez en asendente (como se va descargando de arriba asía abajo) y esto solo sucede una vez, cuando modificas el dom, modificas parte del codigo que se supone ya se ejecuto por eso ya si defines alguna funcion en el codigo que cargas dinamicamente este no se define en JavaScript, para eso tendrias que activar o ma bien como lo hago en el ejemplo agrego manejando DOM los scripts que necesite mi nueva peticion, al hacer esto el script se vuelbe a ejecutar y se definen las funciones que utilice.

este ejemplo lo probe en IE>5.5 y Firefox 3.5 y todo perfercto

Por wariodiaz

55 de clabLevel



 

firefox

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.