Cannot reach my controller via Ajax

Question

I'm trying to use Ajax for the first time.

The issue I am getting an error: uncaught referenceError: Data is not defined which I can see in Firebug

 <script>
        $(function () {

            var form = $("#ringMeBack");

            form.submit(function () {

                var emailData = {
                    RingMeBackName: $("#ringMeBackName").val(),
                    RingMeBackNumber: $("#ringMeBackNumber").val()
                    //, RingMeBackTime: $("#ringMeBackTime").val()
                };

                $.ajax({
                    url: "/Home/RingMeBack",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "text",
                    data: JSON.stringify(emailData),   //THIS IS THE ERROR
                    success: function (response) {
                        alert(response);
                    },
                    error: function () {
                        alert("There was an error... please try again.");
                    }
                });

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

 @using (Html.BeginForm("RingMeBack", "Home", FormMethod.Post, new { id = "ringMeBack" }))
        {
            <p>
                <input type="text" id="ringMeBackName" title="Optional, but it's nice to know who we are talking to." placeholder="Your name" />
            </p>
            <p>
                <input type="text" id="ringMeBackNumber" title="We need to know the best number to call you on." placeholder="Your phone number" />
            </p>
            <p>
                When is a good time to call you?
            </p>
            <p>
                <select title="When is the best time to call you?" id="ringMeBackTime">
                    <!--don't show if it's after 2pm -->
                    @if (DateTime.Now.Hour < 14)
                    {
                        <option value="asap">Today, as soon as possible</option>
                    }
                    <option value="am" id="ringBackMorning" /><!--values created in Javascript-->
                    <option value="pm" id="ringBackAfternoon" /><!--values created in Javascript-->
                </select>
            </p>

            <p>
                <input type="submit" value="Request call back" title="Send and we'll call you back" class="redButton"/>
            </p>

            @ViewBag.Status
        }

If I update the data: JSON.stringify(emailData) to data: emailData.serialize() , it makes no difference.

As per the link I cite, if I remove the line totally ( data: emailData.serialize() ), then it hits my controller but doesn't pass any values...

I have no idea how to resolve this.

If it helps, my controller is simply

    [HttpPost]
    public void RingMeBack(string RingMeBackName, string RingMeBackNumber)
    {
        //break point set just to see if hits this
        string s = "";
    }

Answer 1

As suggested in the comments, jQuery should do the conversion from the object to JSON for you, so you can just set the data parameter to data: emailData . The reason you're then hitting the error function is because the controller isn't returning anything -- you're not seeing a successful ajax transaction.

Answer 2

The answer was due to a silly mistake

RingMeBackName: $("#ringMeBackName").val(),
RingMeBackNumber: $("#ringMeBackNumber").val()

Should have been

'RingMeBackName': $("#ringMeBackName").val(),
'RingMeBackNumber': $("#ringMeBackNumber").val()

Note the single quote marks.

JSON.stringify(theObject) IS required