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

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