INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Miscellaneous

Create a real-time messaging system with AJAX by djjd47130
Posted: 31 Jan 11 (Edited 31 Jan 11)

(Note: Tek-Tips automatically truncates a lot of the end of the code, so I had to shorten it)

First of all, before a week ago, I knew absolutely nothing about Javascript or XML, nor did I even know what AJAX was. I have been cramming my knowledge with new things lately and would like to share my latest project here.

This project is still unfinished, but is functional as far as displaying messages in real-time. The code may be a little sloppy, and there's no guarantee ALL required code is here, but I've done my best to copy the core functionality behind real-time messaging here.

This system uses a SQL 2008 Database, and requires one new table (table create code below). I built it in Microsoft Visual Studio 2010 Professional in ASP.NET with C#, and am widely using Javascript. The XML part is still a little flaky for me, but I'm starting to learn it a little better.

One div on the master page must be designated to be the message list. All the messages will appear inside this div. At the end of the site master page, there must be two divs, both with style="display: none;" by default. The larger one is faded and blocking the main page. These two divs are used when displaying an individual message across the page.

When the page loads, it calls a few functions from the window.onload event to initialize everything. A timer starts ticking every second, and every time it reaches its designated refresh rate, it requests new messages from the server. When the server receives the request, it checks the user's new messages and builds an xml packet of all the new messages then sends it back to the client. The client receives the xml packet and translates it to a set of arrays, each array representing a possible property of an individual message. This array becomes like a dataset. On the other hand, when the user clicks the [X] in the message, it sends a request to the server to mark that message as read (or received) and it will not show again. When the user clicks the message, it slides open the message detail div (at bottom of master page).

Again, this project is still in development, and can use a lot of work. However, this is fully-functional on my current website: http://sports.jdsoftwareinc.com

NOTE: Not tested in Internet Explorer, I know there are some connectivity issues in IE


SQL Database


First, create this DB table:

