I have a fairly simple MVC application that is pulling data from a SQL database, and is using footable for the display. Everything is working fine, and the footable is working as expected. When I make a change to the table, the modified content shows up in the table view; however, the data is not being sent back to the database. I am relatively new to programming, so I'm not sure if what I'm looking for is some ajax, a deserializer, etc. I've read several posts trying to solve this issue, but they don't seem to be what I am looking for, or I'm not understanding how to implement them. I am also not sure what portions of the code are necessary to help resolve this issue, so I will include a few of the basics, but if you need more code, please advise.
JS and View/Index
< script >
var $modal = $('#editor-modal'),
$editor = $('form#editor'),
$editorTitle = $('#editor-title'),
ft = FooTable.init('#editing-example', {
editing: {
enabled: true,
addRow: function() {
$modal.removeData('row');
$editor[0].reset();
$editorTitle.text('Add a new row');
$modal.modal('show');
},
editRow: function(row) {
var values = row.val();
//$editor.find('CNTC_ID').val(parseInt(values.CNTC_ID));
$editor.find('#CNTC_ID').val(parseInt(values.CNTC_ID));
$editor.find('#CNTC_NM').val(values.CNTC_NM);
$editor.find('#WorkPhone').val(values.WorkPhone);
$editor.find('#CellPhone').val(values.CellPhone);
$editor.find('#Email').val(values.Email);
$editor.find('#Fax').val(values.Fax);
$editor.find('#IsFedContact').val(values.IsFedContact);
$editor.find('#ENTY_NM').val(values.ENTY_NM);
$editor.find('#TRBL_GOV_NM').val(values.TRBL_GOV_NM);
$modal.data('row', row);
$editorTitle.text('Edit row #' + parseInt(values.CNTC_ID));
$modal.modal('show');
},
deleteRow: function(row) {
if (confirm('Are you sure you want to delete the row?')) {
row.delete();
}
}
}
}),
uid = 10;
$editor.on('submit', function(e) {
if (this.checkValidity && !this.checkValidity()) return;
e.preventDefault();
var row = $modal.data('row'),
values = {
CNTC_ID: $editor.find('#CNTC_ID').val(),
CNTC_NM: $editor.find('#CNTC_NM').val(),
WorkPhone: $editor.find('#WorkPhone').val(),
CellPhone: $editor.find('#CellPhone').val(),
Email: $editor.find('#Email').val(),
Fax: $editor.find('#Fax').val(),
IsFedContact: $editor.find('#IsFedContact').val(),
ENTY_NM: $editor.find('#ENTY_NM').val(),
TRBL_GOV_NM: $editor.find('#TRBL_GOV_NM').val()
};
if (row instanceof FooTable.Row) {
row.val(values);
} else {
values.CNTC_ID = uid++;
ft.rows.add(values);
}
$modal.modal('hide');
});@model IEnumerable
<STAD_DEV.Models.STAD_CNTC>
@{ ViewBag.Title = "Index"; }
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table id="editing-example" class="table footable table-striped" data-paging="true" data-filtering="true" data-sorting="true" data-editing="true">
<thead>
<tr>
<th data-name="CNTC_ID">ID</th>
<th data-name="CNTC_NM" data-breakpoint="xs">Name</th>
<th data-name="WorkPhone">Work Phone</th>
<th data-name="CellPhone">Cell Phone</th>
<th data-name="Email">Email</th>
<th data-name="Fax">Fax</th>
<th data-type="html" data-name="IsFedContact">Is Fed Contact</th>
<th data-name="ENTY_NM">Department</th>
<th data-name="TRBL_GOV_NM">Tribe</th>
<th></th>
</tr>
</thead>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.CNTC_ID)
</td>
<td>
@Html.DisplayFor(modelItem => item.CNTC_NM)
</td>
<td>
@Html.DisplayFor(modelItem => item.WorkPhone)
</td>
<td>
@Html.DisplayFor(modelItem => item.CellPhone)
</td>
<td>
@Html.DisplayFor(modelItem => item.Email)
</td>
<td>
@Html.DisplayFor(modelItem => item.Fax)
</td>
<td>
@Html.DisplayFor(modelItem => item.IsFedContact)
</td>
<td>
@Html.DisplayFor(modelItem => item.GAIN_ST_GOV_ENTY.ENTY_NM)
</td>
<td>
@Html.DisplayFor(modelItem => item.GAIN_TRBL_GOV.TRBL_GOV_NM)
</td>
<td></td>
</tr>
}
</table>
<div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
<div class="modal-dialog" role="document">
<form class="modal-content form-horizontal" id="editor">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="editor-title">Add Row</h4>
</div>
<div class="modal-body">
@*@<input type="number" id="CNTC_ID" name="CNTC_ID" class="hidden" />*@
<div class="form-group">
<label for="CNTC_ID" class="col-sm-3 control-label">CNTC_ID</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="CNTC_ID" name="CNTC_ID" placeholder="ID">
</div>
</div>
<div class="form-group required">
<label for="CNTC_NM" class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="CNTC_NM" name="CNTC_NM" placeholder="Name" value="" required /> @*
<input type="text" class="form-control" id="CNTC_NM" name="CNTC_NM" placeholder="Name" required>*@
</div>
</div>
<div class="form-group">
<label for="WorkPhone" class="col-sm-3 control-label">WorkPhone</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="WorkPhone" name="WorkPhone" placeholder="Work Phone">
</div>
</div>
<div class="form-group">
<label for="CellPhone" class="col-sm-3 control-label">Cell Phone</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="CellPhone" name="CellPhone" placeholder="Cell Phone">
</div>
</div>
<div class="form-group">
<label for="Email" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="Email" name="Email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="Fax" class="col-sm-3 control-label">Fax</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="Fax" name="Fax" placeholder="Fax">
</div>
</div>
<div class="form-group">
<label for="IsFedContact" class="col-sm-3 control-label">Is Fed Contact</label>
<div class="col-sm-9">
<select class="form-control" id="IsFedContact" name="IsFedContact">
<option value="True">yes</option>
<option value="False">no</option>
</select> @*
<input type="text" class="form-control" id="IsFedContact" name="IsFedContact" placeholder="Is Fed Contact">*@
</div>
</div>
<div class="form-group">
<label for="ENTY_NM" class="col-sm-3 control-label">Department</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="ENTY_NM" name="ENTY_NM" placeholder="">
</div>
</div>
<div class="form-group">
<label for="TRBL_GOV_NM" class="col-sm-3 control-label">Tribe</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="TRBL_GOV_NM" name="TRBL_GOV_NM" placeholder="">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" data-trigger="ProcessData">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</form>
</div>
</div>I have not edited the code behind, and was not sure if I needed to, so it's just auto-generated code. I'm sure that the code snippet that I put in won't run, but I'm still learning the proper formatting for stackoverflow questions. Hope this all makes sense.
The issue was caused by two things, first was the ajax call not being pointed to the right location. The second (which was not actually addressed in the post) was caused by the HTML passing spaces through to the table. The resolution to this issue was found here: HTML Rendering Spaces