Question

My scenario is that I have some HTML Dropdowns which fire jQuery on change to dynamically populate a table of returned JSON results.

[HttpPost]
    public JsonResult GetTableInfo(Guid schemeId, Guid tableTypeId)
    {
        var tables = this.tableModel.GetTableInformationList(schemeId, tableTypeId);
        var formattedData = from t in tables
                            select new
                            {
                                TableId = t.TableId.ToString(),
                                TableName = t.TableName
                            };

        return Json(formattedData.ToList(), "text/json");
    }

The dynamic table lists filtered tables, each row dispaying the table name and a form to allow the table to be deleted. This is generated from the JSON Reults within a jQuery function “OnSuccess”

function OnSuccess(data) {
    var scheme = $('#schemesList').val();
    var tableType = $('#tableTypesList').val();
    var requestedBy = $('#requestedBy').val();

    var targetId = $('#tablesList');
    targetId.empty();
    targetId.css('color', 'black');
    if (data.length < 1) {
        targetId.append('<tr><td><strong>No tables match the selection</strong></td></tr>').css('color', 'Red');};


    for (var i = 0; i < data.length; i++) {
        var name = data[i].TableName;
        var id = data[i].TableId;
        targetId.append('<tr><td>' + name + '</td><td class="buttoncol">' +
                        '<form action="/DeleteTable" data-ajax="true" data-ajax-mode="replace" ' +
                        'data-ajax-success="OnSuccess" data-ajax-failure="OnFailure" data-ajax-update="#tablesList" ' +
                        'data-ajax-url="/GetTableInfo" method="post"> ' +
                        '<input id="tableId" name="tableId" type="hidden" value="' + id + '" />' +
                        '<input id="schemeId" name="schemeId" type="hidden" value="' + scheme + '" /> ' +
                        '<input id="tableTypeId" name="tableTypeId" type="hidden" value="' + tableType + '" /> ' +
                        '<input id="requestedBy" name="requestedBy" type="hidden" value="' + requestedBy + '" /> ' +
                        '<input type="submit" value="Delete table" id="deleteButton" /></form></td></tr>');
        if (requestedBy.length <= 0) {
            $('form input#deleteButton').attr('disabled', true);
        };
    }        
};

e.g.

My table 1 | Delete table button

My table 2 | Delete table button

My table 3 | Delete table button

…

So now what I want to be able to do is to click the delete button which posts the rows form and then once the table has been deleted get a refreshed list of the tables minus the deleted item. To achive this my DeleteTable action executesthe deletion then calls the GetTableInfo which is returns a JSONResult (this is the call that initially poplates the table).
The deletion form is setup as unobtrusive ajax such that it recalls the OnSuccess function to repopulate the table; the problem is second time round my JSON string is returned but is not being built into a table again.

I’m confused, can anyone help? Also, am I even going about this the right way? I defaulted to jquery because I couldn’t work out how to dynamically create the table contents with a Ajax.BeginForm using MVC3 tags – would appreciate any advice.

Answer 1

You don’t need a form tag inside the row. Just post what you want using jquery ajax:

for (var i = 0; i < data.length; i++) {
        var name = data[i].TableName;
        var id = data[i].TableId;
        targetId.append('<tr data-id=\'' + id + \'' ><td>' + name + '</td><td class="buttoncol">' +
                        '<input id="tableId" name="tableId" type="hidden" value="' + id + '" />' +
                        '<input id="schemeId" name="schemeId" type="hidden" value="' + scheme + '" /> ' +
                        '<input id="tableTypeId" name="tableTypeId" type="hidden" value="' + tableType + '" /> ' +
                        '<input id="requestedBy" name="requestedBy" type="hidden" value="' + requestedBy + '" /> ' +
                        '<input type="button" value="Delete table" class="deleteButton" id="deleteButton" /></td></tr>');
        if (requestedBy.length <= 0) {
            $('form input#deleteButton').attr('disabled', true);
        };
    }        

$(".deleteButton").click(function (){
    var btn = $(this);
    var currentTr = btn.closest("tr");
    var tableID = currentTr.attr("data-id");

    $.ajax({
      type: 'POST',
      url: url,
      data: {id : tableID},
      success: function (){
         var tr = $('#tablesList tr[data-id="' + tableID +'"]');
         tr.remove();
      },
      dataType: 'JSON'
    });
});