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
– iCollect.it Ltd, Commented Aug 1, 2014 at 16:36
return data.html;? inside the ajax function? - stackoverflow.com/questions/5316697/… — wirey00
– wirey00, Commented Aug 1, 2014 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
– DazManCat, Commented Aug 1, 2014 at 23:55

Ehsan Sajjad · Accepted Answer · 2014-08-01 16:42:55Z

1

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


   }

});

edited Aug 1, 2014 at 16:42

answered Aug 1, 2014 at 16:37

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PeterKA · Accepted Answer · 2014-08-04 03:57:11Z

1

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

edited Aug 4, 2014 at 3:57

answered Aug 1, 2014 at 16:45

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related