Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/01/2011, 07:55
ivan_zo73
 
Fecha de Ingreso: enero-2011
Mensajes: 4
Antigüedad: 13 años, 10 meses
Puntos: 0
Cargar javascript con Ajax en un DIV

Bien tengo el siguiente problema, tengo una pagina que carga clickando en un Menu contenido en un DIV (tambien paginas formulario que envian datos por POST) a traves de Ajax, incluido funciones Javascript gracias al post de MaBoRaK, el problema es que en Firefox y Safari funciona Ok pero en Chrome no reconoce las llamadas a Javascript (por ejemplo Alert("Prueba");), tampoco me funciona en ningun navegador una de mis paginas que tiene un mapa de Google Maps (si llamo en la barra de direcciones directamente a la pagina que contiene Google Maps si lo carga), el codigo:

Funciones.js:
Código Javascript:
Ver original
  1. // Interpretador de codigo de ajax para reconocer funciones Javascript
  2. var tagScript = '(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)';
  3. /**
  4. * Eval script fragment
  5. * @return String
  6. */
  7. String.prototype.evalScript = function()
  8. {
  9.         return (this.match(new RegExp(tagScript, 'img')) || []).evalScript();
  10. };
  11. /**
  12. * strip script fragment
  13. * @return String
  14. */
  15. String.prototype.stripScript = function()
  16. {
  17.         return this.replace(new RegExp(tagScript, 'img'), '');
  18. };
  19. /**
  20. * extract script fragment
  21. * @return String
  22. */
  23. String.prototype.extractScript = function()
  24. {
  25.         var matchAll = new RegExp(tagScript, 'img');
  26.         return (this.match(matchAll) || []);
  27. };
  28. /**
  29. * Eval scripts
  30. * @return String
  31. */
  32. Array.prototype.evalScript = function(extracted)
  33. {
  34.                 var s=this.map(function(sr){
  35.                 var sc=(sr.match(new RegExp(tagScript, 'im')) || ['', ''])[1];
  36.                 if(window.execScript){
  37.                     window.execScript(tagScript);
  38.                 }
  39.                 else
  40.                 {
  41.                  window.setTimeout(sc,0);
  42.                 }
  43.                 });
  44.                 return true;
  45. };
  46. /**
  47. * Map array elements
  48. * @param {Function} fun
  49. * @return Function
  50. */
  51. Array.prototype.map = function(fun)
  52. {
  53.         if(typeof fun!=="function"){return false;}
  54.         var i = 0, l = this.length;
  55.         for(i=0;i<l;i++)
  56.         {
  57.                 fun(this[i]);
  58.         }
  59.         return true;
  60. };
  61.  
  62. function ajaxFunction() {
  63. var xmlHttp;
  64. try {
  65. // Firefox, Opera 8.0+, Safari
  66. xmlHttp=new XMLHttpRequest();
  67. return xmlHttp;
  68. } catch (e) {
  69. // Internet Explorer
  70. try {
  71. xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  72. return xmlHttp;
  73. } catch (e) {
  74. try {
  75. xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  76. return xmlHttp;
  77. } catch (e) {
  78. alert("¡Tu navegador no soporta AJAX!");
  79. return false;
  80. }}}
  81. }
  82.  
  83. function Cargar(url,target) {
  84.  
  85.     var ajax = ajaxFunction();
  86.  
  87.     ajax.open("POST", url, true);
  88.    
  89.     ajax.onreadystatechange = function() {
  90.         if (ajax.readyState == 4){
  91.             var scs = ajax.responseText.extractScript(); //capturamos los scripts
  92.             document.getElementById (target).innerHTML = ajax.responseText.stripScript(); //eliminamos los scripts... ya son innecesarios
  93.             scs.evalScript();
  94.         }
  95.     }
  96.     ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  97.     ajax.send(null);
  98. }
  99.    
  100. function EnviarForm(_pagina,seccion,formid,capa) {
  101.     var ajax = ajaxFunction();
  102.     var Formulario = document.getElementById(formid);
  103.     var longitudFormulario = Formulario.elements.length;
  104.     var cadenaFormulario = "";
  105.     var sepCampos = "";
  106.    
  107.     for (var i=0; i <= Formulario.elements.length-1;i++) {
  108.         cadenaFormulario += sepCampos+Formulario.elements[i].name+'='+encodeURI(Formulario.elements[i].value);
  109.         sepCampos="&";
  110.     }
  111.  
  112.     ajax.open("POST", _pagina, true);
  113.     ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  114.     ajax.onreadystatechange = function() {
  115.         if (ajax.readyState==1){
  116.             document.getElementById(capa).innerHTML = "<img src='../Imagenes/loader.gif' align='center' /> Cargando...";
  117.         }
  118.         if (ajax.readyState == 4) {
  119.             var scs = ajax.responseText.extractScript(); //capturamos los scripts
  120.             document.getElementById (capa).innerHTML = ajax.responseText.stripScript(); //eliminamos los scripts... ya son innecesarios
  121.             scs.evalScript();  
  122.         }
  123.     }
  124.     ajax.send(cadenaFormulario+"&"+seccion);
  125. }

