Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Create a real-time messaging system with AJAX

Miscellaneous

Create a real-time messaging system with AJAX

by djjd47130 Posted Jan 31, 2011 (Edited Jan 31, 2011)

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

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

[color red]SQL Database[/color]

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...

[color red]C# Classes[/color]

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;
        }
    }
}

[color red]ASPX/C# Pages[/color]

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>

[color red]Style Sheets[/color]

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%;
}

[color red]Javascript Files[/color]

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);
}

Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.

Accept Learn more…

Back

Top