Unable to append data to table in jquery with mvc4

Question

I am trying to bind data to html table as below.

function showDocumentmetaData(docid) {
        $.ajax(
               {
                   type: "GET",
                   data: { upld_id: docid },
                   dataType: "html",
                   url: '/documentVerification/GetDocumentmetadata',
                   success: function (data) {
                       alert(data);
                       $('#details').html("");
                       $('#details').html(data);
                       alert(data);
                   }
                   , error: function (error) {
                   }
               });
    }
  <table id="details" width="100%" border="0" cellspacing="0" cellpadding="0" class="dataTable" style="text-align:right !important; border-bottom:0"></table>

GetDocumentmetadata will return partial view as below.

@model c3card.DAL.uploadanddocContentviewModel
 @{ 
      string data="";
     int textId;
  }
@foreach (var content in Model.uploadanddocContent)
{
    data += "<tr  class='no-bdr right-align'><td width='30%' scope='col'>" + content.content_Label + "</td>";
    data += "<td width='60%' scope='col'>";
    var cntrolType = content.content_controlType;
    var fieldtype = content.content_fieldType;
    switch (cntrolType)
    {
        case "TextBox":
            if (fieldtype == "varchar")
            {
                data += "<div class='form-box form-box-default'> <input type='text' value='"+content.upld_Value+"' onkeypress='return ValidateAlphaNumeric(event);' id='txtBox" + textId + "' name='" + content.content_Label + "'  class='txtBox form-control validate[required]' maxlength='30' placeholder=''></div></td> ";
            }
            else if (fieldtype == "datetime")
            {
                data += " <div style='width:105%;'><input type='text' value='" + content.upld_Value + "' id='txtBox" + textId + "'  name='" + content.content_Label + "' style='width:90%;margin-right:2px;height:38px;'  class='form-box form-box-default txtBox form-control datepicker validate[required, custom[date,future[now]]]' placeholder=''></div></td> ";
            }
            break;

    }
    textId++;
    data += "</tr>";
}

When i trace the above code variable named data will get data from model without any problem. But in success function data is not appending to details table. In fact it is showing null. i put alert and checked. May i know where i am going wrong? thanks in advance.

When i put below code in partial view it works fine.

<div class="forms">
          @foreach (var content in Model.uploadanddocContent)
          {
              <h1>@content.content_Label</h1>
              switch (content.content_controlType)
              {
                  case "TextBox":
                      if (content.content_fieldType == "varchar")
                      {
                        <input type='text' id="varchar" value=@content.upld_Value onkeypress='return ValidateAlphaNumeric(event);' class='txtBox form-control validate[required]' maxlength='30' placeholder='' />
                      }
                      else if (content.content_fieldType == "datetime")
                      {
                        <input type='text' value=@content.upld_Value  id="varchar" style='width:90%;margin-right:2px;height:38px;' class='form-box form-box-default txtBox form-control datepicker validate[required, custom[date,future[now]]]' placeholder='' />
                      }
                      break;
              }
          }
   </div>
        <input type="button" class="btn btn-primary btn-cons submitGreen" value="Update" onclick='updatemetaData(@Model.upldId)' />
        <input type="button" value="cancel" class="btn btn-primary btn-cons search" onclick='cancel(@Model.upldId)' />

but i want first method to work. Is it possible?

Answer 1

You should append to the tbody of table, no change its html.

Try this:

$('#details').find('tbody').remove();
$('#details').find('tbody').append(data);

Hope it helps.