Editors remove function doesn't remove it from database.
Editors remove function doesn't remove it from database.
valkarin
Posts: 3Questions: 1Answers: 0
Hi,
I'm using the editor with .net. Somehow I can add, edit but cannot remove. Editor removes the row from the table but not from the database. There is no error on both sides. Spend hours trying to figure out. Any help would be nice.
This is the client side.
<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.13/b-1.2.4/r-2.1.0/se-1.2.0/datatables.min.js"></script>
<script src="~/Scripts/editor/dataTables.editor.js" type="text/javascript"></script>
<script src="~/Scripts/editor/editor.bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
var editor; // use a global for the submit and return data rendering in the examples
var table;
// Activate an inline edit on click of a table cell
$('#products').on('click',
'tbody td.editable',
function (e) {
editor.inline(this,
{
onBlur: 'submit'
});
});
// Delete a record
$('#products').on('click',
'a.editor_remove',
function (e) {
e.preventDefault();
editor.remove($(this).closest('tr'),
{
title: 'Delete record',
message: function (evt, dt) {
var rows = dt.rows(evt.modifier()).data().pluck('Name');
return 'Are you sure you want to delete the entries for the ' +
'following record(s)? <ul><li>' +
rows.join('</li><li>') +
'</li></ul>';
},
buttons: [{ label: 'No', fn: function () { this.close(); } }, 'Yes']
});
});
$(document).ready(function() {
editor = new $.fn.dataTable.Editor({
ajax: {
create: {
type: 'POST',
url: '@Url.Content("~/api/article/create/")'
},
edit: {
type: 'PUT',
url: '@Url.Content("~/api/article/edit/")'
},
remove: {
type: 'DELETE',
url: '@Url.Content("~/api/article/remove/")'
}
},
table: "#products",
fields: [
{
label: "ID",
name: "Id",
type: "hidden"
},
{
label: "Name",
name: "Name"
},
{
label: "Created",
name: "CreationTimeStamp",
type: "hidden"
}
]
});
editor.disable('CreationTimeStamp');
table = $('#products').DataTable({
dom: "Bfrtip",
paging: true,
lengthChange: false,
select: false,
searching: true,
info: true,
autoWidth: false,
responsive: true,
language: {
"emptyTable": "Currently, there are no products in the database."
},
orderFixed: [2, 'desc'],
ajax: '@Url.Content("~/api/article/get")',
columns: [
{
data: "Id",
searchable: false,
orderable: false
},
{ data: "Name", orderable: false, className: 'editable' },
{
data: "CreationTimeStamp",
visible: false,
searchable: false,
orderable: true
},
{
data: null,
defaultContent:
'<a href="" class="btn icon-btn btn-danger editor_remove"><span class="glyphicon btn-glyphicon glyphicon-trash img-circle text-danger"></span> Delete</a>',
searchable: false,
orderable: false
}
],
buttons: []
});
$('#article-box').on({
keypress: function(e) {
if (e.which == 13) {
addRow(e.target);
event.preventDefault();
}
},
keyup: function(e) {
if (e.keyCode == 27) {
$('#newArticleField').val('');
$('#newArticleField').focus();
event.preventDefault();
}
}
});
$('#newArticleField').on({
blur: function(e) {
addRow(e.target);
}
});
});
function addRow(element) {
var textValue = $.trim($(element).val());
if (textValue !== '') {
editor
.create(false)
.set('Name', textValue).submit();
//success
$('#newArticleField').val('');
$('#newArticleField').focus();
}
}
</script>
And this is the server side
public class ArticleController : ApiController
{
public IHttpActionResult ArticleRest(HttpRequest request)
{
IHttpActionResult response;
using (var context = new ApplicationDbContext())
{
using (var db = new Database("sqlserver", context.Database.Connection))
{
var editor = new Editor(db, "Articles", "Id")
.Model<Article>()
.Field(new Field("Id").Set(false))
.Field(new Field("Name").Validator(Validation.NotEmpty()))
.Field(new Field("CreationTimeStamp")
.Set(Field.SetType.Create)
.SetValue(DateTime.Now))
.Process(request)
.Data();
var settings = new JsonSerializerSettings {DateFormatString = "MM/dd/yyyy HH:mm:ss"};
response = Json(editor, settings);
}
}
return response;
}
[System.Web.Http.HttpGet]
public IHttpActionResult GetArticles()
{
IHttpActionResult response = NotFound();
using (var context = new ApplicationDbContext())
{
var result = new List<Select2Model>();
context.Articles.ToList().ForEach(x =>
{
result.Add(new Select2Model()
{
id = x.Id,
text = x.Name
});
});
response = Json(result);
}
return response;
}
[System.Web.Http.HttpGet]
public IHttpActionResult Get()
{
var request = HttpContext.Current.Request;
return ArticleRest(request);
}
[System.Web.Http.HttpPost]
public IHttpActionResult Create()
{
var request = HttpContext.Current.Request;
return ArticleRest(request);
}
[System.Web.Http.HttpPut]
public IHttpActionResult Edit()
{
var request = HttpContext.Current.Request;
return ArticleRest(request);
}
[System.Web.Http.HttpDelete]
public IHttpActionResult Remove([FromBody] FormDataCollection formData)
{
var request = HttpContext.Current.Request;
return ArticleRest(request);
}
Here is the debugger code as well if needed: iboyoc.
Thank you for your help.
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Could you enable Editor's debug mode and show me the JSON that is returned when you send the delete request?
Thanks,
Allan
Hi Allan,
Thank you for your quick response.
I just checked the request and seems like when the delete request comes to the api the HttpRequest.FormData is empty.
Allan,
I solved the problem. It happens because when the editor is sending the delete request it removes the data and adds the add to url. Since it is not requested with data parameter the api sees the requests formdata empty and doesn't read the data sent from the editor.
When I took off this part from the dataTables.editor.js, it started to work
Ah! Yes. Thanks for digging into that. The reason Editor does that is that not all HTTP servers support data in the request body when sending a DELETE.
I'm going to add a flag to the next version to make that optional though.
Regards,
Allan
Editor 1.6.2 which should be out later this week contains a new
ajax.deleteBodyoption which can be set tofalseto disable this default action.Allan