CODE

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[User_Messages](
    [ID] [int] IDENTITY(1,1) NOT NULL,
    [FromUserName] [varchar](255) NULL,
    [ToUserName] [varchar](255) NULL,
    [Caption] [varchar](255) NULL,
    [Details] [varchar](max) NULL,
    [Received] [tinyint] NULL,
    [Deleted] [tinyint] NULL,
    [SentDT] [datetime] NULL,
 CONSTRAINT [PK_User_Messages] PRIMARY KEY CLUSTERED
(
    [ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO



Now add these new files...

C# Classes

File: DBConnection.cs
(Handles all database connection handling)
(Make sure you use OpenConnection() and CloseConnection() at very beginning and end of usage, and call them only once)

CODE

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using Microsoft.Win32;

namespace DJJD.Database
{
    public class DBConnection
    {
        private string errorMessage = "";
        public string ConnectionString = "MY DB CONNECTION STRING";
        SqlConnection Connection = new SqlConnection();
        SqlCommand Command = new SqlCommand();
        SqlDataAdapter Adapter = new SqlDataAdapter();        
        public string ErrorMessage
        {
            get { return this.errorMessage; }
        }
        public bool OpenConnection()
        {
            bool Result = true;
            errorMessage = "";
            if (Connection.State == 0)
            {
                Connection.ConnectionString = this.ConnectionString;
                try
                {
                    Connection.Open();
                    Command.Connection = Connection;
                }
                catch (Exception ex)
                {
                    Result = false;
                    errorMessage = ex.Message;
                    throw new Exception(ex.Message);
                }
            }
            else
            {
                CloseConnection();
                OpenConnection();
            }
            return Result;
        }
        public DataSet GetData(string SQLText)
        {
            this.errorMessage = "";
            DataSet Data = new DataSet();
            try
            {
                Data.Tables.Clear();
                Command.CommandText = SQLText;
                Adapter.SelectCommand = Command;
                Adapter.Fill(Data);
            }
            catch (Exception exp)
            {
                this.errorMessage = exp.Message.ToString();
                Data.Tables.Clear();
            }
            return Data;
        }
        public bool ModifyData(string SQLText)
        {
            this.errorMessage = "";
            bool R = true;
            try
            {
                Command.CommandText = SQLText;
                Command.ExecuteNonQuery();
            }
            catch (Exception ex)
            {
                R = false;               
                this.errorMessage = ex.Message;
            }
            return R;
        }
        public bool CloseConnection()
        {
            bool R = true;
            try
            {
                Connection.Close();
            }
            catch (Exception ex)
            {
                R = false;
                errorMessage = ex.Message;
            }
            return R;
        }
    }
}



File: Messages.cs
(Handles all messaging functionality)

CODE

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using DJJD.Database;
using System.IO;
using System.Xml;
using System.Data;

namespace DJJD.Messages
{
    public class JDMessages
    {
        private DBConnection db = null;
        private string ViewerName = "";
        private bool ViewerIsMember = false;
        public JDMessages(DBConnection Connection, string ViewerName, bool ViewerIsMember)
        {
            db = Connection;
            this.ViewerName = ViewerName;
            this.ViewerIsMember = ViewerIsMember;
        }
        public bool SaveNewMessage(string Sender, string SendTo, string DT, string Caption, string Details)
        {
            bool R = false;
            string S = "insert into user_messages (FromUserName, ToUserName, Caption, Details, Received, Deleted, SentDT) values (";
            S += "'" + Sender + "', ";
            S += "'" + SendTo + "', ";
            S += "'" + Caption + "', ";
            S += "'" + Details + "', ";
            S += "0, ";
            S += "0, ";
            S += "'" + DateTime.Now.ToString() + "')";
            R = db.ModifyData(S);
            return R;
        }
        public bool MarkMessageAsRead(int MessageID)
        {
            bool R = false;
            string S = "update user_messages set received = 1 where id = " + MessageID.ToString();
            R = db.ModifyData(S);
            return R;
        }
        public XmlTextWriter GetNewMessages(XmlTextWriter XmlWriter)
        {
            if (ViewerIsMember)
            {
                XmlWriter.WriteStartDocument();
                XmlWriter.WriteStartElement("Messages");
                try
                {
                    DataSet ds = db.GetData("select * from user_messages where ToUserName = '" + ViewerName +
                        "' and deleted <> 1 and received <> 1 order by SentDT desc");
                    if (ds.Tables.Count > 0)
                    {
                        if (ds.Tables[0].Rows.Count > 0)
                        {
                            int X = 0;
                            while (X < ds.Tables[0].Rows.Count)
                            {
                                XmlWriter.WriteStartElement("Message");
                                XmlWriter.WriteElementString("ID", ds.Tables[0].Rows[X]["ID"].ToString());
                                XmlWriter.WriteElementString("FromUserName", ds.Tables[0].Rows[X]["FromUserName"].ToString());
                                XmlWriter.WriteElementString("SentDT", ds.Tables[0].Rows[X]["SentDT"].ToString());
                                XmlWriter.WriteElementString("Caption", ds.Tables[0].Rows[X]["Caption"].ToString());
                                XmlWriter.WriteElementString("Details", ds.Tables[0].Rows[X]["Details"].ToString());
                                XmlWriter.WriteEndElement();
                                X = X + 1;
                            }
                        }
                    }
                }
                catch (Exception ex)
                {

                }
                XmlWriter.WriteEndElement();
                XmlWriter.WriteEndDocument();
                XmlWriter.Flush();
            }
            return XmlWriter;
        }
    }
}



ASPX/C# Pages


ASPX File: Command.aspx
(Used for receiving requests from client - No usable data is in the page its self, but rather in the page's C# code)

C# File: Command.aspx.cs
(Back End Code for Command.aspx - Used for receiving requests from client)

CODE

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using DJJD.Database;
using System.IO;
using System.Xml;
using DJJD.Messages;

namespace DJJD
{
    public partial class CommandPage : System.Web.UI.Page
    {
        string Qry = "";
        string Cmd = "";
        string R = "";
        string ViewerName = "";
        bool ViewerIsMember = false;
        public DBConnection db = new DBConnection();
        public SportQuery QRequested = new SportQuery();
        public SportQuery QCurrent = new SportQuery();
        protected void Page_Load(object sender, EventArgs e)
        {
            db.OpenConnection();
            Response.Expires = -1;
            Qry = Request.QueryString.ToString();
            QRequested.QueryString = Qry;
            QCurrent.QueryString = QRequested.Current(db, 1).QueryString;
            try
            {
                ViewerIsMember = Page.User.Identity.IsAuthenticated;
                if (ViewerIsMember) { ViewerName = Page.User.Identity.Name; }
                else { ViewerName = HttpContext.Current.Request.ServerVariables["REMOTE_ADDR"]; }
                JDMessages M = new JDMessages(db, ViewerName, ViewerIsMember);
                int P = ("&" + Qry).ToUpper().IndexOf("&CMD=");
                if (P >= 0)
                {
                    Cmd = Request.QueryString["CMD"].ToString();
                    if (Cmd == "")
                    {
                        throw new Exception("Command was received, but was empty");
                    }
                    else if (Cmd == "MESSAGECHECK")
                    {
                        if (ViewerIsMember)
                        {
                            using (MemoryStream S = new MemoryStream())
                            {
                                XmlTextWriter XmlDoc = M.GetNewMessages(new XmlTextWriter(S, System.Text.Encoding.ASCII));
                                byte[] MessageData = S.ToArray();
                                Response.Clear();
                                Response.AppendHeader("Content-Disposition", "filename=NewUserMessages.xml");
                                Response.AppendHeader("Content-Length", MessageData.Length.ToString());
                                Response.ContentType = "text/xml";
                                Response.BinaryWrite(MessageData);
                                XmlDoc.Close();
                            }
                        }
                    }
                    else if (Cmd == "MESSAGEREAD")
                    {
                        if (ViewerIsMember)
                        {
                            if (Request.QueryString.ToString().ToUpper().IndexOf("MID") >= 0)
                            {
                                string mid = Request.QueryString["MID"].ToString();
                                if (mid.Length > 0) { M.MarkMessageAsRead(Convert.ToInt32(mid)); }
                            }
                        }
                    }
                    else
                    {
                        throw new Exception("Invalid command requested '" + Cmd + "'");
                    }
                }
                else
                {
                    throw new Exception("Requested command not found.");
                }
            }
            catch (Exception ex) { }
            db.CloseConnection();
        }
    }
}



Your Page
(Place components as needed like shown below)
(Required: page style sheet, Animation.js, Messages.js, window.onload function, divMessages, divMessageDetailBack, divMessageDetailBox)
(Note: Animation.js - Requires that all elements to be slidden have style="display: block (or) none; overflow: hidden; height: #px")

CODE

<head runat="server">
    <script type="text/javascript" language="JavaScript" src="/Scripts/Animation.js"></script>
    <script type="text/javascript" language="JavaScript" src="/Scripts/Messages.js"></script>
    <script type="text/javascript" language="JavaScript">
        window.onload = function () {
            Messages_Initialize();
            Messages_StartTimer();
            Messages_CheckForMessages();
        }
    </script>
</head>
<body>
    <form runat="server">
        <div id="divMyMainDiv">
            <div runat="server" id="divMasterLeftContent">
                <h3>Messages</h3>
                <div id="divMessages" style="position: relative; float: left; padding: 3px; height: 400px; overflow: auto; width: 100%;">
                    You have no new messages.
                </div>
            </div>
        </div>
        <div class="MessageDetailBack" id="divMessageDetailBack" style="">
            <br />
        </div>
        <div class="MessageDetailBox" id="divMessageDetailBox"
            style="padding: 5px; height: 300px; ">
            <a href="javascript:;" onclick="Messages_CloseMessageDetail()">
                <div class="MessageListItemClose" style="margin: 5px; top: 0px;"> X </div>
            </a>
            <span id="spanMessageHeader" style="position: relative; float: left; font-weight: bold; font-size: 16px; width: 80%; color: #A4D1FF;">Message Caption</span>
            <span id="spanMessageDetail" style="position: relative; float: left; font-size: 14px; width: 80%; color: White;">Message Detail</span>
        </div>
    </form>
</body>



Style Sheets


Add the following code to your main css style sheet:

CODE

/*----------------------------- MESSAGE LIST --------------------------*/
.MessageListItem
{
    display: block;
    height: 40px;
    overflow: hidden;
    position: relative;
    float: left;
    width: 100%;
    border: 1px solid #C0C0C0;
    color: #000080;
    background-color: #D9ECFF;
    font-size: 12px;
}
.MessageListItem a
{
    color: #000080;
    background-color: #D9ECFF;    
}
.MessageListItem a:hover
{
    color: #0000F4;
    background-color: #AAD5FF;    
}
.MessageListItem:hover
{
    background-color: #AAD5FF;
    color: #0000F4;
}
.MessageListItemClose
{
    position: relative;
    float: right;
    font-size: 12px;
    width: 18px;
    height: 16px;
    background-color: navy;
    text-align: center;
    display: block;
    overflow: hidden;
    color: #FFFFFF;
    background-color: #800000;
    font-weight: bold;
    top: 0px;
}
.MessageListItemClose:hover
{
    background-color: #FF0000;
    color: #C0C0C0;
}
.MessageDetailBack
{
    filter:alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
    background-color: Black;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: black;
    color: Black;
    display: none;    
}
.MessageDetailBox
{
    filter:alpha(opacity=100);
    -moz-opacity: 100;
    opacity: 100;
    display: none;
    background-color: Black;
    position: absolute;
    width: 50%;     
    left: 25%;
    top: 25%;
}



Javascript Files


Animation.js
(Handles all element animation)

CODE

var timerlen = 5;
var slideAniLen = 250;
var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();
function slidedown(objname) {
    if (moving[objname] == true) return;
    if (document.getElementById(objname) == null) return;
    moving[objname] = true;
    dir[objname] = "down";
    startslide(objname);
}
function slideup(objname) {
    if (moving[objname] == true) return;
    if (document.getElementById(objname) == null) return;
    moving[objname] = true;
    dir[objname] = "up";
    startslide(objname);
}

function startslide(objname) {
    obj[objname] = document.getElementById(objname);
    endHeight[objname] = parseInt(obj[objname].style.height);
    startTime[objname] = (new Date()).getTime();
    if (dir[objname] == "down") {
        obj[objname].style.height = "1px";
    }
    obj[objname].style.display = "block";
    timerID[objname] = setInterval('slidetick(\'' + objname + '\');', timerlen);
}
function slidetick(objname) {
    var elapsed = (new Date()).getTime() - startTime[objname];
    if (elapsed > slideAniLen)
        endSlide(objname)
    else {
        var d = Math.round(elapsed / slideAniLen * endHeight[objname]);
        if (dir[objname] == "up")
            d = endHeight[objname] - d;
        obj[objname].style.height = d + "px";
    }
    return;
}
function endSlide(objname) {
    clearInterval(timerID[objname]);
    if (dir[objname] == "up")
        obj[objname].style.display = "none";
    obj[objname].style.height = endHeight[objname] + "px";
    delete (moving[objname]);
    delete (timerID[objname]);
    delete (startTime[objname]);
    delete (endHeight[objname]);
    delete (obj[objname]);
    delete (dir[objname]);
    return;
}



Messages.js
(Handles all client-side messaging)
(Requires: Animation.js)

CODE

//Settings
var Messages_MessageCheckDelay = 15;
var Messages_NoMessageText = "You have no new messages.";
var Messages_DoCheckForMessages = true;
var Messages_DivID = "divMessages";
//Defaults
var Messages_MessageCheckSeconds = 0;
var Messages_LastMessageID = 0;
var Messages_MessageRemoveCount = 0;
var Messages_MessagesRemoved = new Array();
var Messages_mIndex = new Array();
var Messages_mDBID = new Array();
var Messages_mCaption = new Array();
var Messages_mDetail = new Array();
var Messages_mSender = new Array();
var Messages_mHref = new Array();
var Messages_mOnClick = new Array();
var Messages_Requested = false;
var Messages_Received = false;
var Messages_Waited = 0;
var Messages_HasException = false;
var Messages_Http;
var Messages_TimerActive = 0;
function Messages_ThrowException(ErrorMessage) {
    if (Messages_HasException == false) {
        HasException = true;
        Messages_PostMessage("Sorry, a request from the server timed out. Please try again later.", "", "");
    }
}
function Messages_Initialize() {
    if (window.XMLHttpRequest) // code for IE7+, Firefox, Chrome, Opera, Safari
    {
        Messages_Http = new XMLHttpRequest();
    }
    else // code for IE6, IE5
    {
        Messages_Http = new ActiveXObject("Microsoft.XMLHTTP");
    }
    Messages_StartTimer();
}
function Messages_StartTimer() {
    Messages_TimerActive = 1;
    Messages_TimerTick();
}
function Messages_StopTimer() {
    Messages_TimerActive = 0;
}
function Messages_TimerTick() {
    if (Messages_TimerActive == 1) {
        if (Messages_DoCheckForMessages) {
            if (Messages_MessageCheckSeconds >= Messages_MessageCheckDelay) {
                Messages_MessageCheckSeconds = 0;
                Messages_CheckForMessages();
            } else {
                Messages_MessageCheckSeconds = Messages_MessageCheckSeconds + 1;
            }
        }
        //Wait For Messages
        if (Messages_Requested == true) {
            if ((Messages_Waited > 10) && (Messages_Received == false)) {
                Messages_Requested = false;
                Messages_Waited = 0;
                //Messages_PostMessage("Failed to check for new messages.", "", "");
            } else {
                Messages_Waited = Messages_Waited + 1;
            }
        }
        setTimeout("Messages_TimerTick()", 1000);
    }
}
function Messages_CheckForMessages() {
    Messages_Waited = 0;
    Messages_Received = false;
    Messages_Requested = true;
    Messages_Http.onreadystatechange = Messages_ReceiveMessages;
    Messages_Http.open("GET", "/Command.aspx?CMD=MESSAGECHECK", true);
    Messages_Http.send();
}
function Messages_ReceiveMessages() {
    if (Messages_Http.readyState == 4 && Messages_Http.status == 200) {
        Messages_Received = true;
        Messages_Waited = 0;
        var xmlDoc = Messages_Http.responseXML;
        var x;
        var mIndex = 0;
        var NewMessageCount = 0;
        var NewIndexTmp = 0;
        var NewIndex = new Array();
        var NewDBID = new Array();
        var NewCaption = new Array();
        var NewSender = new Array();
        var NewSentDT = new Array();
        var NewDetails = new Array();
        var NewMessageExists = new Array();
        if (xmlDoc != null) {
            x = xmlDoc.getElementsByTagName("ID");
            NewMessageCount = x.length;
            if (NewMessageCount > 0) {
                NewIndexTmp = Messages_LastMessageID;
                for (i = 0; i < NewMessageCount; i++) {
                    NewDBID[i] = x[i].childNodes[0].nodeValue;
                    NewMessageExists[i] = false;
                    NewIndex[i] = NewIndexTmp;
                    NewIndexTmp = NewIndexTmp + 1;
                    for (j = 0; j < Messages_LastMessageID; j++) {
                        if (Messages_mDBID[j] == NewDBID[i]) {
                            NewMessageExists[i] = true;
                        }
                    }
                }
                x = xmlDoc.getElementsByTagName("Caption");
                for (i = 0; i < NewMessageCount; i++) {
                    NewCaption[i] = x[i].childNodes[0].nodeValue;
                }
                x = xmlDoc.getElementsByTagName("FromUserName");
                for (i = 0; i < NewMessageCount; i++) {
                    NewSender[i] = x[i].childNodes[0].nodeValue;
                }
                x = xmlDoc.getElementsByTagName("Details");
                for (i = 0; i < NewMessageCount; i++) {
                    NewDetails[i] = x[i].childNodes[0].nodeValue;
                }
                for (i = 0; i < NewMessageCount; i++) {
                    if (NewMessageExists[i] == false) {
                        Messages_PostNewMessage(NewDBID[i], NewCaption[i], "javascript:;", "Messages_OpenMessage('" + NewIndex[i] + "')", NewSender[i], NewDetails[i]);
                    }
                }
            }
        }
    }
}
function Messages_PostNewMessage(DBID, Caption, Href, OnClick, Sender, Details) {
    var tid = Messages_LastMessageID;
    Messages_LastMessageID = Messages_LastMessageID + 1;
    Messages_MessagesRemoved[tid] = false;
    Messages_mIndex[tid] = tid;
    Messages_mDBID[tid] = DBID;
    Messages_mCaption[tid] = Caption;
    Messages_mDetail[tid] = Details;
    Messages_mHref[tid] = Href;
    Messages_mOnClick[tid] = OnClick;
    Messages_mSender[tid] = Sender;
    if (Messages_MessageRemoveCount == tid) {
        Messages_ClearMessageList();
    }
    Messages_DisplayMessage(tid);
}
function Messages_RemoveMessage(Index) {
    Messages_MessagesRemoved[Index] = true;
    Messages_MessageRemoveCount = Messages_MessageRemoveCount + 1;
    slideup("divMessage" + Index);
    slideup("divMessageSpacer" + Index);
    Messages_MarkAsRead(Messages_mDBID[Index]);
    if (Messages_MessageRemoveCount == Messages_LastMessageID) {
        setTimeout("document.getElementById(\"" + Messages_DivID + "\").innerHTML = \"" + Messages_NoMessageText + "\";", slideAniLen);
    }
}
function Messages_MarkAsRead(MessageID) {
    var Messages_Http_MarkAsRead;
    if (window.XMLHttpRequest) // code for IE7+, Firefox, Chrome, Opera, Safari
    {
        Messages_Http_MarkAsRead = new XMLHttpRequest();
    }
    else // code for IE6, IE5
    {
        Messages_Http_MarkAsRead = new ActiveXObject("Microsoft.XMLHTTP");
    }
    Messages_Http_MarkAsRead.open("GET", "/Command.aspx?CMD=MESSAGEREAD&MID=" + MessageID, true);
    Messages_Http_MarkAsRead.send();
}
function Messages_RefreshMessageList() {
    var MessagesToDisplay = new Array();
    var mCount = 0;
    for (x = 0; x < Messages_LastMessageID; x++) {
        if (Messages_MessagesRemoved[X] != true) {
            MessagesToDisplay[mCount] = x;
            mCount = mCount + 1;
        }
    }
    Messages_ClearMessageList();
    for (x = 0; x < mCount; x++) {
        Messages_DisplayMessage(MessagesToDisplay[x]);
    }
}
function Messages_ClearMessageList() {
    document.getElementById(Messages_DivID).innerHTML = "";
}
function Messages_DisplayMessage(Index, Href, OnClick) {
    var R = "";
    var DoSlideOpen = true;
    var mDisplay = "block";
    if (DoSlideOpen) mDisplay = "none";
    var mDBID = Messages_mDBID[Index];
    var mCaption = Messages_mCaption[Index];
    var mSender = Messages_mSender[Index];
    var DivName = "divMessage" + Index;
    var MaxCaptionLength = 65;
    if ((mCaption.length + mSender.length + 2) > MaxCaptionLength) {
        mCaption = mCaption.substring(0, MaxCaptionLength - mSender.length) + "...";
    }
    R += "<div id=\"" + DivName + "\" class=\"MessageListItem\" >";
    R += "  <div style=\"position: relative; float: left; padding: 5px; width: 95%; \">";
    R += "    <a href=\"javascript:;\" onclick=\"Messages_OpenMessage('" + Index + "')\">";
    R += "      <div style=\"position: relative; float: left; width: 88%; height: 100%;\" >";
    R += "<b>" + mSender + "</b>: " + mCaption;
    R += "      </div>";
    R += "    </a>";
    R += "    <a href=\"javascript:;\" onclick=\"Messages_RemoveMessage('" + Index + "')\" >";
    R += "      <div id=\"divMessageClose" + Index + "\" class=\"MessageListItemClose\" >";
    R += "        X ";
    R += "      </div>";
    R += "    </a>";
    R += "  </div>";
    R += "</div>";
    R += "<div id=\"divMessageSpacer" + Index + "\" style=\"position: relative; float: left; width: 100%; height: 3px; display: block; overflow: hidden; \" >";
    R += "  <p> </p>";
    R += "</div>";
    document.getElementById(Messages_DivID).innerHTML += R;
}
function Messages_OpenMessage(Index) {
    document.getElementById("divMessageDetailBack").style.display = "block";
    document.getElementById("divMessageDetailBox").style.display = "none";
    document.getElementById("spanMessageHeader").innerHTML = Messages_mCaption[Index];
    document.getElementById("spanMessageDetail").innerHTML = Messages_mDetail[Index];
    slidedown("divMessageDetailBox");
}
function Messages_CloseMessageDetail() {
    slideup("divMessageDetailBox");
    //document.getElementById("divMessageDetailBack").style.display = "none";
    //document.getElementById("divMessageDetailBox").style.display = "none";
    setTimeout("document.getElementById(\"divMessageDetailBack\").style.display = \"none\";", 300);
    setTimeout("document.getElementById(\"divMessageDetailBox\").style.display = \"none\";", 300);
}
 

Back to Microsoft: ASP.NET FAQ Index
Back to Microsoft: ASP.NET Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close