$(".get_receipts").on("click", function () {
    $("#p2").show();
    var Store = $("#Store").val();
    var From = $("#FromDate").val();
    var To = $("#ToDate").val();

    var Invoice = { "Store": Store, "From": From, "To": To };

    $.ajax({
        url: "/Invoice/GetReceipts",
        data: Invoice,
        dataType: 'json',
        type: 'POST',
        error: function () {
            $("#p2").hide();
            showMessage("Get Receipts", "There was a problem getting receipts for the invoice.");
        },
        success: function (data) {
            $("#p2").hide();
            /* loop through the JSON data.Receipts and add the data there as
                rows to table#data.
                Receipt properties are:
                    Number,
                    Date,
                    Value
            */
            console.log(data);
            data.Receipts.forEach(function () {
                $("table#data tbody").append('<tr><td class="mdl-data-table__cell--non-numeric">' + this.ReceiptNumber + ',</td><td class="mdl-data-table__cell--non-numeric">' + this.ReceiptDate + '</td><td class="mdl-data-table__cell--non-numeric">' + this.Value+ '</td></tr>');
            })
            $("#InvoiceTotal").append(data.InvoiceTotal);
            $("#Results").show();
        }
    });
});

/* RETURNS THE FOLLOWING (pasted from console)
Object {Receipts: Array[6], InvoiceTotal: 37}
InvoiceTotal
:
37
Receipts
:
Array[6]
0
:
Object
ContentEncoding
:
null
ContentType
:
null
Data
:
Object
Value
:
2.6
Id
:
3
ReceiptDate
:
"2015/06/08 12:00:00 AM"
ReceiptNumber
:
"0209"
__proto__
:
Object
JsonRequestBehavior
:
1
MaxJsonLength
:
null
RecursionLimit
:
null
__proto__
:
Object