Foros del Web - Ver Mensaje Individual

Adler · #30 (**permalink**) 09/06/2009, 04:42

Hola

La verdad es que me ha dado pereza leer todo el tema. Aquí os dejo algo que hice hace algún tiempo. Se trata de mostrar una ventana de aviso al usuario, diciendole si tiene algún mensaje. Claro está que tendrás que modificarla, ya que esta es una ventana emergente, uso ASP, se consulta la bd cada X tiempo, etc..

Nota: Como se va a recibir javascript via ajax necesitarás
leerjsdeajax.js

Código javascript:

Ver originalvar tagScript = '(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)';
/**
* Eval script fragment
* @return String
*/
String.prototype.evalScript = function()
{
        return (this.match(new RegExp(tagScript, 'img')) || []).evalScript();
};
/**
* strip script fragment
* @return String
*/
String.prototype.stripScript = function()
{
        return this.replace(new RegExp(tagScript, 'img'), '');
};
/**
* extract script fragment
* @return String
*/
String.prototype.extractScript = function()
{
        var matchAll = new RegExp(tagScript, 'img');
        return (this.match(matchAll) || []);
};
/**
* Eval scripts
* @return String
*/
Array.prototype.evalScript = function(extracted)
{
                var s=this.map(function(sr){
                var sc=(sr.match(new RegExp(tagScript, 'im')) || ['', ''])[1];
                if(window.execScript){
                window.execScript(sc);
                }
                else
                {
                 window.setTimeout(sc,0);
                }
                });
                return true;
};
/**
* Map array elements
* @param {Function} fun
* @return Function
*/
Array.prototype.map = function(fun)
{
        if(typeof fun!=="function"){return false;}
        var i = 0, l = this.length;
        for(i=0;i<l;i++)
        {
                fun(this[i]);
        }
        return true;
};

Código javascript:

Ver original<script type="text/javascript" src="./leerjsdeajax.js"></script>
<script type="text/javascript">
 function creaAjax(){
    var ajaxs = ["Msxml2.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLH TTP.5.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];
    var ajax = false;
    for(var i=0 ; !ajax && i<ajaxs.length ; i++){
        try{ 
            ajax = new ActiveXObject(ajaxs[i]);   // Internet Explorer
        }
        catch(e) { 
            ajax = false; 
        }
    }
    if(!ajax && typeof XMLHttpRequest!='undefined') {
        ajax = new XMLHttpRequest();  // Firefox, Opera 8.0+, Safari
    }
    return ajax;
}
 
 
 
 
 
function Ventana() {
var ajax=creaAjax();
 
var objetosel = document.getElementById("contenedor");
ajax.open('GET','ventanamessenger_ajax.asp',true);
ajax.send(null);
ajax.onreadystatechange = function() {
 
        if (ajax==null){
        alert ("Tu navegador web no soporta AJAX!");
        return;
    }
 
        if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3) {
                                        objetosel.innerHTML = "Cargando ...";
            }
 
                else if (ajax.readyState==4){
                    if(ajax.status==200){   
 
        var scs=ajax.responseText.extractScript();
            objetosel.innerHTML = ajax.responseText.stripScript();
        scs.evalScript(); 
 
 
                   }
                    else if (ajax.status==404)
                                             {
 
                                    objetosel.innerHTML = "La dirección no existe";
                                             }
                                     else
                                             {
                                    objetosel.innerHTML = "Se ha producido un error.<br />Lo mas probable es que no hayas seleccionad una Fecha";
                                             }
                                    }
                  }
        
}
 
 
 
window.setInterval("Ventana()",90000); // 10 minutos 600000
window.onload=setTimeout("Ventana()",1000); // 1 segundos
//window.onload = Ventana;
</script>
</head>
<body>
<table border="1" width="800px">
<tr height="500px">
<td>hola
</td>
</tr>
</table>
 
