Tutorial :Stack overflow error when using JQuery/ASP.NET for simple ajax chat



Question:

I am trying to create a simple ajax chat using JQuery and ASP.NET. My code works like this:

  1. When the page loads it refreshes the 'chatbox' div with a request to the messages.aspx page, which handles getting new messages from the database and kicks off an auto refresh with the setTimeout().
  2. Whenever the user clicks the send button, it adds the message to the database inside the messages.aspx page_load code.

I am getting a stack overflow error right from the start when the timeout starts, and I am not sure what would cause this? Could it be caching? Maybe the code in messages.aspx can't complete running within those 5 seconds? Any help would be appreciated!

Also, I didn't worry about sql injection attacks yet b/c I was just trying to get it working with simple code.

Here's my code:

Client-side:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">        <html xmlns="http://www.w3.org/1999/xhtml" >      <head runat="server">          <title>Untitled Page</title>          <script src="jquery.js" type="text/javascript"></script>          <script type="text/javascript">              $(document).ready(function() {                  refreshChat();                  $("#btnSend").click(function() {                      addMessage();                                 });                  return false;              });                function refreshChat()              {                  $.get("messages.aspx", function(data) {                        $("#chatbox").empty();                      $("#chatbox").prepend(data);                  });                  setTimeout(refreshChat(), 5000);              }                function addMessage()              {                  $.get("messages.aspx", {usr: $("#usr").val(), msg: $("#msg").val()} );              }          </script>      </head>      <body>          <form id="form1" runat="server">                <div id="input">                  username: <input type="text" name="usr" id="usr" /><br />                  message:<br />                  <textarea id="msg" name="msg" rows="5" cols="30"></textarea><br /><br />                  <input type="button" id="btnSend" name="btnSend" value="Send" />              </div>                <div id="chatbox"></div>            </form>      </body>      </html>  

Server Side:

using System;  using System.Data.SqlClient;  using System.Configuration;  using System.Collections;  using System.IO;  using System.Web;  using System.Web.Security;  using System.Web.UI;  using System.Web.UI.WebControls;  using System.Web.UI.WebControls.WebParts;  using System.Web.UI.HtmlControls;    public partial class messages : System.Web.UI.Page  {      protected void Page_Load(object sender, EventArgs e)      {               SqlConnection conn =               new SqlConnection("Data Source=.\\SQLEXPRESS;AttachDbFilename=F:\\Chatter\\App_Data\\messages.mdf;Integrated Security=True;User Instance=True");          conn.Open();            string sql;          SqlCommand comm;            if (Request["usr"] != null)          {              string user = Request["usr"].ToString();              string message = Request["msg"].ToString();              sql = "insert into messages (usr, msg, [date]) values ('"                  + user + "', '" + message + "', '" + DateTime.Now + "')";              comm = new SqlCommand(sql, conn);              comm.ExecuteNonQuery();          }            sql = "select top 5 usr, msg from messages order by [date] desc";          comm = new SqlCommand(sql, conn);          SqlDataReader dr = comm.ExecuteReader();            while (dr.Read())          {              Response.Write(dr["usr"].ToString() + ": <br/>" + dr["msg"] + "<br/><br/>");          }          dr.Close();            conn.Close();      }  }  


Solution:1

Your javascript refreshChat function is recursively calling itself. Change the code to:

        function refreshChat()          {              $.get("messages.aspx", function(data) {                    $("#chatbox").empty();                  $("#chatbox").prepend(data);              });              setTimeout(refreshChat, 5000);          }  


Solution:2

You need to wrap the function call in your setTimeout in quotes, otherwise it's evaluated immediately, causing infinite recursion and a stack overflow:

setTimeout("refreshChat()", 5000);  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »