jQuery ajax works in Chrome but not Firefox or IE - php

Question

Fair warning: I am no expert, but I did manage to get this far. My code isn't beautiful and it is rough. It is a fairly complex system so don't be shy to ask questions.
So I have an annoying problem where my code works in chrome but nowhere else. It seems like none of my javascript is working in either Firefox or IE. PLEASE NOTE THAT EVERY TIME YOU SEE PHP INSIDE A DIV IT SIMPLY REPRESENTS THE # OF THE POST INSIDE THE DATABASE.
My code displays posts where each post is paired with a like and dislike button built with spans. There is a checkbox that shows/hides all liked posts and another that does the same for disliked posts when selected. When a user likes or dislikes a post by clicking the button, values are sent to my DB through ajax (to check.php) so they can be recalled on future visits.
Again, it all works fine in Chrome but not in IE and Firefox.
Also, unless I insert the values into my userPosts table in my database manually first, no new posts and values are saved in my DB. For example, if my DB already has values for posts 1-3, all future decisions by the user to like/dislike those posts are sent and saved no problem but if I add a new post (post4) and the user likes or dislikes it, no values get sent... it seems like the INSERT doesn't work in check.php whereas the UPDATE functions just fine.
Here is the jQuery that sits inside the loop, you should find it annotated to your satisfaction:
<script type="text/javascript">
$(document).ready(function() {
// Declare variables
var checked = <?php echo $row['value']; ?>; //get value of Liked or Disliked from database
var postID = <?php echo $row['postID']; ?>; //get post ID from database
var userID = <?php echo $current_user->ID; ?>; //get the wordpress user's ID
var showLikes = $("input[name*='show_likes']"); //represents checkbox for Hide Liked
var showDislikes = $("input[name*='show_dislikes']"); //represents checkbox for Hide Disliked
// Set the remembered Liked and Disliked buttons
if (checked == 1) {
$('#post_<?php echo $row['postID']; ?>').addClass('like');
$('#like_<?php echo $row['postID']; ?>').removeClass('likeimgoff').addClass('likeimgon');
} else if (checked == 0) {
$('#post_<?php echo $row['postID']; ?>').addClass('dislike');
$('#dislike_<?php echo $row['postID']; ?>').removeClass('dislikeimgoff').addClass('dislikeimgon');
}
//When Liked button is clicked do this
$('#like_<?php echo $row['postID']; ?>').click(function() {
// Declare variables
var value = '1';
// Send values to database
$.ajax({
url: 'check.php',
type: 'POST',
data: 'userID=' + userID + '&postID=' + postID + '&value=' + value,
success: function(result) {
$('#Message_<?php echo $row['postID']; ?>').html('').html(result).prependTo('#post_<?php echo $row['postID']; ?>');
}
});
// If post is Disliked, change to Liked
$('#post_<?php echo $row['postID']; ?>').removeClass('dislike').addClass('like');
$('#dislike_<?php echo $row['postID']; ?>').removeClass('dislikeimgon').addClass('dislikeimgoff');
$('#like_<?php echo $row['postID']; ?>').removeClass('likeimgoff').addClass('likeimgon');
// If Hide Liked checkbox is on, toggle the post
if (showLikes.attr('checked')) {
$('#post_<?php echo $row['postID']; ?>').toggle();
}
return false;
});
//When Disliked button is clicked do this
$('#dislike_<?php echo $row['postID']; ?>').click(function() {
// Declare variables
var value = '0';
// Send values to database
$.ajax({
url: 'check.php',
type: 'POST',
data: 'userID=' + userID + '&postID=' + postID + '&value=' + value,
success: function(result) {
$('#Message_<?php echo $row['postID']; ?>').html('').html(result).prependTo('#post_<?php echo $row['postID']; ?>');
}
});
// If post is Liked, change to Disliked
$('#post_<?php echo $row['postID']; ?>').removeClass('like').addClass('dislike');
$('#like_<?php echo $row['postID']; ?>').removeClass('likeimgon').addClass('likeimgoff');
$('#dislike_<?php echo $row['postID']; ?>').removeClass('dislikeimgoff').addClass('dislikeimgon');
// If Hide Disliked checkbox is on, toggle the post
if (showDislikes.attr('checked')) {
$('#post_<?php echo $row['postID']; ?>').toggle();
}
return false;
});
//When Hide Liked checkbox clicked, toggle all Liked posts.
$("input[name*='show_likes']").click(function() {
if ($('#post_<?php echo $row['postID']; ?>').is('.like')) {
$('#post_<?php echo $row['postID']; ?>').toggle();
}
});
//When Hide Disliked checkbox clicked, toggle all Disliked posts.
$("input[name*='show_dislikes']").click(function() {
if ($('#post_<?php echo $row['postID']; ?>').is('.dislike')) {
$('#post_<?php echo $row['postID']; ?>').toggle();
}
});
});
</script>
Here is the code for each post, also sitting in the loop followed by the #Message that appears when the ajax returns the output of check.php and finally closes the loop:
<div id="post_<?php echo $row['postID']; ?>" class="post">
<div id="post_<?php echo $row['postID']; ?>_inside" class="inside">
<div id="like">
<a id="like_<?php echo $row['postID']; ?>" class="likeimgoff" href="#"><span></span></a>
</div>
<div id="dislike">
<a id="dislike_<?php echo $row['postID']; ?>" class="dislikeimgoff" href="#"><span></span></a>
</div>
<b><?php echo $row['Title']; ?></b><br>
<?php echo $row['Description']; ?><br>
</div>
</div>
<div id="Message_<?php echo $row['postID']; ?>" class="reminder"></div>
<?php
}
?>
</div>
Here is check.php:
<?php
mysql_connect("name.database.com", "username", "password") or die(mysql_error());
mysql_select_db("databasename") or die(mysql_error());
if (isset($_POST['userID'])){
$userID = mysql_real_escape_string($_POST['userID']);
}else{
echo "No userID";
}
if (isset($_POST['postID'])){
$postID = mysql_real_escape_string($_POST['postID']);
}else{
echo "No postID";
}
if (isset($_POST['value'])){
$value = mysql_real_escape_string($_POST['value']);
}else{
echo "No value";
}
$query = mysql_query("SELECT * FROM userPosts WHERE userID='$userID' AND postID='$postID';") or die(mysql_error());
if (mysql_num_rows($query) > 0) {
mysql_query("UPDATE userPosts SET value='$value' WHERE userID='$userID' AND postID='$postID';") or die(mysql_error());
} else {
mysql_query("INSERT INTO userPosts (userID, postID, value) VALUES ('$userID', '$postID', '$value') ") or die(mysql_error());
}
echo "UserID: " .$userID. " PostID: " .$postID. " Value: " .$value;
?>
So there you have it. I know it is a lot of code, so please don't shy away and feel free to ask questions!

Answer 1

Sorry, I didn't took the time to read your whole post but usually this type of problems are of a javascript error. If you don't have it, install Firebug on Firefox and see in the firebug console if you have any errors, also look if the ajax call is made and what answer you get.