CODEWITHSUNDEEP
jqueryasp.net-mvc
DazManCat
DazManCat

Reputation: 3630

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

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

Answers (2)

PeterKA
PeterKA

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

Ehsan Sajjad
Ehsan Sajjad

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

Related Questions