MathCommentAuthenticator hanging Firefox on large weblog pages

[Oscar del Rio <de...@mie.utoronto.ca>]

Hi all,

I had reported before about problems with Roller 2.1 hanging Firefox when
rendering large weblog entries (usually with lots of photos).  It is happening
with Firefox 1.5.0.1 and SeaMonkey 1.0 on Windows and Solaris. The browser
hangs half way of rendering the page or sometimes even before showing any
part of the page and has to be killed.  No problems with IE or Opera, and
only started to happen after upgrading Roller from 2.0 to 2.1.

First I thought it was an Apache connector problem but it is still happening
without Apache (connecting directly to Tomcat).

If the browser has already cached the photos in the page (which renders
the page faster), it doesn't hang.

I seem to have narrowed down the problem to JavaScript code and the
MathCommentAuthenticator but I cannot find out exactly what it is.


If I disable JavaScript in Firefox, the large pages render OK (but comment
authentication fails, of course)

Looking at the javascript source, I thought it could be related to
clientSideInclude('commentAuthenticator','/roller/CommentAuthenticatorServlet');
defined in roller/theme/scripts/clientSideInclude.js, and the synchronous
XMLHttpRequest call

// Synchronous request, wait till we have it all
    req.open('GET', url, false);

(which according to http://jira.magnolia.info/browse/MAGNOLIA-283 could hang the 
browser if used in sync mode)

Anyway, I tried changing the sync parameter to 'true' and after that the browser 
does not hang any more (javascript turned on), but comment authentication fails 
(the math box is not shown).

Any idea what else I can try?  Or how can I get the MathCommentAuthenticator
load as it used to in Roller 2.0?


Thanks for any help,

Oscar

Re: MathCommentAuthenticator hanging Firefox on large weblog pages

[Oscar del Rio <de...@mie.utoronto.ca>]

I wrote:
> Looking at the javascript source, I thought it could be related to
> clientSideInclude('commentAuthenticator','/roller/CommentAuthenticatorServlet'); 
> 
> defined in roller/theme/scripts/clientSideInclude.js, and the synchronous
> XMLHttpRequest call
> 
> // Synchronous request, wait till we have it all
>    req.open('GET', url, false);
> 
> (which according to http://jira.magnolia.info/browse/MAGNOLIA-283 could 
> hang the browser if used in sync mode)


Update on my own post, again  :-)
Based on information found on other websites discouraging use of
synchronous XMLHttpRequest
http://developer.apple.com/internet/webcontent/xmlhttpreq.html

I made the following changes to roller/theme/scripts/clientSideInclude.js
to use asynchronous XMLHttpRequest with a callback function and the problem
seems to be fixed.  I don't know if it is the "correct" fix (I am
not familiar with XML/JavaScript) but it might help others with more experience...


// roller/theme/scripts/clientSideInclude.js

// global vars for access from callback function
var req = false;
var element;

function clientSideInclude(id, url) {
   // For Safari, Firefox, and other non-MS browsers
   if (window.XMLHttpRequest) {
     try {
       req = new XMLHttpRequest();
     } catch (e) {
       req = false;
     }
   } else if (window.ActiveXObject) {
     // For Internet Explorer on Windows
     try {
       req = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) {
       try {
         req = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (e) {
         req = false;
       }
     }
   }
  // var element = document.getElementById(id);
  element = document.getElementById(id);
  if (!element) {
   alert("Bad id " + id +
    "passed to clientSideInclude." +
    "You need a div or span element " +
    "with this id in your page.");
   return;
  }
   if (req) {
     // Asynchronous request using processReqChange callback
     req.onreadystatechange = processReqChange;
//  req.open('GET', url, false);
     req.open('GET', url, true);
     req.send(null);
//  element.innerHTML = req.responseText;
//  } else {
//    element.innerHTML =
//   "Sorry, your browser does not support " +
//      "XMLHTTPRequest objects. This page requires " +
//      "Internet Explorer 5 or better for Windows, " +
//      "or Firefox for any system, or Safari. Other " +
//      "compatible browsers may also exist.";
   }
}


// handle onreadystatechange event of req object
function processReqChange() {
     // only if req shows "loaded"
     if (req.readyState == 4) {
         // only if "OK"
         if (req.status == 200) {
             element.innerHTML = req.responseText;
          } else {
             alert("There was a problem retrieving the XML data:\n" +
                 req.statusText);
          }
     }
}