Tema: problema con javascript en pagina cargada por ajax!
Ver Mensaje Individual
  #12 (permalink)  
Antiguo 15/10/2012, 21:49
Avatar de protoameeba
protoameeba
 
Fecha de Ingreso: septiembre-2005
Mensajes: 195
Antigüedad: 19 años, 2 meses
Puntos: 3
Respuesta: problema con javascript en pagina cargada por ajax!
Hola Emprear,


este es el .js que falta:

modal.popup.js

Código Javascript: 
Ver original
  1. function modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, url, loadingImage){
  2.  
  3.     var containerid = "innerModalPopupDiv";
  4.         
  5.     var popupDiv = document.createElement('div');
  6.     var popupMessage = document.createElement('div');
  7.     var blockDiv = document.createElement('div');
  8.     
  9.     popupDiv.setAttribute('id', 'outerModalPopupDiv');
  10.     popupDiv.setAttribute('class', 'outerModalPopupDiv');
  11.     
  12.     popupMessage.setAttribute('id', 'innerModalPopupDiv');
  13.     popupMessage.setAttribute('class', 'innerModalPopupDiv');
  14.     
  15.     blockDiv.setAttribute('id', 'blockModalPopupDiv');
  16.     blockDiv.setAttribute('class', 'blockModalPopupDiv');
  17.     blockDiv.setAttribute('onClick', 'closePopup(' + fadeOutTime + ')');
  18.     
  19.     document.body.appendChild(popupDiv);
  20.     popupDiv.appendChild(popupMessage);
  21.     document.body.appendChild(blockDiv);
  22.     
  23.     if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
  24.      var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
  25.        if(ieversion>6) {
  26.          getScrollHeight(top);
  27.        }
  28.     } else {
  29.       getScrollHeight(top);
  30.     }
  31.     
  32.     document.getElementById('outerModalPopupDiv').style.display='block';
  33.     document.getElementById('outerModalPopupDiv').style.width = width + 'px';
  34.     document.getElementById('outerModalPopupDiv').style.padding = borderWeight + 'px';
  35.     document.getElementById('outerModalPopupDiv').style.background = borderColor;
  36.     document.getElementById('outerModalPopupDiv').style.borderRadius = borderRadius + 'px';
  37.     document.getElementById('outerModalPopupDiv').style.MozBorderRadius = borderRadius + 'px';
  38.     document.getElementById('outerModalPopupDiv').style.WebkitBorderRadius = borderRadius + 'px';
  39.     document.getElementById('outerModalPopupDiv').style.borderWidth = 0 + 'px';
  40.     document.getElementById('outerModalPopupDiv').style.position = 'absolute';
  41.     document.getElementById('outerModalPopupDiv').style.zIndex = 100;
  42.     
  43.     document.getElementById('innerModalPopupDiv').style.padding = padding + 'px';
  44.     document.getElementById('innerModalPopupDiv').style.background = backgroundColor;
  45.     document.getElementById('innerModalPopupDiv').style.borderRadius = (borderRadius - 3) + 'px';
  46.     document.getElementById('innerModalPopupDiv').style.MozBorderRadius = (borderRadius - 3) + 'px';
  47.     document.getElementById('innerModalPopupDiv').style.WebkitBorderRadius = (borderRadius - 3) + 'px';
  48.     
  49.     document.getElementById('blockModalPopupDiv').style.width = 100 + '%';
  50.     document.getElementById('blockModalPopupDiv').style.border = 0 + 'px';
  51.     document.getElementById('blockModalPopupDiv').style.padding = 0 + 'px';
  52.     document.getElementById('blockModalPopupDiv').style.margin = 0 + 'px';
  53.     document.getElementById('blockModalPopupDiv').style.background = disableColor;
  54.     document.getElementById('blockModalPopupDiv').style.opacity = (disableOpacity / 100);
  55.     document.getElementById('blockModalPopupDiv').style.filter = 'alpha(Opacity=' + disableOpacity + ')';
  56.     document.getElementById('blockModalPopupDiv').style.zIndex = 99;
  57.     document.getElementById('blockModalPopupDiv').style.position = 'fixed';
  58.     document.getElementById('blockModalPopupDiv').style.top = 0 + 'px';
  59.     document.getElementById('blockModalPopupDiv').style.left = 0 + 'px';
  60.     
  61.     if(align=="center") {
  62.         document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
  63.         document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
  64.     } else if(align=="left") {
  65.         document.getElementById('outerModalPopupDiv').style.marginLeft = 0 + 'px';
  66.         document.getElementById('outerModalPopupDiv').style.left = 10 + 'px';
  67.     } else if(align=="right") {
  68.         document.getElementById('outerModalPopupDiv').style.marginRight = 0 + 'px';
  69.         document.getElementById('outerModalPopupDiv').style.right = 10 + 'px';
  70.     } else {
  71.         document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
  72.         document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
  73.     }
  74.     
  75.     blockPage();
  76.  
  77.     var page_request = false;
  78.     if (window.XMLHttpRequest) {
  79.         page_request = new XMLHttpRequest();
  80.     } else if (window.ActiveXObject) {
  81.         try {
  82.             page_request = new ActiveXObject("Msxml2.XMLHTTP");
  83.         } catch (e) {
  84.             try {
  85.                 page_request = new ActiveXObject("Microsoft.XMLHTTP");
  86.             } catch (e) { }
  87.         }
  88.     } else {
  89.         return false;
  90.     }
  91.  
  92.  
  93.     page_request.onreadystatechange=function(){
  94.         if((url.search(/.jpg/i)==-1) && (url.search(/.jpeg/i)==-1) && (url.search(/.gif/i)==-1) && (url.search(/.png/i)==-1) && (url.search(/.bmp/i)==-1)) {
  95.             pageloader(page_request, containerid, loadingImage);
  96.         } else {
  97.             imageloader(url, containerid, loadingImage);
  98.         }
  99.     }
  100.  
  101.     page_request.open('GET', url, true);
  102.     page_request.send(null);
  103.     
  104. }
  105.  
  106. function pageloader(page_request, containerid, loadingImage){
  107.     
  108.     document.getElementById(containerid).innerHTML = '<div align="center"><img src="' + loadingImage + '" border="0" /></div>';
  109.     
  110.     if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) {
  111.         document.getElementById(containerid).innerHTML=page_request.responseText;
  112.     }
  113.     
  114. }
  115.  
  116. function imageloader(url, containerid, loadingImage) {
  117.     
  118.     document.getElementById(containerid).innerHTML = '<div align="center"><img src="' + loadingImage + '" border="0" /></div>';
  119.     document.getElementById(containerid).innerHTML='<div align="center"><img src="' + url + '" border="0" /></div>';
  120.     
  121. }
  122.  
  123. function blockPage() {
  124.     
  125.     var blockdiv = document.getElementById('blockModalPopupDiv');
  126.     var height = screen.height;
  127.     
  128.     blockdiv.style.height = height + 'px';
  129.     blockdiv.style.display = 'block';
  130.  
  131. }
  132.  
  133. function getScrollHeight(top) {
  134.    
  135.    var h = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
  136.            
  137.     if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
  138.         
  139.         var ieversion=new Number(RegExp.$1);
  140.         
  141.         if(ieversion>6) {
  142.             document.getElementById('outerModalPopupDiv').style.top = h + top + 'px';
  143.         } else {
  144.             document.getElementById('outerModalPopupDiv').style.top = top + 'px';
  145.         }
  146.         
  147.     } else {
  148.         document.getElementById('outerModalPopupDiv').style.top = h + top + 'px';
  149.     }
  150.     
  151. }
  152.  
  153. function closePopup(fadeOutTime) {
  154.     
  155.     fade('outerModalPopupDiv', fadeOutTime);
  156.     document.getElementById('blockModalPopupDiv').style.display='none';
  157.  
  158. }
  159.  
  160. function fade(id, fadeOutTime) {
  161.     
  162.     var el = document.getElementById(id);
  163.     
  164.     if(el == null) {
  165.         return;
  166.     }
  167.     
  168.     if(el.FadeState == null) {
  169.         
  170.         if(el.style.opacity == null || el.style.opacity == '' || el.style.opacity == '1') {
  171.             el.FadeState = 2;
  172.         } else {
  173.             el.FadeState = -2;
  174.         }
  175.     
  176.     }
  177.     
  178.     if(el.FadeState == 1 || el.FadeState == -1) {
  179.         
  180.         el.FadeState = el.FadeState == 1 ? -1 : 1;
  181.         el.fadeTimeLeft = fadeOutTime - el.fadeTimeLeft;
  182.         
  183.     } else {
  184.         
  185.         el.FadeState = el.FadeState == 2 ? -1 : 1;
  186.         el.fadeTimeLeft = fadeOutTime;
  187.         setTimeout("animateFade(" + new Date().getTime() + ",'" + id + "','" + fadeOutTime + "')", 33);
  188.     
  189.     }  
  190.   
  191. }
  192.  
  193. function animateFade(lastTick, id, fadeOutTime) {
  194.       
  195.     var currentTick = new Date().getTime();
  196.     var totalTicks = currentTick - lastTick;
  197.     
  198.     var el = document.getElementById(id);
  199.     
  200.     if(el.fadeTimeLeft <= totalTicks) {
  201.     
  202.         el.style.opacity = el.FadeState == 1 ? '1' : '0';
  203.         el.style.filter = 'alpha(opacity = ' + (el.FadeState == 1 ? '100' : '0') + ')';
  204.         el.FadeState = el.FadeState == 1 ? 2 : -2;
  205.         document.body.removeChild(el);
  206.         return;
  207.     
  208.     }
  209.     
  210.     el.fadeTimeLeft -= totalTicks;
  211.     var newOpVal = el.fadeTimeLeft / fadeOutTime;
  212.     
  213.     if(el.FadeState == 1) {
  214.         newOpVal = 1 - newOpVal;
  215.     }
  216.     
  217.     el.style.opacity = newOpVal;
  218.     el.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
  219.     
  220.     setTimeout("animateFade(" + currentTick + ",'" + id + "','" + fadeOutTime + "')", 33);
  221.   
  222. }

no se como implementar el codigo para que finalmente se ejecuten los jvascripts... ahora lo estoy hahciendo por iframe, pero me gustaria saber como hay que hacer para un futuro....

he puesto onclick="cargarRecursos('unafuncion.js'); porque he creado un .js con mis funciones dentro en un boceto rapido... para probarlo.

Y el javascript que se ejecuta es un alert sencillo, aunque despues si me gustaria hacer algo con jquery como un scroll...


Como estoy bastante perdido y no me aclaro, lo dicho, lo he montado por iframe, porque tenia prisa Y si funciona todo... pero el saber no ocupa lugar, si me puedes iluminar, te lo agradeceria, un saludo!
__________________
Ser libre no es hacer lo ke uno kiere, sino kerer lo ke uno hace....