jQuery works in FF but not in Safari
- by Hristo
I have some event handlers that work in FF and not in Safari. Simply put, I have a list of friends, some hard-coded, some pulled in from a database. Clicking on a buddy opens a chat window... this is much like the Facebook chat system.
So in Firefox, everything works normally and as expected. In Safari, clicking on buddies that are hard-coded works fine, but clicking on buddies that are pulled in from the database doesn't pull up the chat window.
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
<script type="text/javascript" src="js/ChatBar.js"></script>
<script type="text/javascript" src="js/settings.js"></script>
<script type="text/javascript">
var chat = new Chat();
var from = <?php echo "'" .$_SESSION['userid'] . "'"; ?>;
chat.getUsers(<?php echo "'" .$_SESSION['userid'] . "'"; ?>);
</script>
So I load all my buddies with chat.getUsers. That function is:
// get list of friends
function getBuddyList(userName) {
userNameID = userName;
$.ajax({
type: "GET",
url: "buddyList.php",
data: {
'userName': userName,
'current': numOfUsers
},
dataType: "json",
cache: false,
success: function(data) {
if (numOfUsers != data.numOfUsers) {
numOfUsers = data.numOfUsers;
var list = "<li><span>Agents</span></li>";
for (var i = 0; i < data.friendlist.length; i++) {
list += "<li><a class=\"buddy\" href=\"#\"><img alt=\"\" src=\"images/chat-thumb.gif\">"+ data.friendlist[i] +"</a></li>";
}
$('#friend-list ul').append($(list));
}
setTimeout('getBuddyList(userNameID)', 1000);
}
});
}
buddyList.php just pulls in the Users from the database and returns an array with the user names. So the jQuery for clicking a buddy is:
// click on buddy in #friends-panel
$('#friends-panel a.buddy').click(function() {
alert("Loaded");
// close #friends-panel
$('.subpanel').hide();
$('#friends-panel a.chat').removeClass('active');
// if a chat window is already active, close it and deactivate
$('#mainpanel li[class="active-buddy-tab"] div').not('#chat-box').removeAttr('id');
$('#mainpanel li[class="active-buddy-tab"]').removeClass('active-buddy-tab').addClass('buddy-tab');
// create active buddy chat window
$('#mainpanel').append('<li class="active-buddy-tab"><a class="buddy-tab" href="#"></a><div id="chat-window"><h3><p id="to"></p></h3></div></li>');
// create name and close/minimize buttons
$('.active-buddy-tab div h3 p#to').text($(this).text());
$('.active-buddy-tab div h3').append('<span class="close"> X </span><span class="minimize"> – </span>');
$('.active-buddy-tab').append('<span class="close"> X </span>');
// create chat area
$('.active-buddy-tab div').append('<div id="chat-box"></div><form id="chat-message"><textarea id="message" maxlength="100"></textarea></form>');
// put curser in chat window
$('.active-buddy-tab #message').focus();
// create a chat relationship
return false;
});
... and the basic structure of the HTML is:
<div id="footpanel">
<ul id="mainpanel">
<li id="friends-panel">
<a href="#" class="chat">Friends (<strong>18</strong>) </a>
<div id="friend-list" class="subpanel">
<h3><span> – </span>Friends Online</h3>
<ul>
<li><span>Family Members</span></li>
<!-- Hard coded buddies -->
<li><a href="#" class="buddy"><img src="images/chat-thumb.gif" alt="" /> Your Friend 1</a></li>
<li><a href="#" class="buddy"><img src="images/chat-thumb.gif" alt="" /> Your Friend </a></li>
<!-- buddies will be added in dynamically here -->
</ul>
</div>
</li>
</ul>
</div>
I'm not too sure where to begin solving this issue. I thought it might be a rendering bug or something with the DOM but I've been staring at this code all day and I'm stuck. Any ideas on why it works in FF and not in Safari? btw... I'm testing on Snow Leopard.
Thanks,
Hristo
