Submit Fancybox Form and use fnDraw occur multiple callback
Submit Fancybox Form and use fnDraw occur multiple callback
fortix
Posts: 3Questions: 0Answers: 0
Hi,
I am using DataTables 1.9.4 version. I am developing MVC project. I list categories with using DataTables properly. I add two custom buttons which are Delete and Edit button. When I click the edit button fancybox edit window open. When I change some fields values then I click submit button; Close the fancybox window and update the categories list by fnDraw() method. Thats so good until click the other row edit button. When I click the edit button secondly, call the categoryedit method (HttpGet) two times then open edit form. If I click submit button and repeat click the other row edit button, call the categoryedit method (HttpGet) three times... Increase the call time to categoryedit method. How to avoid this situation ? When I remove the fnDraw() method I avoid this problem but I want to refresh category list.
CategoryList Form (Script Region)
[code]
var asInitVals = new Array();
var oTable;
var slider_value = true;
$(document).ready(function () {
$("#IS_ENABLED").change(function () {
slider_value = $("#IS_ENABLED").val();
oTable.fnDraw(false);
});
$(".ui-link").each(function(){
$(this).attr("rel","external");
});
oTable = $('#tableId').dataTable({
"bProcessing": true,
"bServerSide": true,
//"sEcho": 3,
"bDeferRender": true,
"bSort": true,
"bAutoWidth": true,
//"bStateSave": true,
"bJQueryUI": true,
"bPaginate": true,
"sAjaxSource": "/Admin/GetCategories",
"fnServerParams": function (aoData) {
aoData.push(
{ "name": "status", "value": slider_value });
},
"bRetrieve": true,
"sPaginationType": "full_numbers",
"oLanguage": {
"sLengthMenu": "@Config.Get(ConfigKey.MenuPage)",
"sZeroRecords": "@Config.Get(ConfigKey.ZeroResult)",
"sInfo": "@Config.Get(ConfigKey.PagingInfo)",
"sInfoEmpty": "@Config.Get(ConfigKey.PagingZero)",
"sInfoFiltered": "@Config.Get(ConfigKey.PageFilter)",
"sProcessing": "@Config.Get(ConfigKey.DataTableLoading)",
"sLoadingRecords": "@Config.Get(ConfigKey.DataTableLoading2)",
"sSortAscending" : "@Config.Get(ConfigKey.DataTableAscSort)",
"sSortDescending": "@Config.Get(ConfigKey.DataTableDescSort)",
"sEmptyTable": "@Config.Get(ConfigKey.DataTableEmpty)",
"sSearch": "@Config.Get(ConfigKey.DataTableSearch)",
"oPaginate": {
"sFirst": "@Config.Get(ConfigKey.DataTableFirst)",
"sLast": "@Config.Get(ConfigKey.DataTableLast)",
"sNext": "@Config.Get(ConfigKey.DataTableNext)",
"sPrevious": "@Config.Get(ConfigKey.DataTablePrevious)"
}
},
"aoColumns": [
{ "mDataProp": "DESCCAT" },
{ "mDataProp": "DESCCAT_EN" },
{
"mDataProp": "SIDCATDEL",
"sTitle": "#",
"fnRender": function(obj) {
var catId = obj.aData.SIDCATDEL;
var deletebutton = '';
return deletebutton;
}
},
{
"mDataProp": "SIDCATEDIT",
"sTitle": "#",
"fnRender": function(obj) {
var catId = obj.aData.SIDCATEDIT;
//var editbutton = '';
var editbutton = '';
return editbutton;
}
}
],
"fnDrawCallback": function() {
$(".add").fancybox({
'width': '40%',
'height': '90%',
'autoScale': false,
'type': 'iframe',
'padding': '0',
'showCloseButton': true,
'enableEscapeButton': true,
'beforeClose': function () {
//oTable.fnDraw(false);
}
});
}
});
});
function EditCategory(categoryId) {
$(".icon-edit").fancybox({
'width': '40%',
'height': '90%',
'autoScale': false,
'type': 'iframe',
'padding': '0',
'href': '/Kategori-duzenle/'+categoryId+'',
'showCloseButton': true,
'enableEscapeButton': true,
'beforeClose': function () {
oTable.fnDraw();
}
});
return false;
}
[/code]
I am using DataTables 1.9.4 version. I am developing MVC project. I list categories with using DataTables properly. I add two custom buttons which are Delete and Edit button. When I click the edit button fancybox edit window open. When I change some fields values then I click submit button; Close the fancybox window and update the categories list by fnDraw() method. Thats so good until click the other row edit button. When I click the edit button secondly, call the categoryedit method (HttpGet) two times then open edit form. If I click submit button and repeat click the other row edit button, call the categoryedit method (HttpGet) three times... Increase the call time to categoryedit method. How to avoid this situation ? When I remove the fnDraw() method I avoid this problem but I want to refresh category list.
CategoryList Form (Script Region)
[code]
var asInitVals = new Array();
var oTable;
var slider_value = true;
$(document).ready(function () {
$("#IS_ENABLED").change(function () {
slider_value = $("#IS_ENABLED").val();
oTable.fnDraw(false);
});
$(".ui-link").each(function(){
$(this).attr("rel","external");
});
oTable = $('#tableId').dataTable({
"bProcessing": true,
"bServerSide": true,
//"sEcho": 3,
"bDeferRender": true,
"bSort": true,
"bAutoWidth": true,
//"bStateSave": true,
"bJQueryUI": true,
"bPaginate": true,
"sAjaxSource": "/Admin/GetCategories",
"fnServerParams": function (aoData) {
aoData.push(
{ "name": "status", "value": slider_value });
},
"bRetrieve": true,
"sPaginationType": "full_numbers",
"oLanguage": {
"sLengthMenu": "@Config.Get(ConfigKey.MenuPage)",
"sZeroRecords": "@Config.Get(ConfigKey.ZeroResult)",
"sInfo": "@Config.Get(ConfigKey.PagingInfo)",
"sInfoEmpty": "@Config.Get(ConfigKey.PagingZero)",
"sInfoFiltered": "@Config.Get(ConfigKey.PageFilter)",
"sProcessing": "@Config.Get(ConfigKey.DataTableLoading)",
"sLoadingRecords": "@Config.Get(ConfigKey.DataTableLoading2)",
"sSortAscending" : "@Config.Get(ConfigKey.DataTableAscSort)",
"sSortDescending": "@Config.Get(ConfigKey.DataTableDescSort)",
"sEmptyTable": "@Config.Get(ConfigKey.DataTableEmpty)",
"sSearch": "@Config.Get(ConfigKey.DataTableSearch)",
"oPaginate": {
"sFirst": "@Config.Get(ConfigKey.DataTableFirst)",
"sLast": "@Config.Get(ConfigKey.DataTableLast)",
"sNext": "@Config.Get(ConfigKey.DataTableNext)",
"sPrevious": "@Config.Get(ConfigKey.DataTablePrevious)"
}
},
"aoColumns": [
{ "mDataProp": "DESCCAT" },
{ "mDataProp": "DESCCAT_EN" },
{
"mDataProp": "SIDCATDEL",
"sTitle": "#",
"fnRender": function(obj) {
var catId = obj.aData.SIDCATDEL;
var deletebutton = '';
return deletebutton;
}
},
{
"mDataProp": "SIDCATEDIT",
"sTitle": "#",
"fnRender": function(obj) {
var catId = obj.aData.SIDCATEDIT;
//var editbutton = '';
var editbutton = '';
return editbutton;
}
}
],
"fnDrawCallback": function() {
$(".add").fancybox({
'width': '40%',
'height': '90%',
'autoScale': false,
'type': 'iframe',
'padding': '0',
'showCloseButton': true,
'enableEscapeButton': true,
'beforeClose': function () {
//oTable.fnDraw(false);
}
});
}
});
});
function EditCategory(categoryId) {
$(".icon-edit").fancybox({
'width': '40%',
'height': '90%',
'autoScale': false,
'type': 'iframe',
'padding': '0',
'href': '/Kategori-duzenle/'+categoryId+'',
'showCloseButton': true,
'enableEscapeButton': true,
'beforeClose': function () {
oTable.fnDraw();
}
});
return false;
}
[/code]
This discussion has been closed.
Replies
[code]
@model ExpressoPlus.Web.ExpressoService.TBL_EXPENSE_CATEGORY
@using ExpressoPlus.Web.LIB;
@using ExpressoPlus.Web.Template
@{
ViewBag.Title = Config.Get(ExpressoPlus.Web.Template.ConfigKey.KategoriDuzenle);
Layout = "~/Views/Shared/_Layout.Mobile_Dialog.cshtml";
}
$(document).ready(function () {
$('#categoryEditForm').validate({
rules: {
Desc_Exp_Category: { required: true },
Desc_Exp_Category_en: { required: true }
},
messages: { Desc_Exp_Category: { required: "@Config.Get(ExpressoPlus.Web.Template.ConfigKey.ReqKategoriAciklamasi_TR)"
},
Desc_Exp_Category_en: { required: "@Config.Get(ExpressoPlus.Web.Template.ConfigKey.ReqKategoriAciklamasi_EN)"
}
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().parent().after());
},
submitHandler: function (form) {
$.ajax({
type: "POST",
url: "/Admin/CategoryEdit",
data: $(form).serialize(),
success: function (response) {
if (response.status) {
parent.$.fancybox.close();
} else {
alert(response.message);
}
},
});
}
});
});
@using (Html.BeginForm("CategoryEdit", "Admin", FormMethod.Post, new { @id = "categoryEditForm" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
@Html.HiddenFor(model => model.SID_Exp_Category)
@Config.Get(ConfigKey.KategoriAciklamasi_TR)
@Html.EditorFor(model => model.Desc_Exp_Category)
@Config.Get(ConfigKey.KategoriAciklamasi_EN)
@Html.EditorFor(model => model.Desc_Exp_Category_en)
@Config.Get(ConfigKey.IsEnabled)
@Html.DropDownListFor(model => model.IS_ENABLED, ViewBag.AktifPasif as SelectList, new {@data_role = "slider", @data_theme = "c"})
}
[/code]
[code]
[HttpGet]
public ActionResult CategoryEdit(int id)
{
TBL_EXPENSE_CATEGORY category = serviceClient.GetCategoryById(id);
AktifPasifList(category.IS_ENABLED);
return View(category);
}
[HttpPost]
public JsonResult CategoryEdit(TBL_EXPENSE_CATEGORY category)
{
if (ModelState.IsValid)
{
serviceClient.UpdateCategory(category);
return Json(new {status = true, message = Config.Get(ConfigKey.Success), data = ""});
}
return Json(new {status = false, message = Config.Get(ConfigKey.ErrSavingData), data = ""});
}
[/code]