jquery ajax reloading html of entire page

Question

I'm trying to load a simple success or failure message from the server upon submission. I am reaching success on the Ajax call. However $('#some_div').html(data) is having the whole originating page being returned to it. Is there something I'm missing?

$(document).ready(function() {
        $('a.favorite').click(function() {
            var song_id = $(this).attr("id");
            $.ajax({
                url: 'ajax_favorite.php?song_id=' + song_id,
                success: function(data, textStatus, req) {
                    $('#add_to_favorite_'+song_id).html(data);
                },
                error: function(req) { // req = XMLHttpRequest object
                    alert("could not reach the server");
                }
            });
            return false;
        });
    });

update: the code on the ajax_favorite.php?song_id=745 page is

<?php 
echo "blah blah";
?>

Answer 1

after the success of the ajax call,the data variable should have whatever you are returning from the server page( ajax_favoriter.php). So you may need to check what it is returning from that page.You can check that by directly going to ajax_favorite.php?song_id=3 page in a browser(type this url in the browser).What you are seeing now in the browser would be the html markup you will see in the div when u load that using the html() method,

Well i am confused with "Whole originating page" .you mean the page where you are calling from ?

Answer 2

If I'm understanding correctly, you're saying the html page is returned in your 'data'?

Pass the dataType to your request (http://api.jquery.com/jQuery.ajax/), for example json, and make sure your ajax_favorite.php?song_id= page returns the json format.

Otherwise the whole html is returned.

Answer 3

Try navigating directly to ajax_favorite.php?song_id=745 and check if that returns blah blah, probably there is some misconfiguration on server redirects that is redirecting the call to index.php.

Answer 4

All the comments helped in my search for the answer to this problem. It turns out that I was using .htaccess and passing information back and forth to the server through the GET strings. This caused all manner of problems with the pathing in the jQuery code. I have since accounted for this in my own back-end code. For others who are viewing this question. If you are using jQuery.get(). Make sure that your paths are correct and accounted for if used in combination with .htaccess trickery.

Thanks all for your help