manual refresh of div content only ?

just use css display:none

<div style="display:none">this content will be invisible and take up no space, you can use it for your buffer</div>

Select allOpen in new window

also one other thing.... the buffering may not be needed.  in whatever function triggers the redrawing of the chat room display, simply build the new content first, and make sure that the last step of the function is replacing the old content with the new.  let me know if i misunderstood your question in any way.

thanks for your reply, the display:none would do the trick...

the online list is changed, for example, when a user enters the room. So the line becomes..

document.getElementById("onlinelist").innerHTML = '';

then it will cycle though all the online users and add them in this manner..

document.getElementById("onlinelist").innerHTML +=  iconurl3 + iconurl2 + iconurl + "<a style=\"cursor: pointer;\" onClick=\"javascript: frames[\'profile\'].document.location=\'./index.php?act=frame&frame=profile&room=<?PHP echo $_GET['room']; ?>&user=" + dataSubArray2[x2] + "\';clearTheWay();\"><B>" + dataSubArray2[x2] + "</B></a>" + iconurl4 +"<br>";
       
In short, that just outputs 1 user to the list.. then it loops doing exactly the same.

However, the iconurl are all div contents which actually update later.. so while the above line outputs the user name to the onlinelist, graphics such as "IDLE" are done elsewhere..

for example,

var iconurl4 = "<a ID='" + dataSubArray2[x2] +"IDLE'> </a>"; // IDLE DIV

which gets updated later by..

document.getElementById("usernameIDLE").innerHTML ="WHATEVER"

the problem is the user's data come from a SQL sever so there is always a small delay in updating the DIV contents.. so what you actually see is the list of usernames down the online list, then everything gets jerked around as it updates the DIV's from information which came from the server.

Its not too bad overall, but when a user enters the room, the list is wiped, and you have to watch everything all over again.

What should really happen is the list only changes when it has finished outputting all the users and obtained all the data from the server... so the idea was just to buffer everything somewhere and wait for everything to finish loading, then just copy the buffer to the online list. so the only thing you see change is the user which came or left.. and you do not have to see all the users re-drawn one by one in the list which can take several seconds.

ya makes sense, sounds like display:none is all you need and your approach seems reasonable.  let me know if you need anything else.  thanks.

I have a couple of questions in setting the buffer up as its only showing one user now

document.getElementById("onlinelist").innerHTML = document.getElementById("onlinelist_buffer").innerHTML

does that line simply copy the data, so if I clear the buffer its not going to clear the onlinelist aswell as they both equal eachother ?

also, I now realise that the lines like

document.getElementById(mySplitResult4[z]+"IDLE").innerHTML ="";

will have problems as online_buffer has not been set.. so i don't know if its going to alter both the online list variables, and the buffer variables, or neither.. It should be possible to just select the ID within the buffer though I think ?

"document.getElementById("onlinelist").innerHTML = document.getElementById("onlinelist_buffer").innerHTML"

that should indeed be all you need to copy the buffer into the visible list.  and yes, clearing the buffer will NOT also clear the list.  those are independent actions.

i am bit confused by your question in the 2nd part of the post.  please clarify if i'm misunderstanding, but what i would do is create a function called "redraw()" and call that function whenever you need to repopulate and redraw your list.  the function would like something like this:

function redraw() {
 
//put any ajax code you need to get the current list of users, etc, first.  now you'll have your actual data.
 
//next, clear the buffer and then loop thru that data and update the HTML that will be used to display it, doing these updates in the buffer div.
 
//finally, copy the updated buffer div to your actual chat display div
document.getElementById("onlinelist").innerHTML = document.getElementById("onlinelist_buffer").innerHTML
}

Select allOpen in new window

right, so the first part is fine then..

ok, the second part.. I mean now I have

( I will not list the exact code but you should get the idea...)

< DIV ID=onlinelist >
< DIV ID=onlinelist_buffer>


