I am in the process of creating a website where users can customize their own cakes. Each cake comes with a base price and various options that may incur additional charges. These additional prices are stored in the database and can be retrieved using the feature id.
My goal is to develop a function that dynamically updates the total price as users select different options. The options are presented in dropdown menus and checkbox lists, displaying the option text while storing the feature id as the value. I have implemented a JavaScript function to retrieve the selected item values.
My approach involves invoking the "additionalPrice" method whenever a dropdown menu or checkbox list is changed. This method queries the database for the corresponding feature ids and calculates the extra cost. However, I am encountering an issue where PageMethods appears undefined. It does not auto-populate in VS2012 and is displayed in black instead of light blue. Despite following similar cases, I cannot seem to identify any errors in 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;
}
The "additionalPrice" function will incorporate more logic once this initial hurdle is cleared. As it stands, changing a dropdown list triggers an alert displaying 'undefined'.
UPDATE: Following the resolution of the first issue, I have encountered another challenge. I am attempting to update a label with the final price returned from the "additionalPrice" method within the onSuccess function of PageMethods. The label is located at the top of the page -
<asp:Label ID="lblPrice" runat="server" />
Below are the attempts I have made within the onSuccess function to update the label, none of which seem to affect the display.
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;
}