<style type="text/css"><!--
#VentanaTipoMsgr { z-index:15000; right:2px; bottom:-2px; position:fixed; padding:0px; width:207px; height:123px; background:transparent url(cuerpo_ventanamodal.gif); }
#VentanaTipoMsgr a { font-family:tahoma; font-size:9px; color:#59616E; font-weight:bold; text-decoration:none; }
#btn_vm_paginador a{ background-color:#FFFFFF; color:#59616E; font-family:Arial, Helvetica, sans-serif; font-size:9px; font-weight:900;text-decoration:none;padding:2px; border: 1px solid #C9C9C9;border-width: 1px 1px 1px 1px; }
-->
</style>
<div id="contenedor"></div>
 
<div id="VentanaTipoMsgr" style="bottom:-200px; display:none;">
<div style="position:absolute; top:3px; right:5px;cursor: pointer;"><img id="btn_vm_cerrar" src="cuerpo_cerrar.gif" width="15px" height="20px" border="0" /></div>
<div id="CabezaMsg" style="padding:6px 6px 6px 3px; text-align:left; font-family:tahoma; font-size:11px; font-weight:bold; color:#000000;"></div>
<div id="CuerpoMsg" style="position:absolute; top:30px; right:5px; left:5px; text-align:left; color: #59616E; font-size: 9px; font-family:verdana;"></div>
<div style="clear:both;"></div>
</div>
 
</body>

ventanamessenger_ajax.asp

Código asp:

Ver originalSQL ="SELECT campos FROM tabla " 
set rs = oConn.Execute(SQL)
 
registros = rs.getrows()
rs.Close
Set rs = Nothing
oConn.Close
Set oConn = Nothing
 
TextoMensaje = ""
IF UBound(registros,2) = 0 then
TextoMensaje =  "'De: <a href=autor target=_blank>" & registros(De,0) & "</a><br />Asunto: <a href=mensaje target=_blank>" & registros(Asunto,0) & "</a><br/>Mensaje: " & Mid(registros(Contenido,0),1,80) &"'"
 
ELSE
 
For i = 0 to UBound(registros,2)
If i <> 0 then
TextoMensaje = TextoMensaje & ","
End If
 
If i = 0 then ' es el primero de varios
TextoMensaje = TextoMensaje & "'De: <a href=\'autor\' target=\'_blank\'>" & registros(De,i) & "</a><br />Asunto: <a href=\'mensaje\' target=\'_blank\'>" & registros(Asunto,i) & "</a><br/>Mensaje: " & Mid(registros(Contenido,i),1,80) &"<br /><br /><div id=\'btn_vm_paginador\' align=\'center\'><a href=\'javascript:void(0);\' onclick=\'vm_paginador("&i+1&");\'>Siguiente &raquo;</a></div>'"
Elseif i < UBound(registros,2) then
'TextoMensaje = TextoMensaje & "'De: <a href=\'autor\' target=_blank\'>" & registros(De,i) & "</a><br />Asunto: <a href=\'mensaje\' target=\'_blank\'>" & registros(Asunto,i) & "</a><br/>Mensaje: " & Mid(registros(Contenido,i),1,80) &"<br /><br /><div id=\'btn_vm_paginador\' align=\'center\' onclick=\'vm_paginador("&i-1&");\'>&laquo; Anterior</div>&nbsp;&nbsp;&nbsp;<div id=\'btn_vm_paginador\' align=\'center\'  onclick=\'vm_paginador("&i+1&");\'>Siguiente &raquo;</div>'"
TextoMensaje = TextoMensaje & "'De: <a href=\'autor\' target=_blank\'>" & registros(De,i) & "</a><br />Asunto: <a href=\'mensaje\' target=\'_blank\'>" & registros(Asunto,i) & "</a><br/>Mensaje: " & Mid(registros(Contenido,i),1,80) &"<br /><br /><div id=\'btn_vm_paginador\' align=\'center\'><a href=\'javascript:void(0);\' onclick=\'vm_paginador("&i-1&");\'>&laquo; Anterior</a>&nbsp;&nbsp;&nbsp;<a href=\'javascript:void(0);\' onclick=\'vm_paginador("&i+1&");\'>Siguiente &raquo;</a></div>'"
Else ' es el último
TextoMensaje = TextoMensaje & "'De: <a href=\'autor\' target=\'_blank\'>" & registros(De,i) & "</a><br />Asunto: <a href=\'mensaje\' target=\'_blank\'>" & registros(Asunto,i) & "</a><br/>Mensaje: " & Mid(registros(Contenido,i),1,80) &"<br /><br /><div id=\'btn_vm_paginador\' align=\'center\'><a href=\'javascript:void(0);\' onclick=\'vm_paginador("&i-1&");\'>&laquo; Anterior</a></div>'"
End If
 
