ASP.NET Programmatically inserting table rows from AJAX

Question

I have a simple HTML table within a cshtml page. It is basically a single column, where I want to programmatically insert rows from the result of an ajax call.

        <table class="table" id="notestedtable">
        <tr>
            <th>
                Not Tested
            </th>
        </tr>
        <tr>
            <td>
                Unit#1 
            </td>
        </tr>
        </table>

I use the document.onload = NotTested("Site 001", "17/06/2015"); to call the function which then executes the ajax.

function NotTested(SiteId,TestDate) {

    $.ajax({
        url: '/Home/NotTested',
        type: 'POST',
        contentType: 'application/json;',
        data: JSON.stringify({
            siteid: SiteId, testdate: TestDate
        }),
        success: function (result) {
            for (var i = 0; i < result.Tubs.length; i++) {

                alert(result.Tubs);
            }
        }
    })
}

The returned Tubs is a string[] where Tubs[0] = "Tub 1"; Tubs[1] = "Tub 2" ... and so on. I want each of the Tub[] to form a row in my table.

This is the C# in the controller:

       [HttpPost] // can be HttpGet
    public ActionResult NotTested(string siteid, string testdate)
    {
        int i = 0;
        //this could be populated first by reading for this "site" how many tubs to be expected
        string[] UnTested = new string[8];

        SqlConnection conn = new SqlConnection(@"Server=****;Database=****;User Id=****;Password=****;");
        SqlCommand cmd = new SqlCommand("select * from TubsNotTested(@siteid,@testdate)", conn);

        cmd.Parameters.AddWithValue("@siteid",siteid);
        cmd.Parameters.AddWithValue("@testdate", testdate);

        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        da.Fill(dt);

        for(i=0; i<dt.Rows.Count; i++)
        {
            UnTested[i] = dt.Rows[i][0].ToString();
        }

        return Json(new
        {
            Tubs = UnTested,
        }, JsonRequestBehavior.AllowGet);
    }

score 3 · Accepted Answer · 2015-06-21 11:48:40Z

3

Modify the ajax success callback to

success: function (result) {
  $.each(result.Tubs, function(index, item) {
    var cell = $('<td></td>').text(item); // create the table cell
    var row = $('<tr></tr>').append(cell); // create the table row
    $('#notestedtable').append(row); // append the row to the table
  });
}

Side note: It would be better to include var table=$('#notestedtable'); at the top of your script to cache the element and then use table.append(row); so avoid traversing the DOM again.

edited Jun 21, 2015 at 11:48

answered Jun 21, 2015 at 10:24

user3559349

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

9 Comments

Manjar Over a year ago

This should work, however you should use document.ready instead of document.onload, better using the $(function() { .... notation

tomdertech Over a year ago

I have implemented this and put an alert(item) under $('#notestedtable').append(row); and I get Tub 6,,,,,,, but nothing displayed in the table?

user3559349 Over a year ago

What does console.log($('#notestedtable').length); return?

user3559349 Over a year ago

Should be working fine. Are you sure result is and array? I'll create a fiddle for you shortly

tomdertech Over a year ago

@StephenMuecke - I have edited my original post to show the C# code behind the AJAX call ...

|

Ala · Accepted Answer · 2015-06-21 10:23:43Z

1

Try the following:

var table = document.getElementById("notestedtable");

    for (var i = 0; i < result.Tubs.length; i++) {

        var row = table.insertRow(0);
        var cell1 = row.insertCell(0);
        cell.innerHTML = result.Tubs[i];
        }

answered Jun 21, 2015 at 10:23

Ala

1,5233 gold badges20 silver badges37 bronze badges

Collectives™ on Stack Overflow

ASP.NET Programmatically inserting table rows from AJAX

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related