PageMethods not calling function from codebehind - undefined

Question

I'm building a site to build your own cake. Each cake has a base price, and certain options. Some options (strawberry filling for example) add an additional price to the cake. This price is in the database, found by the feature id.

I'm trying to write a function that will update the price whenever you pick some new option. To select features, I have dropdown boxes and checkboxlists. They display the text of the option, but the value of the option is the feature id. I have a JS function to go through and get the values of each selected item.

My idea is to call additionalPrice whenever a ddl/cbl is changed, which will query the database with the feature ids, and add the extra price. The problem is that PageMethods is undefined. It wont autofill when I'm typing in in VS2012, and is colored black instead of light blue. I've read other problems like this, and I'm pretty sure i'm doing everything right. Here's my code...

<asp:ScriptManager ID="ScriptManager1" 
EnablePageMethods="true" 
EnablePartialRendering="true"  runat="server" />

<script>
$('.featureDropDown').change(function (a) {
            //var price = $.ajax({ url: 'ajax/totalproductprice.ashx', async: false }).responseText;
            var price = PageMethods.additionalPrice();
            alert(price);
</script>

Codebehind...

 [WebMethod] public static int additionalPrice()
    {
        return 77; 
    }

additionalPrice will have more logic once I get this to work. With this code, when you change a dropdownlist, it alerts 'undefined'.

EDIT: Now that first question has been solved, I have another one. I am trying to set the label that holds the final price to the value returned from additionalPrice. I'm trying to do this in the onSuccess method in PageMethods. I just have a generic label at the top of the page -

<asp:Label ID="lblPrice" runat="server" />

Here is my onSuccess, and the different things I have tried. None of them do anything to the label.

function onSuccess(result) {
            alert(result + "worked");
            $('.lblPrice').attr("text", result);
            $('.lblPrice').attr('text', function () {
                $(this).attr('text', result);
            })
            $('.lblPrice').text(result);
            document.getElementById('lblPrice').value = result;
            document.all('lblPrice').innerHTML = result;
        }

Answer 1

when using ASP.NET AJAX PageMethods there's a success and failure callback function that you can subscribe to by passing two additional parameters to the call. In this case you'll want to use

$(function () {
    $('.featureDropDown').change(function (a) {
        //var price = $.ajax({ url: 'ajax/totalproductprice.ashx', async: false }).responseText;
        PageMethods.additionalPrice(onSuccess, onFailure);
    });

    function onSuccess(result) {
        alert(result);
    }

    function onFailure(error) {
        alert(error);
    }
});

Answer 2

To call web methods from JavaScript make sure you are calling using the <System.Web.Script.Services.ScriptService()> class where your web method is located. Also if you decide to add you web method's to a sperate file, which for scalability up might want to do, you will need to add the reference to your script manager.

<asp:ScriptManager ID="scriptManager" runat="server">
    <Services>
        <asp:ServiceReference Path="~/WebServices/SomeWebServices.asmx" />
    </Services>
</asp:ScriptManager> 

Yes, and then the as pointed out earlier. If it still give s you problems let me know.

$(function () {
    $('.featureDropDown').change(function (a) {
        //var price = $.ajax({ url: 'ajax/totalproductprice.ashx', async: false }).responseText;
        PageMethods.additionalPrice(onSuccess, onFailure);
    });

    function onSuccess(result) {
        alert(result);
    }

    function onFailure(error) {
        alert(error);
    }
});