jQuery and Back-Tracked URL's?

[Sanit]

I have this bit of code that I am using in a project which I got working on a test webpage, and then when I tried to implement it on the real webpage, it all works, except for the jQuery effects.

Here is the code:

$(function(){
		$("a.vote_up").click(function(){
		//get the id
		the_id = $(this).attr('id');

		// show the spinner
		$(this).parent().html("<img src='../../images/spinner.gif'/>");

		//fadeout the vote-count
		$("span#votes_count"+the_id).fadeOut("fast");

		//the main ajax request
			$.ajax({
				type: "POST",
				data: "action=vote_up&id="+$(this).attr("id"),
				url: "../../votes.php",
				success: function(msg)
				{
					$("span#votes_count"+the_id).html(msg);
					//fadein the vote count
					$("span#votes_count"+the_id).fadeIn();
					//remove the spinner
					$("span#vote_buttons"+the_id).remove();
				}
			});
		});
        });

What I have are stories which are on the home page, and then when you click on a link, it mod_rewrites the URL to something along the lines of 'www.something.com/example/this-is-the-story-title/' and then on that page I have that javascript.
What the javascript does is sends the info to votes.php and then votes.php processes that data and submits it to the database and then returns either 'Successful' or 'Failed' at the end of the file.

On my test page, everything was working, but on the real page, the effects don't work (i.e. The graphic of the spinner keeps spinning, and the old text doesn't fade out and new text doesn't fade in.)

I think it may have something to do with the '../../votes.php' part, as in the test page, it was only 'votes.php' but I may be wrong.

Any idea's guys?
Cheers,
Colm

[ShawnCplus]

Try using absolute paths(start with /, as opposed to relative that use ../)

[Sanit]

Nope, that didn't do it. I tried it with the full path to the votes.php file too. Still the same result.

[ShawnCplus]

If you're using Firefox get Firebug and see if you're getting any errors

[Sanit]

Already using it and its telling me its fine.

I'm beginning to suspect its not the URL's, but everything is exactly the same as the test files I used, which worked, and still work fine..

[ShawnCplus]

Make sure you check the Net tab and you're not getting any 404s. If that's not the case then in the Console tab check to see what the AJAX call is actually returning by looking at the Response sub-tab on the Request once its sent

[Sanit]

I checked and it is returning what it is meant to be returning (i.e. 'Successful').

Thanks for all this help by the way.

[ShawnCplus]

If that's the case then it means your success function is failing somehow. Do an alert() at the top of the success function to make sure its being called and do any other debugging you see fit to make sure that the actions in that function are actually happening

[Sanit]

Well, all the actions are working in the success function and its reaching the function itself is fine too.

It seems that the jQuery functions (fadein(), remove(), etc..) aren't doing anything. Know any reason that might happen?

[ShawnCplus]

Make sure that $("span#votes_count"+the_id) and $("span#votes_buttons"+the_id) are actually returning elements by using console.log from FireBug

// in your success function
console.log($("span#votes_count"+the_id));// do the same for votes_buttons

As a side note, you don't have to specify span in front of the #. An ID is supposed to be absolutely unique, there should never be more than one so having extra identifiers is unnecessary.

[Sanit]

This is what Console.log is telling me:

Object length=0 prevObject=Object context=document       <-- votes_count
Object length=0 prevObject=Object context=document       <-- vote_bottons

I don't know how to interpret that..

[ShawnCplus]

This is what Console.log is telling me:

Object length=0 prevObject=Object context=document       <-- votes_count
Object length=0 prevObject=Object context=document       <-- vote_bottons

I don't know how to interpret that..

length=0 means it isn't returning an element. Right click on each of those, if it doesn't have "Inspect in HTML Tab" then the element doesn't exist in the dom, make sure you actually have something in the HTML that would match "#votes_count"+the_id

[Sanit]

Working like a charm now.

I did what you said and double checked the HTML and I had something that should have matched '"#votes_count"+the_id' but didn't work for some reason, so I tried a the id variable straight from my database and it worked.

Thanks a lot for all your help. You've been very patient.
Cheers,
Colm