html - jQuery ajax 呼び出しがサイトで機能しない

Question

ページのコンテンツを AJAX 経由でサイトのメイン コンテンツ ウィンドウに表示したい...少なくともこの方法で、jquery を使用してトグル/非表示/スライドなどのクールな効果を追加できます...問題現在、ajax呼び出しが正しく機能するようになっています。誰かが以下のコードを見直して、どこが間違っていたのか教えてもらえますか? とても有難い。

$( "#serviceOffered" ).click(function(){

        $.ajax({

            url : "ajax/getPage.php",
            type : POST, 
            async : true,   
            success : function(result){
                $( "#contentMain" ).html(result);
            }
        })  
    })

HTMLコード

<ul id="menu" style="font-size:14px; width:170px; margin-top:40px; margin-bottom: 40px;">
    <li><a href="#" id="serviceOffered">Services Offered</a></li>
</ul> <div id="contentMain"></div>

getPage.php

<?php echo "test get page"; ?>