now my onlinelist holds user eliments like

<a id=icon1> </a> <a id=icon1> </a> <a id=username> </a>

Though what I mean is, both the onlinelist and onlinelist_buffer will hold the line above.

so when I do

document.getElementById("username")

onlinelist and onlinelist_buffer will hold element "username". So I am unsure what will happen there.

Really the line should select the onlinelist_buffer but I have no idea how to do that.. it would be something like..

 document.getElementById("onlinelist_buffer").getElementById("username")

where it would select "username" from the "onlinelist_buffer" div id.

at the moment "username" is will be held twice in onlinelist and onlinelist_buffer DIV ID's...

hope this makes sense... ?

yep, makes sense.  i'm pretty sure ids need to be universally unique.  that is not a problem for you tho, because the buffer is only used a temporary storage.  as soon as it is copied over, you need to clear it, then you should no problems.

function redraw() {
 
//put any ajax code you need to get the current list of users, etc, first.  now you'll have your actual data.
 
//next, clear the buffer and then loop thru that data and update the HTML that will be used to display it, doing these updates in the buffer div.
 
//finally, copy the updated buffer div to your actual chat display div
document.getElementById("onlinelist").innerHTML = document.getElementById("onlinelist_buffer").innerHTML;
//now clear the buffer
document.getElementById("onlinelist_buffer").innerHTML = '';
}

Select allOpen in new window

I understand what you mean.. though I can't clear the buffer exactly at that point :(

I wonder if there would be an easier way without using a buffer.. if it possible to hide data in tags ?

each user has his own tag line as said before such as...

<a id=username> nill </a> <a id=icon>  <img src='./icons/op_icon.png' align='absmiddle'> </a>

that is drawn first.. id icon is actually added later...

I am thinking is it possible to turn all those ids to hidden ? then the user will just not display anything at all, but the script can still obtain all the data from the server.. and at that point set all the ids to visable.

the actual script output would be like ...

< div id=onlinelist> <a id=username> nill </a> <a id=icon>  <img src='./icons/op_icon.png' align='absmiddle'> </a> </div>

to show the order better it would be...

< div id=onlinelist>
<a id=username1> nill </a> <a id=icon1>   </a>
<a id=username2> nill </a> <a id=icon2>   </a>
<a id=username3> nill </a> <a id=icon3>  </a>
<a id=username4> nill </a> <a id=icon4>  </a>
</div>

then when data has come back from the server will be like.

< div id=onlinelist>
<a id=username1> nill </a> <a id=icon1>  <img src='./icons/op_icon.png' align='absmiddle'> </a>
<a id=username2> nill </a> <a id=icon2>  <img src='./icons/op_icon.png' align='absmiddle'> </a>
<a id=username3> nill </a> <a id=icon3>  <img src='./icons/op_icon.png' align='absmiddle'> </a>
<a id=username4> nill </a> <a id=icon4>  <img src='./icons/op_icon.png' align='absmiddle'> </a>
</div>

That is a very simple version.. though there a few image tags plus the username (in text) so what happens is the text comes up first, then the username in effect jerks around as the image tags load..


So I am thinking like...

< div id=onlinelist>
<HIDE THIS LINE> <a id=username1> nill </a> <a id=icon1>   </a>
<a id=username2> nill </a> <a id=icon2>   </a>
<a id=username3> nill </a> <a id=icon3>  </a>
<a id=username4> nill </a> <a id=icon4>  </a>
</div>



< div id=onlinelist>
SHOW THIS LINE <a id=username1> nill </a> <a id=icon1>  <img src='./icons/op_icon.png' align='absmiddle'> </a>
<a id=username2> nill </a> <a id=icon2>  <img src='./icons/op_icon.png' align='absmiddle'> </a>
<a id=username3> nill </a> <a id=icon3>  <img src='./icons/op_icon.png' align='absmiddle'> </a>
<a id=username4> nill </a> <a id=icon4>  <img src='./icons/op_icon.png' align='absmiddle'> </a>
</div>


