title: Update row in WebGrid with JQuery
body: <p>FOUND THE PROBLEM:
  Just needed to replace <code>row.replaceWith</code> with <code>row.parent().parent().replaceWith()</code>.</p>
  
  <hr>
  
  <p>I'm trying to update a WebGrid row with JQuery after I've clicked a submit button in a modal dialog, but the updated data just append the last column, not the whole row as I want.</p>
  
  <p>Let's say I want the table to look like this after the update:</p>
  
  <pre><code>ID - Name - Phone number
  </code></pre>
  
  <p>But with my code it looks like this after the update:</p>
  
  <pre><code>ID - Name - ID - Name - Phone number 
  </code></pre>
  
  <p>as it just replaces the last column with a new table within the last column with the updated data.</p>
  
  <p>I'm getting the correct data as output, but in the wrong place in the row.</p>
  
  <p>Please help! :)</p>
  
  <p>Here is the Javascript code:</p>
  
  <pre><code>$(function () {
      $("#edit-event-dialog").dialog({
          resizable: false,
          height: 300,
          modal: true,
          autoOpen: false,
          open: function (event, ui) {
              var objectid = $(this).data('id');
              $('#edit-event-dialog').load("/Events/CreateEditPartial", { id: objectid });
          },
          buttons: {
              "Save": function () {
                  var ai = {
                      EventID: $(this).data('id'),
                      Name: $("#Name").val(),
                      Phone: $("#Phone").val()
                  };
                  var json = $.toJSON(ai);
                  var row = $(this).data('row');
  
                  $.ajax({
                      url: $(this).data('url'),
                      type: 'POST',
                      dataType: 'json',
                      data: json,
                      contentType: 'application/json; charset=utf-8',
                      success: function (data) {
                          var grid = $(".pretty-table");
                          row.replaceWith('&lt;tr&gt;&lt;td&gt;' + data.ev.EventID + '&lt;/td&gt;&lt;td&gt;' +
                          data.ev.Name + '&lt;/td&gt;&lt;td&gt;' + data.ev.Phone + '&lt;/td&gt;&lt;/tr&gt;');
                      },
                      error: function (data) {
                          var data = data;
                          alert("Error");
                      }
                  });
                  $(this).dialog("close");
              },
              Cancel: function () {
                  $(this).dialog("close");
              }
          }
      });
  
      $("#event-edit-btn").live("click", function () {
          var url = $(this).attr('controller');
          var row = $(this);
          var id = $(this).attr('objectid');
  
          $("#edit-event-dialog")
              .data('id', id)
              .data('url', url)
              .data('row', row)
              .dialog('open');
  
          event.stopPropagation();
          return true;
      });
  </code></pre>