I wanted a page that'd use AJAX to pull the data from the server, check for existing data that was already displayed on the page, if so, update the data. If the data no longer existed in the XML, the data would be removed from the page. If there was new data in the XML but wasn't displayed in the page, it'd be added to the page. Keep in mind the page is on a site that requires HTTP authentication. 

A friend recommended using JQuery to simplify the task. 

I wrote the code, and guess what? It works. More and less so anyway. It works in IE, but breaks in any other browser. I've been plugging away at it for the last few days trying to figure out why it won't work in any other browser, and am about at my wit's end.

Perhaps you guys can catch the problem that's been eluding me. If you can't catch it, no worries-- I can simply tell my users to just use IE to load the page. 

Without further ado, here's the code:

2. function updateQueue(){
3.     // Pull queue data from server, send to queue processor. Disable caching to avoid IE caching issue. 
4. var filtertype = document.getElementById('filtertype').value; // Find out what filter we're using. usually 'all', meaning no filter
5. dump ('Using filter type: ' + filtertype);
6. dump ('Now in updateQueue function...');
7. $.ajax({
8. type: "POST",
9. url: "xxxx" + filtertype,
10. cache: false,
11. username: "xxxx",
12. password: "xxxx",
13. success: function(data) {
14. dump('Successfully pulled data from server'); 
15. processQueue(data); 
16. }
17. //error: function(data) { 
18. // alert('Dang, it broke. Error: ' + data); 
19. //}
20. });
21. }
22. 
    
23. function dump(dumpwhat){
24. if(enabledebugger == true){
25. document.getElementById('debugthis').value += dumpwhat + '\n';
26. }
27. }
28. 
    
29. function processQueue(data){
30. // Convert the XML into a javascript array
31. var r = 0;
32. var player = new Array();
33. dump('Now in processQueue function...');
34. dump('Converting XML into an array...');
35. $(data).find('row').each(function() {
36. var row = $(this);
37. if(row.length > 0) {
38. player[r] = {
39. 'SessionID' : row.attr("SessionID"),
40. 'Source' : row.attr("Source"),
41. 'Region' : row.attr("Region"),
42. 'QueuedTime' : row.attr("QueuedTime"),
43. 'Desc' : row.attr("Desc"),
44. 'Game' : row.attr("Game"),
45. 'QueueType' : row.attr("QueueType"),
46. 'Device' : row.attr("Device"),
47. 'ANI' : row.attr("ANI")
48. };
49. dump(r + ': ' + player[r]['SessionID']);
50. if(!player[r]['Source']) player[r]['Source'] = '';
51. if(!player[r]['ANI']) player[r]['ANI'] = '';
52. }
53. r++;
54. });
55. dump('Done converting XML into an array.');
56. //return;
58. // Convert queue table into a javascript array
59. dump('Converting HTML table into an array...');
60. var myTable = [];
61. $('#sortabletable tr').each(function(i, tr) {
62. var myTr = [];
63. 
    
64. $('td', tr).each(function(i, td) {
65. myTr.push($(td).html());
66. });
67. 
    
68. myTable.push(myTr);
69. });
70. dump('Done converting HTML table into an array.');
72. // Now check each row, get Session ID
73. var SessionIDtoCheckFor=0;
74. var i=0;
75. var j=0;
76. var uBoundOfMyTable = myTable.length - 1;
77. var uBoundOfplayer = player.length;
78. var SessionIDFound = false;
79. var SessionIDIndex=0;
81. dump('Upper limit of table array: ' + uBoundOfMyTable);
82. dump('Upper limit of player (XML) array: ' + uBoundOfplayer);
83. 
    
84. dump('Now at the section for processing already displayed sessions...');
85. for (i=1;i<=uBoundOfMyTable;i++) { //start at 1, to skip table header row
86. SessionIDtoCheckFor = myTable[i][0]; // Grab the session ID
87. dump('Session to process: ' + SessionIDtoCheckFor);
88. dump('Checking player array for session...');
89. // Search XML array for session id
90. for (j=0;j<uBoundOfplayer;j++) {
91. if(uBoundOfplayer == 0 || j > uBoundOfplayer) break;
92. if(player[j]['SessionID'] == SessionIDtoCheckFor){
93. 
    
94. SessionIDFound = true; // Session ID has been found, exit loop.
95. SessionIDIndex = j; // Store index location for later use
96. dump('matching session found, it exists!');
97. break;
98. }
99. }
100. if(SessionIDFound){
101. // Update QueuedTime (works!)
102. $('#sortabletable tr').each(function() {
103. var playerIdcellvalue = $(this).find("#SessionID").html();
104. 
     
105. if(playerIdcellvalue == SessionIDtoCheckFor) {
106. 
     
107. // Found the row with the cell
108. var QueuedTimecell = $(this).find("#QueuedTime"); // get handle for the cell containing the corresponding cell
109. $(QueuedTimecell).html(player[SessionIDIndex]['QueuedTime']); // Update cell with current queued time
110. dump('player session in table updated with current Queued Time');
111. }
112. });
113. } else {
114. dump('Session was not found in player array, session expired.');
115. dump('Searching for handle on expired session in HTML table...');
116. // Delete row from queue table via fade out (works!)
117. $('#sortabletable tr').each(function() {
118. var playerIdcellvalue = $(this).find("#SessionID").text(); // get handle for the cell containing the corresponding id
119. if(playerIdcellvalue == SessionIDtoCheckFor) {
120. dump('Found handle!');
121. //dump('found expired, deleting it...');
122. // Found the row with the expired session
123. $(this).fadeOut(500, function() { $(this).remove(); }); // Fade out the row, then remove it
124. dump('Expired session ' + playerIdcellvalue + ' has been removed from table.');
125. }
126. });
127. }
128. // Move on to next session
129. dump('Moving on to the next session...');
130. }
134. // Add new pending sessions (works in IE, but doesn't work in other browsers!)
135. dump('Now at session add section...');
136. if(player.length > 0) {
137. dump('player.length > 0 confirmed...');
138. dump('Now in for loop. ');
139. for (j=0; j < player.length; j++) {
140. SessionIDFound = false;
142. dump('j value: ' + j + ' ... player length value: ' + player.length);
144. SessionIDtoCheckFor = player[j]['SessionID'];
146. dump('checking to see if session ' + SessionIDtoCheckFor + ' exists...');
148. $('#sortabletable tr').each(function() {
149. var playerIdcellvalue = $(this).find("#SessionID").text(); // get handle for the cell containing the corresponding id
150. if(playerIdcellvalue == SessionIDtoCheckFor) {
151. dump('Found session match: ' + SessionIDtoCheckFor);
152. // Found the row with the cell
153. SessionIDFound = true;
154. }
155. });
157. if(SessionIDFound == false) {
158. // New session!
159. dump('No existing session found, adding session...');
161. // Generate row...
162. var a, b, c, d, e, f, g, h, i, newrow; //there's a better way to do this, but this way was done for debugging purposes
163. 
     
164. a = "<tr class=''>";
165. b = "<td id='SessionID'>" + player[j]['SessionID'] + "</td> ";
166. c = "<td id='Device'>" + player[j]['Device'] + "</td> ";
167. d = "<td id='Source'>" + player[j]['Source'] + player[j]['ANI'] + "</td> ";
168. e = "<td id='Region'>" + player[j]['Region'] + "</td> ";
169. f = "<td id='QueuedTime'>" + player[j]['QueuedTime'] + "</td> ";
170. g = "<td id='Game'>" + player[j]['Game'] + "</td> ";
171. h = "<td id='Desc'>" + player[j]['Desc'] + "</td></tr>";
173. newrow = a + b + c + d + e + f + g + h;
175. dump('row html to add: \n' + newrow);
177. $('#sortabletable tr:last').after(newrow); // Add new row to the table
179. dump('new session has been added to table.');
180. 
     
181. // execute sort (on hold)
182. }
183. 
     
184. }
185. }
187. // TODO: Swap out sortable.js with this:
188. // http://tablesorter.com/docs/
189. 
     
190. }
191. 
     
192. var enabledebugger = true;
193. var productElement = document.getElementById('debugthis');
194. if (productElement != null){
195. enabledebugger = true;
196. }
197. setInterval( "updateQueue()", 4000 ); // Execute updateQueue function every four seconds. 

This is the html:

2. <form id="filterform"><input type="hidden" id="filtertype" name="filtertype" value="<?=$QType;?>" /></form>
4. <? if($enabledebugger){ ?><textarea id="debugthis" rows="30" cols="200">
5. Debugger Console
6. ------------------
7. 
   
8. </textarea><? } ?>
9. <table border="0" cellpadding="5" cellspacing="1" width="100%" class="sortable" id="sortabletable">
10. <tbody>
11. <tr class="header">
12. <td class="header">Session ID</td>
13. <td class="header">Device</td>
14. <td class="header">Source:</td>
15. <td class="header">State</td>
16. <td class="header">Queued Time</td>
17. <td class="header">Game</td>
18. <td class="header">Device Info</td>
19. </tr><?
20. if($theorder = 'odd'){
21. $theorder = 'even';
22. } else {
23. $theorder = 'odd';
24. }?>
25. </tbody>
26. </table>

My apologies for wrong usage of JQuery/javascript; I'm still trying to wrap my head around it. Feel free to criticize it; I'm always appreciative for opportunities for improvement. My thanks in advance for your time, and feedback!