JQuery call to MVC controller return HTML to inject into table row

Question

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?

What does your partial view look like? What do you get when you call that partial view directly from a browser? — iCollect.it Ltd, Aug 01 '14 at 16:36
`return data.html;`? inside the ajax function? - http://stackoverflow.com/questions/5316697/jquery-return-data-after-ajax-call-success — wirey00, Aug 01 '14 at 16:37
The partial view is returned correctly from the method call. I can see the expected results in the Chrome developer toolbar network tab. — DazManCat, Aug 01 '14 at 23:55

Ehsan Sajjad · Accepted Answer · 2014-08-01T16:42:55.943

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>");
     }
     );


   }

});

PeterKA · Answer 2 · 2014-08-04T03:57:11.370

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>");
});

JQuery call to MVC controller return HTML to inject into table row

2 Answers2