that way the user info is only visable after everything has loaded up..

it is not as effective as the buffering though.. but it would stop the userlines from jerking around as various elements are loaded up as the entire userline will just be simply hidden.

I think its a silly problem, but i am not to great at explaing it all!

can you explain why you can't clear the buffer at that point?

having all the users there but some of them not displayed would work, but if you have a ton of users you'll have a lot of extra data on your page.  

The problem is the users take time to come from the server as well as the all the other information.

The users come first, then the data follows at some point after which updates the users tags.

The problem is, the buffer is being added to each time a user enters the room.. at which point if I transfer that data to the online list and clear the buffer.. then the next user which comes into the room will be the only user in the buffer.. so when I copy the data again.. the actual onlinelist will only ever show 1 user.. which is the part of the problem I am stuck at... the second part of the problem is what I tried to explain before, that the code updates the tag id's , but the tag ids will be listed twice in both the onlinelist and onlinelist_buffer.

I can't just output users into the buffer and simply add them to the onlinelist either.. the buffer would only ever hold 1 user, and like you said, but will have to add to the online list not equal it.. then I could clear the buffer.. the problem I see there is at no point is the actual online list cleared, so when users leave, they will never be taken off the online list...

so you are back to outputting everything to the online buffer first, then just copying it to the online list... though like I said, I ran into problems at some point as only 1 user showed up in the online list... the only problem I could see was id's such as "username" would appear in both the onlinelist and onlinelist buffer.. which could be the reason for it not working correctly.

I think the simple solution is to select the online list buffer then select the id from that only, but not sure how to do it...

like I said before my current code is

document.getElementById("username")

but that ID will come up twice in the buffer and online list.. so I would need a way to select the buffer then username in that buffer... but  at which point it gets to confusing for me to work out..

currently

<div id=onlinelist >
<a id=username> </a>
</div>

<div id=onlinelist_buffer >
<a id=username> </a>
</div>

so what will document.getElementById("username") do now there are 2 ids called username ?

What I am trying to say is , it needs to select the username ID from only the onlinelist_buffer ID.. though I am not sure that is possible...

i dont think it is possible.

here is what you can do.  keep an array of current user, icons, any other info associated with a user.  everything you need to write the line into the chat display for that user.  now when a new user enters, you:

1. update the arrays
2. use the info of the arrays to rewrite to the buffer
3. copy buffer to display
4. clear buffer

even after step 4, you still have all the info stored in an array.  you would follow similar steps for removing users when they leave the room.

alternatively, you could have the server send the complete list of new users each time the room is updated by an addition or removal.  unless you have a lot of users, that should work fine.  if you do have a lot of users, the first approach i described is probably better.  i'll be back later this afternoon if u have more questions.

ok thanks, I will give it some thought.

I don't know why but when I change the 2 lines from onlinelist to onlinelist_buffer, then put onlinelist=buffer thing later, it only shows up 1 user. I really do not know why it does that. The buffer only seems to ever obtain 1 user even though it is the exact line as the onlinelist part. I searched the code to make sure onlinelist wasn't used elsewhere and found nothing.  It shouldn't behave like that, but for some reason it does :-(

So it looks like using a buffer is not going to be possible. The only workaround I can think of is to hide the information in another div container somehow. and set it visable when all the information is there.

I can hide it using your display:none line, though changing this to display again I can't work out.

I think I would have to wrap the useline in another DIV container, then ID that as "display" such as..

<div id=display>  user data </div>

but I can only alter the "user data" not the actual display container.. so ...


document.getElementById("display").innerhtml="<div display:none>"
<div id=display> <div display:none>  user data </div></div>

then
document.getElementById("display").innerhtml="<div display:all>"
<div id=display> <div display:all>  user data </div></div>



