Reputation: 798
I'm trying to render a partial view in a container div using JQuery Ajax. Here's my ajax-call:
var href = {
href: $(this).attr("href").substr(1)
}
var container = $(".customer-main-content-container");
$.ajax({
url: "@Url.Action(" CustomerMenuSelection ")",
type: "POST",
dataType: "html",
contentType: "application/json",
data: JSON.stringify(href),
error: function (jqXHR, textStatus, errorThrown) {
alert("ERROR: " + errorThrown.text());
},
success: function (result) {
container.empty();
container.html(result).show();
}
});
Here's my Action code:
public ActionResult CustomerMenuSelection(string href)
{
var user = GetCurrentUser();
var tempSensorTree = _prtgClient.GetPrtgSensorTree(user.TempPrtgGroupId.ToString());
var tempDevices = tempSensorTree.Sensortree.Nodes.Group.Device;
return PartialView("_Monitor", tempDevices);
}
I've followed the call through my Action and found that it indeed sends all the correct data back to the view. However, my ajax-call is not running either error- or success-callback and I have no idea why. This is happening when clicking a menu-item, and this same ajax-call works for all other menu-items except this one. I can't find any differences between the pages. No errors are thrown, the data that I populate the view with is correct. My ajax-call just stops.
So in short, why is my callbacks not triggered?
Grateful for any assistance! Thanks in advance Martin Johansson
Upvotes: 7
Views: 1327
Reputation: 10694
This issue might be occurring because of dataType
you are expecting from server. Try changing it to "html"
as you are returning partial view from server.
dataType: "html"
Upvotes: 1