Reputation: 3630
I have a webgrid which contains data.
Each item of data potentially has multiple variants. Apon clicking on an icon on the row I fire an ajax call to get the variants for the selected row then sneakily insert them into the webgrid row.
This was working whilst injecting static test data into the row however I have setup a partial view which renders the content and I wish to return that via jquery and simply insert that rendered html.
JS
$(document).on("click", ".ShowVariants", function (e) {
if ($(this).hasClass("Opened")) {
$(this).removeClass("Opened");
var tr = $(this).closest("tr").html();
var dd = $(this).closest("table").parent().html();
$(this).closest("table").parent().parent().html(tr)
}
else {
var table = "";
$(this).addClass("Opened");
table = $.get("/Release/GetVariants", { "releaseId": $(this).attr("data-id") },
function (data) {
return data.html;
});
var tr = $(this).closest("tr").html();
$(this).closest("tr").html("<td colspan='7' style='/*padding-left:5px*/'><table><tr>" + tr + "</tr><tr><td colspan='7'>" + table + "</td></tr></table></td>");
}
});
Controller method
public ActionResult GetVariants(int releaseId){
var variants = releaseService.GetVariants(releaseId).Select(x => new Models.Release{
Title = x.Title,
Price = x.Price,
Publisher = x.Publisher,
ExpectedShippingDate = x.ExpectedShippingDate,
ReleaseId = x.ReleaseId,
IssueNumber = x.IssueNumber,
URL = x.URL,
HasVariants = x.HasVariants
});
return PartialView("_Variants", variants.ToList());
}
All I seem to get is [object Object]
Can anyone spot what I am doing wrong?
Upvotes: 0
Views: 878
Reputation: 24648
You need to do your manipulation in the ajax callback; that's when you've gotten the result back from the server:
var that = $(this);
$.get("/Release/GetVariants", { "releaseId": $(this).attr("data-id") },function (data) {
var table = data;
var tr = that.closest("tr").html();
that.closest("tr").html("<td colspan='7' style='/*padding-left:5px*/'><table><tr>" + tr + "</tr><tr><td colspan='7'>" + table + "</td></tr></table></td>");
});
Upvotes: 1
Reputation: 62498
instead of return, do it this way:
$(document).on("click", ".ShowVariants", function (e) {
var clickedElement = this;
if ($(this).hasClass("Opened")) {
$(this).removeClass("Opened");
var tr = $(this).closest("tr").html();
var dd = $(this).closest("table").parent().html();
$(this).closest("table").parent().parent().html(tr)
}
else {
$.get("/Release/GetVariants",
{
"releaseId": $(this).attr("data-id")
},
function (data)
{
var tr = $(clickedElement ).closest("tr").html();
$(clickedElement ).closest("tr").html("<td colspan='7' style='/*padding-left:5px*/'><table><tr>" + tr + "</tr><tr><td colspan='7'>" + data+ "</td></tr></table></td>");
}
);
}
});
Upvotes: 1