not sure if display:all is a valid code, but I hope this gets the idea across.. not sure if it will work or not, but "user data" should be contained as either being hidden or visable. I am unsure if that will work without altering the "user data" part too when the display ID part is changed.

I managed to just not output the user name until the graphics are drawn (don't know why I didnt just do that in the first place)

it half cures the problem, as now, nothing is drawn at all until all the user info has come back.. so the screen shows nothing, then the user lines come up in one go rather than being drawn over a couple of seconds.. so that solves the "jerking" problems.

The real problem is still the buffering. the online list gets cleared, and then redrawn line by line.. I am not sure there will be a solution to this problem.

If say there are 50 users in the room, and 1 leaves.. then the online list gets cleared, and the user list is re-drawn with the current online users.. its a little messy as 50 users would vanish and come back from the viewpoint of the online list.

the server does send back a list of online users in one go, so I know how many there is to draw in the buffer. I think I will have to look into re-programming a large chunk of code so I can figure out how to add in the buffering correctly.

There is probably nothing more to be said here. I will see if you have anymore suggestions later, then ill wrap up this thread and start a new one if I run into anymore problems.

why don't show me the full code at this point, or something close to it.  there is definitely a way to make this work.

i can paste in just the parts which do the list functions.. im just tweaking a few things but will paste it in shortly..

this part is called when the list of online users plus all the data has been collected from the server..

function update_list(){
 //document.getElementById("exxos").innerHTML ="2222";
 //alert(blah);
 
 var iconurl = "<img src='./icons/black.png'>";														
																									
														
														
														var i=0;
														
													//"<a style=\"cursor: pointer;\" onClick=\"javascript: frames[\'profile\'].document.location=\'./index.php?act=frame&frame=profile&room=<?PHP echo $_GET['room']; ?>&user=" + dataSubArray2[x2] + "\';clearTheWay();\"><B>" + dataSubArray2[x2] + "</B></a>"	
													//blah will hold exxos#0#gold#MOB#exxos#IDLE#gold#MOB#exxos#0#gold#MOB of all the online users
															
														//first split into # chunks		
														var myString = blah;
														var mySplitResult4 = myString.split("#");
														for(i = 0; i < mySplitResult4.length; i++){
														//alert (mySplitResult4[i]);											
														 	}	
															
													
													//mySplitResult4 will hold the blah day in an array
													
													//i will hopefully hold the array count from above
													//if exxos found in the online box then swap the ID to idle or not
													
													//alert(blah);
													//document.getElementById("exxos").innerHTML ="4444"; 
													
													z=0;
													
													while (z<i){
														
														
														
														//check to see is we have a ID of exxosIDLE is this is not there then the user is simply not there
														if (document.getElementById(mySplitResult4[z]+"IDLE") ){
														// we found this ID user with the online list 
														document.getElementById(mySplitResult4[z]+"STUFF").innerHTML = "<a style=\"cursor: pointer;\" onClick=\"javascript: frames[\'profile\'].document.location=\'./index.php?act=frame&frame=profile&room=<?PHP echo $_GET['room']; ?>&user=" + mySplitResult4[z] + "\';clearTheWay();\"><B>" + mySplitResult4[z] + "</B></a>";
																
														document.getElementById(mySplitResult4[z]+"RANK").innerHTML = "<img src='./icons/"+  mySplitResult4[z+2] +  ".png' align='absmiddle'>";
														document.getElementById(mySplitResult4[z]+"MOB").innerHTML = "<img src='./icons/"+  mySplitResult4[z+3] +  ".png' align='absmiddle'>";
														
														//ops yes/no
														if (mySplitResult4[z+4]=="OP"){
														//this user is a room op
														document.getElementById(mySplitResult4[z]+"OPS").innerHTML = "<img src='./icons/op_icon.png' align='absmiddle'>";
														} else {
														// will be NO so clear
														document.getElementById(mySplitResult4[z]+"OPS").innerHTML = "";
														}
														
														
																//alert(mySplitResult4[z]+mySplitResult4[z+1]+mySplitResult4[z+2]+mySplitResult4[z+3]);
																
																
																//********************************************************************************************************
																//alert(mySplitResult4[z]);
																//if its IDLE then swap in the image
																if(mySplitResult4[z+1]=="IDLE") {
																//alert("IDLE");
																document.getElementById(mySplitResult4[z]+"IDLE").innerHTML = "<img src='./icons/IDLE.png' align='absmiddle'>";
																} else {
																// user not idle so clear the tag ID
																//alert("NOT IDLE");
																document.getElementById(mySplitResult4[z]+"IDLE").innerHTML ="";
																} 
																//********************************************************************************************************
														
														
														
														
														//alert(mySplitResult4[z],mySplitResult4[z+1],mySplitResult4[z+2],mySplitResult4[z+3]);
														
														} else {
														//object not found ? 
														//alert ("NOT FOUND" + mySplitResult4[z]);
														}
														//end object check
													z=z+5;// array is 4 things wide so +4 will give the next username... probably...
													
													}//end while
															
									// in effect screenswap :D					
									//document.getElementById("onlinelist").innerHTML = document.getElementById("onlinelist_buffer").innerHTML
													
 
 }// end function
 
 //*********************************************************************************************************************************************
 

Select allOpen in new window

this part is the chunk which changes when users enter or leave the room..

this part really keeps track of the user names, then draws the empty tags.. then the other section of code.. the "update list" function, matches that user name to the one in the database then collects all his info.

of course update list is called after all the info has been fetched.. ive not posted that part in as its not part of the problem.

//*******************************************************************************************************************************
											
											if(dataSubArray[0] == '2'){
												// Operators for userlist
												
												//document.getElementById("onlinelist_buffer").innerHTML = '';
												document.getElementById("onlinelist").innerHTML = '';
																							
												var dataSubArray2 = dataSubArray[1].split(",");
												for(x2 = 0;x2 < dataSubArray2.length;x2++){
													if(dataSubArray2[x2] != ''){
														dataSubArray2[x2] = restoreText(dataSubArray2[x2]);
														
														//alert("HERE 2");
														
														//THIS USER IS A ROOM OP
													 allowed = "YES";
											
														
														//if we have already drawn this user's DIV's then quit else they will blink on refresh
																													
														if (document.getElementById(dataSubArray2[x2]+"IDLE") ){
														// we found this ID user already with the online list, do nothing
														} else {
														//draw the new users DIVs
																												
															// ancor will be exxosRANK  for the rank tag, and exxos for the idle icon (end of total line below)
															var iconurl  = "<a ID='" + dataSubArray2[x2] +"RANK'> </a>"; //rank  DIV
															var iconurl3 = "<a ID='" + dataSubArray2[x2] +"MOB' > </a>"; //KEM /mob DIV
															var iconurl4 = "<a ID='" + dataSubArray2[x2] +"IDLE'> </a>"; // IDLE DIV
															var iconurl2 = "<a ID='" + dataSubArray2[x2] +"OPS'> </a>"; //ops
															var usr =      "<a ID='" + dataSubArray2[x2] +"STUFF'>  </a>"; // username and stuff
															
															//"<a style=\"cursor: pointer;\" onClick=\"javascript: frames[\'profile\'].document.location=\'./index.php?act=frame&frame=profile&room=<?PHP echo $_GET['room']; ?>&user=" + dataSubArray2[x2] + "\';clearTheWay();\"><B>" + dataSubArray2[x2] + "</B></a>"
															
															document.getElementById("onlinelist").innerHTML +=  iconurl3 + iconurl2 + iconurl + usr  + iconurl4 +"<br>";
 	
														// this will get all current online users and update the list box
														//do_refresh2();
	
															}	
	
	
	
														
									
														//document.getElementById("exxos").innerHTML = blah;
												
													
													}
												}

Select allOpen in new window

exxos, where is the AJAX code interacting with the server?  

also, i dont see how the code below is working?  what are you trying to do with myString?

    //first split into # chunks
    var myString = blah;
    var mySplitResult4 = myString.split("#");
    for(i = 0; i < mySplitResult4.length; i++){
        //alert (mySplitResult4[i]);
    }
    
    z=0;
    while (z<i){

Select allOpen in new window

this is the AJAX code... it gets all the user info back

the format is showen later on... its like a range of values seperated by #

The code is working all correctly, but for some reason its stopped working in IE7 and it just says "unknown runtime error" works in firefox and chrome though still.. so looks like ive broke something somewhere :(

 
 function do_refresh2(){
 
 jd=new Date();
nocache = jd.getTime();
								
							url = "./reg-test.php?room=" + "<?PHP echo $_GET['room']; ?>" + "&nc="+nocache;							
							
							if(window.XMLHttpRequest){
								try {
									httpReq2 = new XMLHttpRequest();
								} catch(e) {
									httpReq2 = false;
								}
							}else if(window.ActiveXObject){
								try{
									httpReq2 = new ActiveXObject("Msxml2.XMLHTTP");
								}catch(e){
									try{
										httpReq2 = new ActiveXObject("Microsoft.XMLHTTP");
									}catch(e){
										httpReq2 = false;
									}
								}
							}
							//alert("HTTP2");
							httpReq2.onreadystatechange = requestReady_channel2;
							httpReq2.open("GET", url, true);
							httpReq2.send("");
						}
 
 
 
 function requestReady_channel2(){
 //alert("DO 2");
 if(httpReq2){
		if(httpReq2.readyState == 4){
		
				if(httpReq2.status == 200){
				
				//here we should have a list of usernames from the online list, and idle status
				blah=httpReq2.responseText;
				//alert("GOT REQ");
				update_list();
  				}//200
						}//4
  }//http
 }// funtion
 
 

Select allOpen in new window

Ok, so "blah" is global variable that stores the result of the update.  and i assume updates are made ever X seconds? there are certainly a bunch of places you should cleanup this code (like using JSON to send the data), but let's ignore that stuff for now and just try to solve the problem at hand.  using local arrays to store user data and then writing that to a buffer and then onto you display div should definitely work.

i understand the AJAX code and the update_list code.  i still dont understand the code that begins:

if(dataSubArray[0] == '2'){

where is dataSubArray being set?  if update_list is readrawing the chat display, what is that code doing?

dataSubArray2[x2] just holds the username... as to the code previous to that, I did not write.. the dataSubArray data is sent by the server somewhere.. what I think happens is when something comes up in the chat window that data comes back into that array with a whole bunch of formatting information, and at some point in that array is the username... so the username is extracted from the array and added to the online list.. thats the best I can explain that part...

then I take the user name and wrap it in ancor tags.. for that part that is all it does....

the AJAX code then takes that username and requests all the information from the server.. which comes back in "blah" as you said, then all those empty id tags get updated with the information from the server.

to go a little deeper, blah actually holds a list of current online users.. so that is why that code loops and double checks the user is still there before it attempts to update the data.. the lists do not always 100% tally for a while bunch of strange reasons which I will not go into now!

I am also having a problem with the string after
document.getElementById(mySplitResult4[z]+"STUFF").innerHTML =

it does not work in IE7.. The line did work when it was in the other chunk of code, but I moved it so the username did not flash up on its own... where it is now the user info is placed on screen with the other information.. works in firefox but stopped working in IE7..

okay, it's all just about clear now.  the only thing i still can't find is where you remove users from the list.  also, in your OP you said you "blank" the screen when you updates, but i don't see this happening either.  where is the blanking out done?

oh also, as a cosmetic aside, this will make your life a bit easier:

http://www.prettyprinter.de/module.php?name=PrettyPrinter

thanks for the link. ive been trying out free programs to tidy up my code but they always seem to break it :(

The blanking isn't actaully there.. it just blanks the entire online list with
document.getElementById("onlinelist").innerHTML = '';

Then it must cycle though all the online users and output them again.. the code which brings back the users I did not write.. but that list is always accurate..

when my ajax script gets users, there is a online users list in the SQL server, but when users have connection problems they can appear in the online list a few times.. the code I did not write must clean up or filter that out at some point. Though when I read the online user list, I just read the whole thing and pick out the user names from it if they match the users which are being updated on screen.

its a little messy, bit the code I am witing is "piggybacked" onto the chat "core" which I did not write, though I have re-wrote around 50% of it fixing countless bugs, which has kept me busy for about 8 months now :(

well the update_list code also takes are of some other functions like the IDLE icons so I can't move it.. the second problem is the data loop would have to wait until the data came back from the server.. its actually getting back to another problem i posted on here a couple of days ago.. but there are so many points and loops that I am having trouble keeping track of whats being called when and where.

the data loop is actually called when it has got the data from the server, and when it has the data it calls the loop to work on the usernames etc.. the idea was to put in another call to the server to get the information by calling dorefreash2 then calling the data code loop.. but it was getting hard to follow with so many loops in loops, and I still needed to do it all again elsewhere in the code so how it is now solved a lot of looping problems.

I guess if I could get my head around it all I could just output all the data in the data loop code.. though that only calls really when a user enters or leaves the room... my update_list code can be ran at any time and updates icons such as the IDLE icon...

so it just seemed overall easier to have the update_list function and have the data loop code just outputing the empty tags..

you can see some of the lines are still there when I put in the buffering code, I just swapped onlinelist to onlinelist_buffer.. and at the end of update_list did the  onlinelist= onlinelist_buffer swap.. but for some reason I only ever got 1 user on the screen ... crazy I know and it *should* work.. but as to why it only outputs 1 user after buffering I can't work out :(

no i'm not sure it should work, since you are using duplicate IDs if you use both the buffer solution and the update_list code as you have it now.

here is a solution that will work i think.  when you are creating the buffer in the data loop, prepend every ID with "tempbuffer" or something like that.  also add the option in the update_list function (perhaps as an optional parameter) to do the update on either the real or the buffered data.  now, at the end of the data loop, when everything is finished, call update_list on the buffer.  when it finishes, copy the buffer to the real display and delete the buffer.  now write one last function which will rename the temp IDs with their normal names and call it.  now you have a blank buffer, and a completed updated real display, and you have retained the ability to update its icons independently.

that could work.. i will think about that one shortly..

im just trying to get my head around duplicating some code related to your first suggestion in updating all the information in the data loop code.. where the dataloop is called after the has get the data in "blah".. so all the data should be present in the data loop, so I should be able to call update_list during the loop then.. may take me some time to program this up, I am in england so probably a fair few hours ahead of yourself too.

i retract the suggestion :), as i didn't realize that updating icons and updating the name list were independent events.  that is not to say the code couldnt be cleaned up in general, but i think the first order of business should be to solve the original problem and not worry about that yet.  

yeah when the list is drawn first its the data loop part, then a lot of other things like you say updating the icons happen at other times.. the idle icon is just one of them.. that changes the ancor contents to show the image or not.. there are a few other icons but wont go into that.

clean up the code.. yes.. thats why I have been trying to do this past week, alone with fix various little "bugs" along the way ;)

ok, that went better than I thought...

what happens now is the "Blah" data is called from another totally sepetate function its just a copy of the ajax code for do_refresh, but the main functions calls "blah" updates first, THEN calls the data loop, so all the user information is there when its drawing the tags... and it *almost* works...

you can see in my update code I have "update_list" function before it outputs the data in the online list..

now I am assuming here that we are talking single threading here, whereas the innerHTML += line is only ran AFTER the update_list function has compleated ?

It has improved matters, but for some reason the usernames at some point still come up before the graphics... if the graphics were not loading fast enough they would come up as a that empty square icon.. though it does not show that... so the usernames are still getting on the screen before the icons are drawn in for some reason...

if (document.getElementById(dataSubArray2[x2]+"IDLE") ){
														// we found this ID user already with the online list, do nothing
														} else {
														//draw the new users DIVs
																												
															// ancor will be exxosRANK  for the rank tag, and exxos for the idle icon (end of total line below)
															var iconurl  = "<a ID='" + dataSubArray2[x2] +"RANK'> </a>"; //rank  DIV
															var iconurl3 = "<a ID='" + dataSubArray2[x2] +"MOB' > </a>"; //KEM /mob DIV
															var iconurl4 = "<a ID='" + dataSubArray2[x2] +"IDLE'> </a>"; // IDLE DIV
															var iconurl2 = "<a ID='" + dataSubArray2[x2] +"O2'> </a>"; //ops
															var usr =      "<a ID='" + dataSubArray2[x2] +"STUFF'>  </a>"; // username and stuff
															
															var usr= "<a style=\"cursor: pointer;\" onClick=\"javascript: frames[\'profile\'].document.location=\'./index.php?act=frame&frame=profile&room=<?PHP echo $_GET['room']; ?>&user=" + dataSubArray2[x2] + "\';clearTheWay();\"><B>" + dataSubArray2[x2] + "</B></a>";
														
														update_list();
														
															document.getElementById("onlinelist").innerHTML +=  iconurl3 + iconurl2 + iconurl + usr  + iconurl4 +"<br>";
 	
	
															}	
	

Select allOpen in new window

actually i think its only on your own username in the chat screen.. its possible as I login, its not come up in the online list yet so the data can't be obtained.. so it comes up blank until the regular "every couple of seconds" loop calls update_list again... fix one problem create another!!

http://www.future-technologies.co.uk/temp/onlinelist.avi

i hope u can view that, its in xvid format.

what you need to do is frame skip until the box says "updating..." then the next few frames are as follows..

1) exxos comes up in the list without any images (they have simply not loading yet, sorry about that another day!)

2) blah comes up all on his own just text.. so something is missing data wise there.

3) exxos's images decide to finish loading

4) blah's images are output but take time to load up also.

5) dave enters the room without any image data either.

