jquery ajax data result dont show

Question

My js file below;

$('#DetailMaxGuest').change(function () {

    var result = $('#DetailMaxGuest option:selected').val();
    $('#DetailMaxGuest option:selected').val(result).attr('selected', 'selected');
    var resultparse = parseInt(result);
    var resultid = $('#resultid').val();
    var dateBegin = $('#DetailDatepicker').val();
    var dateEnd = $('#DetailDatepickerEnd').val();
    var price = $('#DetailRates option:first').val();
    var resultm = $('#DetailMaxGuest option:selected').val();
    if (resultm != "Select One") {
        kisi = parseInt(resultm);
    } else {
        kisi = null;
    }
    var message = {
        'resultid': resultid,
        'data': resultparse,
        'dateBegin': dateBegin,
        'dateEnd': dateEnd,
        'price': price
    };
    $("#LoadingImage").show();
    $.ajax({

        type: 'GET',
        url: '/Product/GetMaxGuest',
        data: message,
        dataType: 'json',
        success: function (data) {
            if (data.error) {

                $("#LoadingImage").hide();
                $('#reservation-result').html(data.msg).fadeIn(2000);
                $('#btn_reservation').hide();
                $('#btn_liste').show();
                } if (data.success) {
                $("#LoadingImage").hide();
                if (kisi != null) {
                    $('#PriceDetails').show();
                } else {
                    $('#PriceDetails').hide();
                }
                $('#lblTotalPrice').html(data.toplam).fadeIn(2000);
                $('#lblDeposit').html(data.deposit).fadeIn(2000);
                $('#lblTotal').html(data.totalsum).fadeIn(2000);
                $('#btn_reservation').show();
                $('#btn_liste').hide();

            }
        },
        complete: function () {
            $('#reservation-result').fadeOut(5000);
        }


    });

});

and my controller return message;

deposit: "100 $" msg: "" success: true toplam: "1.220 $" totalsum: "1.320 $"

But I cant see any data on my page. js working but I cant see datas.

my razor;

<div id="reservation-result" style="width: 100%; height: 80px; display: inline-block; text-align: left; font-size:12px; font-weight: bold; color:brown;">
                                <table id="PriceDetails" style="display: none;">
                                    <tr>
                                        <td style="width: 75%;">Toplam Fiyat</td>
                                        <td style="width: 25%; text-align: right;"><div id="TotalPrice">@Html.Label("lblTotalPrice",new{id="lblTotalPrice", name="TotalPrice"})</div></td>

                                    </tr>
                                    <tr>
                                        <td>Depozito</td>
                                        <td style="width: 25%; text-align: right;">
                                            <div id="Deposit">@Html.Label("Deposit",new{id="lblDeposit", name="Deposit"})</div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Genel Toplam</td>
                                        <td style="width: 25%; text-align: right;">
                                            <div id="Total">@Html.Label("Total",new{id="lblTotal", name="GrandTotal"})</div>
                                        </td>
                                    </tr>
                                </table>
                                <div id="LoadingImage" style="display: none;">
                                    <img src="@Url.Content("~/Content/images/prettyPhoto/dark_rounded/loader.gif")" alt="Loading"/>
                                </div>
                            </div>
                        <input id="btn_reservation" class="gradient-button center" type="submit" style="width: 230px;" value="Rezervasyon yap" />
         }
                        <input id="btn_liste" class="gradient-button center" type="submit" style="width: 230px; display: none;" value="Listeye Dön" />

Please helpppp :) Thanks a lot.

Answer 1

Basically You have no valid JSON Array returning. In your case the data is returning in HTML Format and you need to return data in JSON Format.

Use JSON Array like this :

 [{
        "deposit": "100 $",
        "msg": "",
        "success": true,
        "toplam": "1.220 $",
        "totalsum": "1.320 $"
    }]

or JSON Object :

{
    "deposit": "100 $",
    "msg": "",
    "success": true,
    "toplam": "1.220 $",
    "totalsum": "1.320 $"
}

Thanks hope this will help you.

Answer 2

You have couple of issues in your code,

1. What you have return in the controller is not a valid JSON. change your controller to return valid JSON data. It should looks like following

{
    "deposit": "100 $",
    "msg": "",
    "success": true,
    "toplam": "1.220 $",
    "totalsum": "1.320 $"
}

1. To check like if (data.error) You have to return it from the JSON. but in your JSON no error parameter.

Answer 3

in your code i see this statement:

if (data.error) {

Should that not be:

if (!data.error) {