MVC partial view update from ajax success - ajax

Question

On the main page in the view the user selects a project and that selection fills up a partial view (call it first partial) with data. In this partial view the user can also select an item which provides an editing partial view under below the previous one. Here a new item can be added, updated or deleted.
The question is: when a new item added the first partial view should be updated. The method how I am trying to achieve it is like this:
function addBottle() {
var code = $("#Code").val();
var desc = $("#Description").val();
var id = $("#ProjectId").val();
$.ajax({
url: "#Url.Action("AddBottleType", "Managers")",
data: { code: code, desc: desc, id: id },
type: "POST",
datatype: "text",
success: function (data) {
if (typeof data == "undefined") {
alert("Something went wrong. Sorry!");
}
if (data.Success) {
$.alert(data.Data, "Success!");
$.ajax({
url: "#Url.Action("BottleTypes", "Managers")",
data: { projectId: id },
type: "GET",
datatype: "text",
});
} else {
$.alert(data.Data, "Warning!");
}
}
});
};
This gives me the data in the controller, but the view is not updated. Probably this is not the best way, I am open the suggestions, solutions.
I've also done my part, google and stackoverflow is my friend, but none of the solutions worked.

Answer 1

You need to load it into your div. Something like this. Check for success in your controller action so you need not do Success() in the front end:
function addBottle() {
var code = $("#Code").val();
var desc = $("#Description").val();
var id = $("#ProjectId").val();
$.ajax({
url: "#Url.Action("AddBottleType", "Managers")",
data: { code: code, desc: desc, id: id },
type: "POST",
datatype: "text",
success: function (data) {
if (typeof data == "undefined") {
alert("Something went wrong. Sorry!");
}
if (data.Success) {
$.alert(data.Data, "Success!");
$("#bottleTypes").load("/Managers/BottleTypes", { projectId: id });
} else {
$.alert(data.Data, "Warning!");
}
}
});
};