Ajax call not being made in jQuery

Question

I have this jQuery code that runs on form submit:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

<script type="text/javascript" >
$(function()
{
    $("input[type=submit]").click(function()
    {
        var name = $("#problem_name").val();
        var problem_blurb = $("#problem_blurb").val();

        var dataString = 'problem_name='+ name + '&problem_blurb=' + problem_blurb;

        if(name=='' || problem_blurb == '')
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeOut(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "problems/add_problem.php",
                data: dataString,
                success: function()
                {
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                }
            });
        }

        return false;
    });
});
</script>

And in the directory named /problems/ I have a php file add_problem.php and that file simply has this so I can see in the logs that it is being called:

<?php
echo ".......in problem";
?>

But this never gets written to the logs. Is there something wrong with my ajax call? I know that the js gets to the ajax part fine because I had some alert statements there that I took out.

Answer 1

If the file that contains this javascript is not located in the same directory that contains problems/ you should change:

 url: "problems/add_problem.php",

to

 url: "/problems/add_problem.php",