I’m testing out using AJAX-based comments on a carousel-based photo gallery page and have run into a problem in Firefox 2 and Safari 3. Oddly enough, it works fine in IE6, IE7, and Opera.
So, first of all, here’s a sample link:
http://vchen.com/index.php/food/gallery/C13/?imageId=2
If you look below Comments, you’ll see a link for comments. Clicking on it should fire off an AJAX load (I’m using jQuery) and returns any comments and the comment submit form markup. Both Firefox 2 and Safari 3 choke when you click the link. IE6/7 and Opera show the correct behavior.
Inspecting the AJAX response, I see the following markup returned:
<div id="narrowcontent">
<ol>
<li>i love veggies. especially green ones!
<div class="posted">Posted by
//<![CDATA[
var l=new Array();
l[0]='>';l[1]='a';l[2]='/';l[3]='<';l[4]=' 114';l[5]=' 111';l[6]=' 116';l[7]=' 99';l[8]=' 105';l[9]='118';l[10]='>';l[11]='\"';l[12]=' 109';l[13]=' 111';l[14]=' 99';l[15]=' 46';l[16]=' 108';l[17]=' 105';l[18]=' 97';l[19]=' 109';l[20]=' 103';l[21]=' 64';l[22]=' 114';l[23]=' 111';l[24]=' 116';l[25]=' 99';l[26]=' 105';l[27]=' 118';l[28]=' 46';l[29]=' 110';l[30]=' 101';l[31]=' 104';l[32]=' 99';l[33]=':';l[34]='o';l[35]='t';l[36]='l';l[37]='i';l[38]='a';l[39]='m';l[40]='\"';l[41]='=';l[42]='f';l[43]='e';l[44]='r';l[45]='h';l[46]='a ';l[47]='<';
for (var i = l.length-1; i >= 0; i=i-1){
if (l[i].substring(0, 1) == ' ') [removed]("&#"+unescape(l[i].substring(1))+";");
else [removed](unescape(l[i]));
}
//]]>
on 06/05 at 09:25 AM</div>
</li>
</ol>
<div class="spacer"> </div>
<form id='comment_form' method="post" action="http://vchen.com/index.php/food/ajax_comments/55/" >
<div class='hiddenFields'>
<input type="hidden" name="ACT" value="20" />
<input type="hidden" name="RET" value="http://vchen.com/index.php/food/ajax_comments/55/" />
<input type="hidden" name="URI" value="/food/ajax_comments/55/" />
<input type="hidden" name="PRV" value="food/comment_preview" />
<input type="hidden" name="XID" value="6a24b6c48cff66569ea3cc95f23e88a41cc58f4e" />
<input type="hidden" name="entry_id" value="55" />
<input type="hidden" name="site_id" value="1" />
</div>
<textarea name="comment" cols="50" rows="12" style="width:100%;" ></textarea>
<input type="checkbox" name="notify_me" value="yes" checked="checked" /> Notify me of follow-up comments?
<input type="submit" name="submit" value="Submit" />
<input type="submit" name="preview" value="Preview" />
</form>
</div>My current guess is the javascript [removed] function in the response is causing the problem. I suspect it’s trying to write to the DOM before it’s ready. Does anyone know a good way around this?
Thanks,
-victor