Next 'i
END IF
%>
 
 
<script type="text/javascript">
var msg = new Array(<%=TextoMensaje%>); // En este arreglo está todo los que nos trae la consulta
var Ventana_Modal = {};
Ventana_Modal.banner = {
 posicion : {
 bajar_pos : '-127',
 subir_pos : '-4'
 }
};
Ventana_Modal.banner.hoja = 'posicion';
// Variables Globales
var vmDivID = 'VentanaTipoMsgr';
var Retraso = 5 * msg.length;
 
 
vm_retraso(Retraso);
 
//--[Funciones]-----------------------------------------------------------------//
 
var btn_vm_cerrar_elem = document.getElementById('btn_vm_cerrar');
btn_vm_cerrar_elem.onclick = function (){
vm_mover(vmDivID,Ventana_Modal.banner[Ventana_Modal.banner.hoja].bajar_pos, "' + msg[0] + '",'bajar');
return false;
}
 
//var btn_vm_paginador_msg = document.getElementById('btn_vm_paginador');
//btn_vm_paginador_msg.onclick = function (){
//vm_paginador(elID);
//return false;
//}
 
function vm_paginador(mensajeID) {
 var soportado = (document.getElementById);
if (!soportado) return;
var elMsg = document.getElementById('CuerpoMsg');
elMsg.innerHTML = msg[mensajeID];
}
 
 
function vm_retraso(seg){
seg = seg || 0;
setTimeout('vm_mover(vmDivID,' + Ventana_Modal.banner[Ventana_Modal.banner.hoja].subir_pos + ', "' + msg[0] + '");',1000 * seg);
setTimeout('vm_mover(vmDivID,' + Ventana_Modal.banner[Ventana_Modal.banner.hoja].bajar_pos + ', "' + msg[0] + '",\'bajar\');',15000 * msg.length);
}
 
var elemento
var alto
var leyenda
function vm_mover(elemID,x,txt,direccion){
elemento = elemID
alto = x
leyenda =  txt
 
 var soportado = (document.getElementById);
if (!soportado) return;
var DIVruta = document.getElementById(elemento);
var Cortina = parseInt(DIVruta.style.bottom);
var cabecera = document.getElementById('CabezaMsg');
var texto = document.getElementById('CuerpoMsg');
 
DIVruta.style.display = 'block';
if(direccion == 'bajar'){
 
if(Cortina > x){
Cortina -= 5;
DIVruta.style.bottom = Cortina + 'px';
setTimeout('vm_mover(elemento,alto,leyenda,\'bajar\');',15);
}
}else{
if(Cortina < x){
Cortina += 5;
DIVruta.style.bottom = Cortina + 'px';
cabecera.innerHTML = "Tienes (<span style='color:#FF0000;'><%=UBound(registros,2)+1%></span>) mensajes sin leer";
texto.innerHTML = leyenda;
setTimeout('vm_mover(elemento, alto,leyenda);',15);
}
 }
}
</script>

Suerte