6) dave's images are the same as blah's so loads up straight away.


Forget the image not loading problems, they really need to be pre-loaded, but there are so many and the image names change.. that I dont think its really possible to fix that... another problem for another time..

back to the overall problem, that the username's text comes up without the graphics.. with the updated code that should not really happen..

if you then imagine a lot of users in the room, then you can imagine why I just wanted to buffer everything and wait for all the changes to happen and then output the list to the onlinelist box. .. that way the user would never see the images loading up at all random times and soforth..

i think what is happening is that the image reloads when we copy the buffer over.  to really make it smooth, we'd need to move the buffer div over the original div, after making it the exact same size, and then make it visible and on top of the display div.  then we could delete the display div and rename the buffer div.  as it is, we are only buffering the writing of the div, not the loading of the div....

alternatively, you may be able to find already written code to do this kind of thing in jquery or YUI or something like that.

http://www.future-technologies.co.uk/temp/buffertest.avi

I cant get the buffer to work.. all I did there was change..

document.getElementById("onlinelist").innerHTML +=  iconurl3 + iconurl2 + iconurl + usr  + iconurl4 +"<br>";

to

obuff+=  iconurl3 + iconurl2 + iconurl + usr  + iconurl4 +"<br>";

and copy obuff back to the onlinelist later on.. so to why it goes crazy like that I have no idea. there must be some odd nested problem somewhere alone the line which I am not seeing.

looks like I will just have to live with it I think until i can trace it all though line by line which will take some time no doubt. thanks for your input on this though :)

no problem, good luck

thanks for your help!!