En la pagina Index.php cargo Funciones.js y el menu que funciona con Ajax, estas son algunas de las paginas que cargo en el DIV contenido:

Google.php:
Código PHP:
Ver original
  1. <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=KEY" type="text/javascript"></script>
  2.  
  3. <script type="text/javascript">
  4.     var mapa;
  5.     var gdir;
  6.     var geocoder = null;
  7.     var addressMarker;
  8.  
  9.     function cargarMapa() {
  10.         if (GBrowserIsCompatible()) {
  11.             mapa = new GMap2(document.getElementById("mapa_ruta"));
  12.             // escribe las indiciaciones de la ruta a seguir
  13.             gdir = new GDirections(mapa, document.getElementById(""));
  14.             //variable que almacena el centro del mapa inicial
  15.             var centro = new GLatLng(41.282451,-4.107685);
  16.             alert("Dentro"); // este alert NO funciona bien
  17.             //controles de zoom
  18.             mapa.addControl(new GSmallMapControl());
  19.             //controles tipo mapa: plano, satelite o hibrido
  20.             mapa.addControl(new GMapTypeControl());
  21.             //lo que vemos inicialmente en el mapa
  22.             mapa.setCenter(centro, 9);
  23.             //impide que el usuario desplace el mapa
  24. //          mapa.disableDragging();
  25.             //variable que almacena la posicion de la marca
  26.             var pos_marca = new GLatLng(40.944477006541554, -4.116225242614746);
  27.             //marca roja
  28.             var marca = new GMarker(pos_marca);
  29.             //añadimos la marca al mapa
  30.             mapa.addOverlay(marca);
  31.             //añadimos un comentario en la marca
  32.             var comentario = "Comentario";
  33.             GEvent.addListener(marca,"click", function() {
  34.                 marca.openInfoWindowTabsHtml(comentario);  
  35.             });
  36.             //carga los datos de tiempo y distancia de la ruta
  37.             GEvent.addListener(gdir, "load", onGDirectionsLoad);
  38.             //funcion que muestra mensajes en caso de error
  39.             GEvent.addListener(gdir, "error", mostrarError);       
  40.         } // fin if
  41.     } // fin Cargar_Mapa
  42. </script>
  43.    
  44. .. aqui hay codigo HTML...
  45.             <div id="mapa_ruta" style="width: 650px; height: 400px;"><img src="Imagenes/loader.gif"></div>
  46. <script>
  47.     cargarMapa();
  48.     alert("abajo"); // este alert funciona bien salvo en Chrome
  49. </script>

Formulario.php:
Código PHP:
Ver original
  1. <link type="text/css" rel="stylesheet" href="CSS/formulario.css">
  2.  
  3. <!-- Formulario -->
  4. <form name="form" id="form" action="#" method="post">
  5.    ...Campos del Formulario...
  6. <input name="insertar" id="insertar" value="Insertar" type="button" onclick="EnviarForm('procesarForm.php','c=3','form','contenido');">
  7. </form>
  8. <script>
  9. alert('holaaaaaa');
  10. </script>

¿alguien sabe como solucionarlo para que funcionen los Javascript en todos los navegadores?
¿alguien sabe como hacer para que se cargue el mapa de Google Maps por medio de Ajax?