I've got a search box on my page that updates data in a datatable. Here is the code:
var baseURL = "/api/Reservations?CustomerId=";
$("#btnSearch").on("click",
function () {
var custEmail = $("#txtEmail").val();
var customer = $.ajax(
{
url: "/api/Customers?email=" + custEmail,
data: "",
success: function (customer) {
var ajaxurl = baseURL + customer.id;
var ajaxobj = {
url: ajaxurl,
dataSrc: ""
};
dt.ajax.url(ajaxobj).load();
dt.clear().draw();
},
error: function () {
bootbox.alert("Doesn't look like you've made any bookings.");
}
});
});
When I load the page, enter an email address in my searchbox and click the button, everything works perfectly. It searches the customer, retrieves the bookings and populates the table.
The request it makes to the reservations API looks like this:
http://localhost:55601/api/Reservations?CustomerId=6&_=1522178504857
(I'm not sure how or why &_=1522178504857 gets appended, but it doesn't seem to be affecting it so I'll come back to that...)
However, if I click the search button a second time, the customer is still retrieved correctly, however request to the reservations API looks like this:
http://localhost:55601/Reservations/[object%20Object]?_=1522178504858
(URLs in both cases I've retrieved from developer tools).
Just to show what happens:
Why? What have I done wrong?
EDIT: updated code formatting using Markdown