SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Chat System: Auto-Updating the page using meta-tag loses msg input information in IE

    Well the title says it all. I have a real time chat system. The chat page updates itself after 5 seconds to display new entries read from a file. However when the user types in a message and is not finished by the time the page auto-updates itself, the text input contents are lost in IE.

    Can this be changed somehow using Javascript? Or is there any other way I can save the contents as they are typed?

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    when you reload a page you lose all javascript variables, so no you're out of luck.

    Other ways to do it:
    ajax,
    a hidden iframe that reloads and calls a javascript function on the main page

  3. #3
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    Could you please provide some code sample how that hidden iframe could work?

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a simple example. The iframe should load a server page that generates something similar to getchat.html provided:

    chat.html
    Code:
    <html>
    <head>
    <style type="text/css">
    textarea {
    	height: 250px;
    	width: 500px;
    }
    input {
    	width: 450px;
    }
    iframe {
    	display:none;
    	height: 0;
    	width: 0;
    }
    </style>
    <script type="text/javascript">
    function updateChat(items) {
    	var chatArea = document.getElementById("chatText");
    	var formattedChat = "";
    	for (var i=0; i < items.length; i++) {
    		var user = items[i].getElementsByTagName("span")[0].innerHTML;
    		var text = items[i].getElementsByTagName("span")[1].innerHTML;
    		formattedChat += user + ":\t" + text + "\n";
    	}
    	chatArea.value = formattedChat;
    }
    function sendChat() {
    	window.clearTimeout(chatTO);
    	window.frames["chatFrame"].location.href = "getchat.html?mychat=" + encodeURIComponent(document.getElementById("userInput").value);
    	chatTO = window.setTimeout(reloadChat, 1000);
    }
    function reloadChat () {
    	window.frames["chatFrame"].location.reload();
    }
    
    var chatTO;
    window.onload = function () {
    	chatTO = window.setTimeout(reloadChat, 1000);
    }
    
    </script>
    </head>
    <body>
    <form onsubmit="return false;">
    <textarea id="chatText"></textarea><br/>
    <input type="text" id="userInput" /><button onclick="sendChat();">Send</button>
    </form>
    <iframe name="chatFrame" src="getchat.html"></iframe>
    </body>
    </html>
    getchat.html
    Code:
    <html>
    <head>
    <script type="text/javascript">
    window.onload = function () {
    	parent.updateChat(document.getElementsByTagName("p"));
    }
    </script>
    </head>
    <body>
    <p><span>jimfraser</span><span>Hi how are you doing?</span></p>
    <p><span>DarkAngel</span><span>Good thanks and you?</span></p>
    <p><span>jimfraser</span><span>Not so good, I was just run over by a bus</span></p>
    <p><span>DarkAngel</span><span>Ouch!  that must've hurt</span></p>
    <p><span>jimfraser</span><span>Yeah it stings a little</span></p>
    </body>
    </html>

  5. #5
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, will try this.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •