new/edit/delete editor not working:

talk2femi

Hi there,

I am using editor1.2.2, I have incorporated editor to datatables.1.9.4, all seems ok. when I click new, the modal portal to insert pops out, when I fill the form, press create, nothing happens, for edit, when I click edit button, nothing happens, no modal shows up, when I click the delete button, the modal asking to delete or not pops out, when I click it, it says: An error has occurred - Please contact the system administrator. I am a newby with using editor and datatables. please could any one help me out on what I am doing wrong. thanks.
here is the view source code:

<!-- includes for Editor operation -->

@import "DataTables-1.9.4/media/css/jquery.dataTables.css";
@import "DataTables-1.9.4/extras/TableTools/media/css/TableTools.css";
@import "DataTables-1.9.4/extras/Editor/media/css/dataTables.editor.css";






var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "DataTables-1.9.4/extras/Editor/examples/php/quotes.php",
"domTable": "quotationsID",
"fields": [ {
"label": "jobID:",
"name": "jobID",
"type": "text"
},{
"label": "Customer:",
"name": "custName",
"type": "text"
}, {
"label": "Quote Number:",
"name": "quNo",
"type": "text"
}, {
"label": "Quote Title:",
"name": "quItemdescrip1",
"type": "text"
}, {
"label": "2nd Item Description:",
"name": "quItemdescrip2",
"type": "text"
}, {
"label": "3rd Item Description:",
"name": "quItemdescrip3",
"type": "text"
}, {
"label": "4th Item Description:",
"name": "quItemdescrip4",
"type": "text"
}, {
"label": "5th Item Description:",
"name": "quItemdescrip5",
"type": "text"
}, {
"label": "Quantity 1:",
"name": "quQty1",
"type": "text"
}, {
"label": "Quantity 2:",
"name": "quQty2",
"type": "text"
}, {
"label": "Quantity 3:",
"name": "quQty3",
"type": "text"
}, {
"label": "Quantity 4:",
"name": "quQty4",
"type": "text"
}, {
"label": "Quantity 5:",
"name": "quQty5",
"type": "text"
}, {
"label": "Total Quote Value:",
"name": "quOrderValue",
"type": "text"
}, {
"label": "Site:",
"name": "custSite",
"type": "text"
}, {
"label": "Customer Contact:",
"name": "custCont",
"type": "text"
}, {
"label": "Price/Hr:",
"name": "quPriceHr",
"type": "text"
}, {
"label": "Project Manager:",
"name": "projectManager",
"type": "text"
}
]
} );


$('#quotationsID').dataTable( {
"sDom": '<"top"Tlirpf<"clear">>rt<"bottom"Tlilpf<"clear">>',
"sPaginationType": "full_numbers",
"bRetrieve":true,
"aaSorting": [[ 1, "desc" ]],
"iDisplayLength": 5,
"aoColumnDefs": [{
"aTargets": [7],
"sType": "uk_date",
"mDataProp": "jobID" , "sTitle": "ID",
"mDataProp": "custName" , "sTitle": "Customer",
"mDataProp": "quNo" , "sTitle": "Quote No",
"mDataProp": "quItemdescrip1", "sClass": "center", "sTitle": "Title" ,
"mDataProp": "quItemdescrip2", "sClass": "center" , "sTitle": "Title2",
"mDataProp": "quItemdescrip3", "sClass": "center" , "sTitle": "Title3",
"mDataProp": "quItemdescrip4", "sClass": "center" , "sTitle": "Title4",
"mDataProp": "quItemdescrip5", "sClass": "center" , "sTitle": "Title5",
"mDataProp": "quQty1", "sClass": "center" , "sTitle": "Qty1",
"mDataProp": "quQty2", "sClass": "center" , "sTitle": "Qty2",
"mDataProp": "quQty3", "sClass": "center" , "sTitle": "Qty3",
"mDataProp": "quQty4", "sClass": "center" , "sTitle": "Qty4",
"mDataProp": "quQty5", "sClass": "center" , "sTitle": "Qty5",
"mDataProp": "quOrderValue", "sClass": "center" , "sTitle": "OrderValue",
"mDataProp": "custSite", "sClass": "center" , "sTitle": "Site",
"mDataProp": "custCont", "sClass": "center" , "sTitle": "Contact",
"mDataProp": "quPriceHr", "sClass": "center" , "sTitle": "PriceHr",
"mDataProp": "projectManager", "sClass": "center", "sTitle": "Manager"
}],
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
} );
} );



