CODEWITHSUNDEEP
jqueryasp.net-mvcjson
Lars Holdgaard
Lars Holdgaard

Reputation: 9996

jQuery ajax call is not firing as a json call

I have a jQuery call like this, which gives me a lot of problems:

  $('#submit').click(function () {
        var url = "/home/start";
        var notifyEmail = $("#notify_email").val();
        var receiverPhone = $("#receiver_phone").val();
        var sliderValue = $("#slider").slider("value");

        var dataToSend = '{phoneReceiver:' + receiverPhone + ', emailNotify:' + notifyEmail + ', value:' + sliderValue + '}';
        //var dataToSend = '{"phoneReceiver":"' + receiverPhone + '", "emailNotify":"' + notifyEmail + '", "value:"' + sliderValue + '"}';

        $.ajax({
            type: "POST",
            url: url,
            data: dataToSend,
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                alert('Awesome destination: ' + data.DestinationAddress);

            },
            error: function (date) {
                alert('An occurred while purchasing. Please try again later');
            }
        });
    });

I've tried fiddling with the data formatting (as you can see there are two versions) and with/without dataType and contentType. No luck yet.

I have the following problems:

Because of this, my breakpoint inside the webservice, is never hit.

All the parameters in the data is fine.

In FireBug, I can see my post is: 

{phoneReceiver:fgsdfg, emailNotify:dgsg, value:19}

Or:

{"phoneReceiver":"gfjhfghj", "emailNotify":"fjhfgjhgj", "value:"16"}

Any hints?

Upvotes: 0

Views: 136

Answers (3)

Ben Tidman
Ben Tidman

Reputation: 2139

I was able to get your code working as follows:

    //action
    [HttpPost]
    public void TestAction(string phoneReceiver, string emailNotify, int value)
    {
        //all variables set here
    }


    //in view i have a button id = submit
    $('#submit').click(function () {
            var dataToSend = '{phoneReceiver: "blah", emailNotify:"[email protected]", value: 1}';

            $.ajax({
                type: "POST",
                url: '/TestController/TestAction',
                data: dataToSend,
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    alert('Awesome destination: ' + data.DestinationAddress);

                },
                error: function (date) {
                    alert('An occurred while purchasing. Please try again later');
                }
            });
    });

Upvotes: 1

frictionlesspulley
frictionlesspulley

Reputation: 12438

If you are sending a JSON back try creating the dataToSend object as 

    var dataToSend = {
           phoneReceiver: $("#receiver_phone").val(),
           emailNotify :$("#notify_email").val()
           value: $("#slider").slider("value")
    };

Upvotes: 1

MG_Bautista
MG_Bautista

Reputation: 2663

Try this...

$.ajax({
        type: "POST",
        url: url,
        data: { phoneReceiver: receiverPhone, emailNotify: notifyEmail,  value: sliderValue},
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            alert('Awesome destination: ' + data.DestinationAddress);

        },
        error: function (date) {
            alert('An occurred while purchasing. Please try again later');
        }
    });

Greetings.

Upvotes: 1

Related Questions