help

petvampire · 03-01-2009, 07:25 PM

hey there. kinda new to this

only been coding for about 8 months using basic asp and got set a task byt a friend to build a chat client using .asp and ajax and javascripts. im trying to refresh the page using something other than meta refresh. the click is annoying people (if you going to point out to me im going agenst the user knowing the page is updating bla bla bla, please go annoy some one else as ive already read about it). i would like a way to update the page with out the click or a flicker. i call the chat information from a database which stores all the chat messages.

any ideas would be helpful.

thanks

p.s please keep it simple for me as im not very good

Gjslick · 03-01-2009, 08:00 PM

Seems that both a meta refresh and a javascript refresh cause the IE 'click' sound to go off, as well as a flicker as the page is being updated. Perhaps you should write your javascript to make an ajax call every second or two that just queries for the newest messages, and then appends them to the chat window instead of refreshing the entire chat window each time.

One other thing. "if you going to point out to me im going agenst the user knowing the page is updating bla bla bla, please go annoy some one else as ive already read about it" <--- What is this all about. Save it next time.

petvampire · 03-02-2009, 11:11 PM

about that. all i have when trying to find a javascript is people tell me how im going agenest what IE does to tell users that the page is refreshing. the click noise during testing cause alot of my testers to be stressy and did not match the chat envoerment of being calm. its one them every post ive looked at some one had to bring up the click is there for a reason.

i have tired to mix the javascript in with the ajax but all the ones i find are for forms and do not seem to be able to change it to match what im doing. ive tired to use the javascript at the bottom to refresh the page after the ajax.

(sorry for any spelling mistakes im dyslexic ha)

Gjslick · 03-02-2009, 11:39 PM

Lol, its all good. Alrite, well if you want, I can try to help you AJAX that section where you'd normally do the refresh. You're using just regular asp? And what are you refreshing, the whole page or just a frame/iframe?

If you can, post the code for the page that gets refreshed and I can try to help you figure it out.

Greg

petvampire · 03-03-2009, 04:54 PM

that is the code below. what its refreshing is just the bit where it calls the user messages out the database. so it always haves the newest messages as the user has posted them. that page is a frameset that is called from the perent frame.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="refresh" content="1" />

<title>Untitled Document</title>
<style type="text/css">

</style>
<script>
function loadXMLDoc(url)
{
// code for Mozilla, etc.
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest()
xmlhttp.open("GET",url,true)
xmlhttp.send(null)
xmlhttp.onreadystatechange=state_Change
}
// code for IE
else if (window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
if (xmlhttp)
{
xmlhttp.open("GET",url,true)
xmlhttp.send()
xmlhttp.onreadystatechange=state_Change
}
}
}

function state_Change()
{
// if xmlhttp shows "loaded"
if (xmlhttp.readyState==4)
{
// if "OK"
if (xmlhttp.status==200)
{
document.getElementById('refresher').innerHTML=xmlhttp.responseText;
}
}

}

function init() {
window.setTimeout( "loadXMLDoc( \"display.asp" );", 1000 );
// OR
// window.setTimeout( "loadXMLDoc( \"page.php?req=true\" );", 3000 );
}
</script>

</head>
<body>
<p class="style1">
<%
While ((Repeat1__numRows <> 0) AND (NOT msgs.EOF))
%>
<span class="style4"><A HREF="../chatsettings/chattersmenu.asp?<%= Server.HTMLEncode(MM_keepNone) & MM_joinChar(MM_keepNone) & "TBLusername=" & msgs.Fields.Item("TBLusername").Value %>" target="onlineusers"><%=(msgs.Fields.Item("TBLusername").Value)%></A>:</span><span class="style2"><%=(msgs.Fields.Item("TBLmessage").Value)%></span><span class="style3"><%=(msgs.Fields.Item("TBLemote").Value)%></div></span>
<%
Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
msgs.MoveNext()
Wend
%>
</p>
</body>
</html>

</body>
</html>
<%

Gjslick · 03-04-2009, 08:51 PM

Ok, so here are the steps that you need to take:

1) Remove the meta refresh in that file.
2) You need to make a new .asp file that can create an xml document of all of the new messages from a given point (example: getMessages.asp). So, if you have in your database say, a messageID column; have the new file be able to accept a URL parameter of messageID and then run a query that gets all messages that were created after that messageID, like this:

Code:

DIM sql
sql = 'SELECT * FROM messages WHERE messageID > ' + Request.QueryString("messageID")

(forgive me if that's not exactly correct, I haven't actually coded in asp in years.)

Real quick, you'll have to change the content type of this file to it to xml text. I believe its

Code:

Response.contentType = "text/xml"

Put that at the top of the new file.

This new file should basically just have output that looks something along the lines of:

Code:

<messages>
  <message>
    <username>Person 1</username>
    <messageText>Hey man, whats good</messageText>
  </message>

  <message>
    <username>Person 2</username>
    <messageText>Yo whats up</messageText>
  </message>
</messages>

You'll just have to loop out the records from the database into that format.

3) We're going to use an AJAX library to get the data. Honestly, you don't want to even be bothered with the inner workings of XMLHttpRequest and such. If you really wanted to, you could make your own Ajax class, but its really a big waste of time when nice people at yahoo have done that for us, while also figuring out all the stupid cross-browser nuances. The yui library provides a simple interface to ajax calls (and also a nice way of interacting with browser events). I'll show you what I mean in #5 when I give you a code example.

4) We're going to need a hook to an element to append the new data to it. I recommend that <p class="style1"> tag. Make it <p id="messageOutput" class="style1"> so we can get a reference to it by document.getElementById.

5) A basic script to perform the needed functionality would be the following. You can download the files from yahoo, or you could just link to them on their web server like I usually do (the <script> tags which are at the top). This should all be in the <head> of the document btw. Just get rid of the script you have right now and replace it with this. Unfortunately I have to go right now so I cant finish the script that I gave you just yet, but start with what is here in this post and see if you can get the alerts to pop up with response data from the ajax request. Sorry, but I didn't have time to actually test this just yet, but give it a whirl.

Code:

<!-- Include the YUI library classes we need -->
<script src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"></script>
<script src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js"></script>
<script src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>

<script>

var Event = YAHOO.util.Event;


var MessageUpdater = new function() {

    this.url = "getMessages.asp";
    this.lastMessageID = 0;
    this.updateTimer = null;
    
    
    // Initialize the MessageUpdater
    this.init = function() {
        // Update messages every 2 seconds
        this.updateTimer = YAHOO.lang.later( 2000, this, this.updateMessages, null, true );        // arguments are: 2 secs, the 'this' scope, run this.updateMessages function, no extra arguments, runs periodically
    }
        
        
    // Update messages (runs periodically every 2 seconds)
    this.updateMessages = function() {
        var thisObj = this;
        
        var callbacks = {
            success: function() { thisObj.handleSuccess( o ); }, // Call MessageUpdater.handleSucces();
            failure: function() { thisObj.handleFailure( o ); } // Call MessageUpdater.handleFailure();
        };
        
        var postData = 'messageID=' + this.lastMessageID;
        
        // Make the request
        var request = YAHOO.util.Connect.asyncRequest('POST', this.url, callbacks, postData); 
    }
    

    // Function to handle the success of message retrieval
    var handleSuccess = function( o ) {
        var str = "";
        if( o.responseText !== undefined ){
            str = "Transaction id: " + o.tId + "\n";
            str += "HTTP status: " + o.status + "\n";
            str += "Status code message: " + o.statusText + "\n";
            str += "HTTP headers: <ul>" + o.getAllResponseHeaders + "\n";
            str += "Server response: " + o.responseText + "\n";
            alert( str );
        } else {
            alert( 'No response text, bad ajax call?' );
        }
    }
        
        
    // Function to handle the failure of message retrieval
    this.handleFailure = function( o ) {
        var str = "";
        if( o.responseText !== undefined ) {
            str = "Transaction id: " + o.tId + "\n";
            str += "HTTP status: " + o.status + "\n";
            str += "Status code message: " + o.statusText + "\n";
            alert( str );
        }
    }
}

// When the window finishes loading, start the message updater
Event.addListener( window, 'load', MessageUpdater.init, MessageUpdater, true );

</script>