<!-- Includes required for the example page's behaviour - not needed for Editor itself -->
<!--
@import "support/examples.css";
@import "../../../media/css/demo_page.css";
@import "../../../examples/examples_support/syntax/css/shCore.css";


-->





Home :: Quotations

talk2femi

Hi Allan and anyone out there, I have been able to fetch the row data into the modal window, but the issue now is that it is not editing, nor deleting nor inserting new record, it says at the bottom of the modal window: An error has occurred - Please contact the system administrator.
Please somebody help.
thanks.

allan

Sorry for the delay - your original message got caught in a spam filter :-(

The error you are seeing means that there is a JSON error - i.e. the return from the server could not be parsed as JSON. This is nearly always caused by a warning message being output by the server, so we need to know what that message is. So, what is being returned by the server?

If you can link us to a test page showing the issue, that would be exceptionally useful to being able to find out what is going on.

Allan

talk2femi

Hi Allan, thanks for the reply, what is been returned is An error has occurred - Please contact the system administrator. using firebug: An error has occurred - Please contact the system administrator

the interesting thing is when I use the browsers example, it works perfectly ok, the crud. but when I use my own tables in the same database, the crud doesn't work.

sorry I am using localhost.

talk2femi

I am using dom table data.

allan

That looks like the DOM with the error message rather than the Ajax return from the server. What does that look like? You'll find it on the console.

As I say, if you can link us to an example, I'll be able to tell you exactly what is going wrong.

Allan

talk2femi

there are no errors in the console for the DOM table.. Here is my code:
<!-- includes for Editor operation -->

@import "../../../media/css/jquery.dataTables.css";
@import "../../TableTools/media/css/TableTools.css";
@import "../media/css/dataTables.editor.css";






var editor; // use a global for the submit and return data rendering in the examples
//$.fn.dataTableExt.sErrMode = 'throw';
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/job.php",
"domTable": "#example",
"fields": [ {
"label": "Name:",
"name": 0
}, {
"label": "Quote NO:",
"name": 1
}, {
"label": "Description:",
"name": 2
},{
"label": "Site:",
"name": 3
},{
"label": "Qty1:",
"name": 4
}
]
} );

$('#example').dataTable( {
"sDom": "Tfrtip",
// "sAjaxSource": "php/job.php",
// "aoColumns": [
// { "mData": "custName" },
// { "mData": "quNo" },
// { "mData": "quItemdescrip1" },
// { "mData": "custSite", "sClass": "center" },
// { "mData": "quQty1", "sClass": "center" }
// ],
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
} );
} );




Customer
Quote NO
Description
Site
Qty1



<?php do { ?>

<?php echo $row_quotations_sql['custName']?>
<?php echo $row_quotations_sql['quNo']?>
<?php echo $row_quotations_sql['quItemdescrip1']?>
<?php echo $row_quotations_sql['custSite']?>
<?php echo $row_quotations_sql['quQty1']?>

<?php } while ($row_quotations_sql = mysql_fetch_assoc($quotations_sql)); ?>



Customer
Quote No
Description
Site
Qty1

allan

That all looks fine. However, `php/job.php` is not returning valid JSON (as the error that you are getting shows). We need to know what `php/job.php` is returning. Please, if you can, give me a link to the page so I can see what is happening and diagnose the problem. Otherwise, without that information I can't offer much help.

Allan

talk2femi

Hi Allan, when I ran the php/job.php on the browser, there was an error on primary key label, mine was jobID, so I changed it to id, and updated my sqls. when I tested it, the delete is working now. still trying to figure out the edit. the new button is functioning now too. just remaining the edit button. when I ran the php/job.php, it loaded all the records in database, no error.

talk2femi

Hi Allan, the update button too is working now. thanks for the debugging tips. so moving forward, does this mean that my primary keys for my tables in the database must be labelled "id" or I can't use mine customary label for my primary keys?

talk2femi

the sAjaxSource way too is working perfectly. thanks Allan.
moving forward, does this mean that my primary keys for my tables in the database must be labelled "id" or I can't use mine customary label for my primary keys?

allan

You can use anything for your primary key, but you need to tell the Editor classes what your pkey is which you can do in the `Editor` class constructor: http://editor.datatables.net/docs/current/php/class-DataTables.Editor.html#___construct

Allan