I'm developing a simple voting system for my site with jQuery. When I tested it on my local (own PC server), it all worked fine (on IE, Firefox and Chrome). When I uploaded to my main server, Firefox gave me an error.
Considering that Firefox works fine on my local server, it has to do with the difference in servers...
This is the function:
$("a.vote_up").click(function(){
//get the id
the_id = $(this).attr('id');
// show the spinner
$(this).parent().html("<img src='layout/images/spinner.gif'/>");
//fadeout
$("div#"+the_id).fadeOut("fast");
$.ajax({
type: "POST",
url: "vote.php?action=up&id="+the_id,
success: function(msg)
{
$("span#vp_container"+the_id).html(msg);
$("span#vp_container"+the_id).fadeIn();
//remove the spinner
$("div#"+the_id).remove();
}
});
});
The function basically votes something up. In vote.php is a simple SQL function that adds 1 to a variable. simple.
What happens on my main webserver is that it doesn't remove the spinner. It keeps showing the spinner. OR it keeps on loading, OR the spinner doesn't get removed.
My main server is running on: PHP 5.2.5 Apache 2.0.63 MySQL 5.0.77
My local server is: PHP 5.1.4 Apache 2.0.58 MySQL 5.0.22
I don't know where to start looking. I have no idea what is causing the problem!
It is happening on Firefox 3.0.8.
As both Firefox and jQuery operate on the client side, a different server does not make any difference.
Are the javascript, html and vote.php file all located in the same directory?
Seems like a path problem to me, but that is hard to tell without more information (code).
Edit: The server error log should tell you if it can´t locate some of the files
if you have Firebug in Firefox put
console.log("id=", the_id, "; msg=", msg);
before your
$("span#vp_container"+the_id).html(msg);
so you get to see what the returned msg is.