DataTables Editor - New and Edit Not Working

jwrightsp

Good Morning,

Terrific product, I can not tell you how much this saves me time and effort - once I can get beyond my own mistakes that is. :)

I have setup the latest version of DataTables with the Editor add-on on my website, using the code created by the Editor generator as my starting point.

The data from my database is displayed on the table as expected, and I can delete a row without issue. If I try to add a new row or edit an existing row however the pop-up window show me a spinner for a little bit after I click submit, but then the spinner goes away and nothing else happens. The edit/add pop-up window stays open and the change does not take place in the database.

I tried to run a DataTables Debug on the page after I click the submit but still have an open pop-up window open but after clicking the bookmark the application hangs indefinitely at "Creating debug information..." phase.

Unfortunately the page is within an access restricted area and I cannot provide the credentials for in a public forum.

Relevant code bits to folow.

Thanks in advance for your help.

John

jwrightsp

Here are my relevant code bits:

PHP ( separate file )

[code]
/*
* Editor server script for DB table locations
* Automatically generated by http://editor.datatables.net/generator
*/

// DataTables PHP library
include( "lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Join,
DataTables\Editor\Validate;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'location' )
->fields(
Field::inst( 'loc_ID' )
->validator( 'Validate::required' ),
Field::inst( 'loc_name' )
->validator( 'Validate::required' ),
Field::inst( 'loc_address' )
->validator( 'Validate::required' ),
Field::inst( 'loc_city' )
->validator( 'Validate::required' ),
Field::inst( 'loc_state' )
->validator( 'Validate::required' ),
Field::inst( 'loc_zip' )
->validator( 'Validate::required' ),
Field::inst( 'loc_country' )
->validator( 'Validate::required' ),
Field::inst( 'loc_borough' )
->validator( 'Validate::required' ),
Field::inst( 'loc_waitlist' )
->validator( 'Validate::required' )
)
->pkey('id')
->process( $_POST )
->json();
[/code]

jwrightsp

Server Side ( separate file )
[code]
/*
* Editor client script for DB table xxx
* Automatically generated by http://editor.datatables.net/generator
*/

(function($){

$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "table.xxx.php",
"domTable": "#locations_table",
"fields": [
{
"label": "ID",
"name": "loc_ID",
"type": "text"
},
{
"label": "Name",
"name": "loc_name",
"type": "text"
},
{
"label": "Address",
"name": "loc_address",
"type": "text"
},
{
"label": "City",
"name": "loc_city",
"type": "text"
},
{
"label": "State",
"name": "loc_state",
"default": "NY",
"type": "select",
"ipOpts": [
{
"label": "AL",
"value": "AL"
},
{
"label": "AK",
"value": "AK"
},
{
"label": "AZ",
"value": "AZ"
},
{
"label": "AR",
"value": "AR"
},
{
"label": "CA",
"value": "CA"
},
{
"label": "CO",
"value": "CO"
},
{
"label": "CT",
"value": "CT"
},
{
"label": "DE",
"value": "DE"
},
{
"label": "FL",
"value": "FL"
},
{
"label": "GA",
"value": "GA"
},
{
"label": "HI",
"value": "HI"
},
{
"label": "ID",
"value": "ID"
},
{
"label": "IL",
"value": "IL"
},
{
"label": "IN",
"value": "IN"
},
{
"label": "IA",
"value": "IA"
},
{
"label": "KS",
"value": "KS"
},
{
"label": "KY",
"value": "KY"
},
{
"label": "LA",
"value": "LA"
},
{
"label": "ME",
"value": "ME"
},
{
"label": "MD",
"value": "MD"
},
{
"label": "MA",
"value": "MA"
},
{
"label": "MI",
"value": "MI"
},
{
"label": "MN",
"value": "MN"
},
{
"label": "MS",
"value": "MS"
},
{
"label": "MO",
"value": "MO"
},
{
"label": "MT",
"value": "MT"
},
{
"label": "NE",
"value": "NE"
},
{
"label": "NV",
"value": "NV"
},
{
"label": "NH",
"value": "NH"
},
{
"label": "NJ",
"value": "NJ"
},
{
"label": "NM",
"value": "NM"
},
{
"label": "NY",
"value": "NY"
},
{
"label": "NC",
"value": "NC"
},
{
"label": "ND",
"value": "ND"
},
{
"label": "OH",
"value": "OH"
},
{
"label": "OK",
"value": "OK"
},
{
"label": "OR",
"value": "OR"
},
{
"label": "PA",
"value": "PA"
},
{
"label": "RI",
"value": "RI"
},
{
"label": "SC",
"value": "SC"
},
{
"label": "SD",
"value": "SD"
},
{
"label": "TN",
"value": "TN"
},
{
"label": "TX",
"value": "TX"
},
{
"label": "UT",
"value": "UT"
},
{
"label": "VT",
"value": "VT"
},
{
"label": "VA",
"value": "VA"
},
{
"label": "WA",
"value": "WA"
},
{
"label": "WV",
"value": "WV"
},
{
"label": "WI",
"value": "WI"
},
{
"label": "WY",
"value": "WY"
}
]
},
{
"label": "Zip",
"name": "loc_zip",
"type": "text"
},
{
"label": "Country",
"name": "loc_country",
"default": "US",
"type": "select",
"ipOpts": [
{
"label": "US",
"value": "US"
},
{
"label": "CA",
"value": "CA"
}
]
},
{
"label": "Borough",
"name": "loc_borough",
"default": "Bronx",
"type": "select",
"ipOpts": [
{
"label": "Bronx",
"value": "Bronx"
},
{
"label": "Brooklyn",
"value": "Brooklyn"
},
{
"label": "Manhattan",
"value": "Manhattan"
},
{
"label": "Queens",
"value": "Queens"
},
{
"label": "Staten Island",
"value": "Staten Island"
}
]
},
{
"label": "Waitlist",
"name": "loc_waitilist",
"default": "active",
"type": "checkbox",
"ipOpts": [
{
"label": "active",
"value": "active"
}
],
"separator": "|"
}
]
} );

// Edit record
$('#locations_table').on('click', 'a.editor_edit', function (e) {
e.preventDefault();

editor.edit(
$(this).parents('tr')[0],
'Edit record',
{ "label": "Update", "fn": function () { editor.submit() } }
);
} );

// Delete a record (asking a user for confirmation)
$('#locations_table').on('click', 'a.editor_remove', function (e) {
e.preventDefault();

editor.message( "Are you sure you want to remove this row?" );
editor.remove( $(this).parents('tr')[0], 'Delete row', {
"label": "Confirm",
"fn": function () { this.submit(); }
} );
} );

$('#locations_table').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": "TfrtipP",
"sAjaxSource": "table.xxx.php",
"fnDrawCallback": function() {
var paginateRow = $('.dataTables_paginate');
var pageCount = Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength);
if (pageCount > 1) {
paginateRow.css("display", "block");
} else {
paginateRow.css("display", "none");
}
},
"aoColumns": [
{
"mData": "loc_ID"
},
{
"mData": "loc_name"
},
{
"mData": "loc_address"
},
{
"mData": "loc_city"
},
{
"mData": "loc_state"
},
{
"mData": "loc_zip"
},
{
"mData": "loc_country"
},
{
"mData": "loc_borough"
},
{
"mData": "loc_waitlist"
},
{
"mData": null,
"sClass": "center",
"sDefaultContent": 'Edit / Delete'
}
],
// Disable sorting on the no-sort class
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ "no-sort" ]
} ],
"oTableTools": {
"sRowSelect": "multi",
"sSwfPath" : "/DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "editor_create", "editor": editor,
"sButtonText": "Add New Location"
},
"copy",
"print",
{
"sExtends": "collection",
"sButtonText": "Save As",
"aButtons": [ "csv", "xls", "pdf" ]
}
]
}
} );
} );

}(jQuery));
[/code]

jwrightsp

HTML

[code]



ID
Name
Address
City
State
Zip
Country
Borough
Waitlist
 



[/code]

allan

When you click the new or Edit buttons, if you look at the console in your web-browser's console, do you get any Javascript errors reported?

Thanks,
Allan

jwrightsp

Yes...

Uncaught RangeError: Maximum call stack size exceeded

DT_Debug.js?rand=1382976354560

jwrightsp

Got it - good old FireBug exposed the culprit:

{"id":-1,"error":"","fieldErrors":[{"name":"loc_waitlist","status":"This field is required"}],"data":[]}

jwrightsp

Yup had a typo for one of my fields in the Server Side code : "name": "loc_waitilist", should have been "name": "loc_waitlist",

I also need to make this field unrequired and I should be good to go.

You can close this thread too.

Thanks!

John

allan

Hi,

That's excellent detective work - good to hear you managed to resolve the issue :-)

Allan