I want to define a DataTables multi column Edit form
I want to define a DataTables multi column Edit form
Hi
I wish to create a multi column Edit popupf. I like the way that DataTables handles this at the moment but want a diffrent layout.
What I want is something like this.
Name : xxxxxxx Surname : yyyyyyyyyyyyyy
DOB: dd/mm/yyy Gender : x Nationality : zzzzzzzzzz
etc.
I can find nothing in the documentation about this unless it is Display Controllers which I don't want to get into if it is not required..
Can someone give me a guide and/or point me to an exmple.
Thanks in advance
Roger
I wish to create a multi column Edit popupf. I like the way that DataTables handles this at the moment but want a diffrent layout.
What I want is something like this.
Name : xxxxxxx Surname : yyyyyyyyyyyyyy
DOB: dd/mm/yyy Gender : x Nationality : zzzzzzzzzz
etc.
I can find nothing in the documentation about this unless it is Display Controllers which I don't want to get into if it is not required..
Can someone give me a guide and/or point me to an exmple.
Thanks in advance
Roger
This discussion has been closed.
Replies
Allan
Here's another thought. In addition to doing your Edit form as you do now why not allow us to define an edit form with straight HTML and you pop that form up instead? This way the clunky css to position fields is lost and we will have complete freedom on how the form looks. The form would be populated as at present.
This thought came to me because I now want to put boxes around related fields and maybe change background color. I haven't tried yet but I suspect this is going to take some doing.
BTW I am suprised that the formating of an edit form hasn't reared it's ugly head before this as it is a basic requirement of any commercial app.
Regards
Roger
Regards,
Allan
Oh dear, don't I feel an arse. Just so much new stuff to get my head around!!!
I will look into this right now.
Thanks for the heads up.
Regards
Roger
I have now got my Edit form the way I want it. Thanks for the tip. I battled for a while because I didn't have all the required js files included, wasn't even aware they were needed, found out by looking at the example's HTML in the browser. (A hint for your new documentation)
On that note jquery.min.js and jquery.js are different (I am assuming the the jquery.min is a minimised version of the jquery), using the min breaks the code.
On a positive note - goodby the positioning css (thank goodness)
My next question is - Can I assign the form to the normal Editor buttons by declaration. If not I was wondering if I could use "fnClick": function ( nButton, oConfig, oFlash ) in any way or MUST I do it as you suggest above?
Regards
Roger
In what way does it break? It should work just fine.
> My next question is - Can I assign the form to the normal Editor buttons by declaration
Not to the Editor buttons, but you can to the TableTools buttons (of which the Editor buttons actually are, but you wouldn't want to override the default Editor ones, when you can just create custom buttons to do exactly what you want).
So yes, use fnClick to trigger the action you want to occur on a click.
Allan
I sorry to be a pain but I just don't know what to do with this update form problem of mine. Can you point me to an example where a formatted form is used for updating a selected row.
I just can't believe that lots of code is required and that is the direction I am heading.
Regards Roger
Sorry I don't have one available at the moment.
However, I would suggest that is should look something like this:
[code]
editor.edit( tr, null, null, false ); // where tr is the row to edit
editor.set( 'name', $('#myCustomForm .name').val() );
editor.set( 'access', $('#myCustomForm .access').val() );
// ... more fields
editor.submit();
[/code]
So it sets Editor into edit mode without showing the Editor display - sets a bunch of fields, and then submits it.
Allan
I have done as you suggest. I get the row (checked in FireBug) but none of my fields get set. The form is not displayed even when I change the editor.edit( $row, null, null, false ) to editor.edit( $row, null, null, true ). I don't want to submit the form at this point but have left the submit in for now.
It returns
POST http://opm.picturenet.co.za/opm/matter/php/formOnlyData.php 404 Not Found
which makes sense but note the default file name!!! Could this be a clue?
I define the matterEditForm inline with display:none
I have moved the stuff to a server so you can see the code in source view.
http://opm.picturenet.co.za/opm/matter/matter.tpl.php
Can you help me? I am ready to throw in the towel, I just can't afford any more time to do something that should be really simple. I'm sorry to say your documentation is amongst the worst I have ever seen, you must be loosing potential users.
Regards Roger.
So, sorry, I can't say what is wrong with it.
> POST http://opm.picturenet.co.za/opm/matter/php/formOnlyData.php 404 Not Found which makes sense but note the default file name!!! Could this be a clue?
Possibly - but without being able to see the code, I don't really know. It sounds like you have copied one of the Editor examples and haven't changed the 'ajaxUrl' parameter?
I'm sorry you aren't enjoying working with Editor and its documentation. If I could actually see your page, I might be able to see what is going wrong, why and as a result be able to improve the documentation to help meet requirements such as your own.
Allan
What exactly are you using for the selector and the HTML? In the example you posted there, that would match an element which has something like `` which probably isn't what you want?
Perhaps something a bit more like:
[code]
$('#myCustomForm input[name="id"]').val()
[/code]
would be appropriate? But I'm just guessing without being able to actually see what you are working with :-).
Allan
The link http://editor.datatables.net/options/Editor.models.displayController.html is broken on page
http://editor.datatables.net/options/
Ok I have got the Edit form populated. It turned out to be simple once I got the syntax figured out
I remember reading somewhere that edit.submit is a straight passthrough to jquery. Well with
editor.set($('#matterEditForm input[name="matterDesc"]'). val( $data['matterDesc'] )); I get an error
...].apply(c,b)}:e});return b};d.prototype.fields=function(){for(var a=[],c=0,b=thi... editor.js line 33
But no errors with
$('#matterEditForm input[name="matterDesc"]'). val( $data['matterDesc'] );
so that's what I've gone with.
Maybe I misunderstood something. BTW I've never mentioned this, I have always written my own JS and ajax type code as I started my stuff many many years ago so even the JS code is new to me, but I have got tired of enhancing it hence my move.
Now all I've got to do is get the form inside the 'envlope'. I think this involes messing with a controller. Am I correct?
Regards Roger.
Did a little more tonight and have got further again but I am sure I have gone in the incorrect direction.
Please help. I just can't get the controller code to work for me.
The Edit details are being displayed with the correct values but not inside the 'envelope' and not the correct width but I'm sure that will correct itself once inside an 'envelope'. They display like a 'detail' form.
The url is http://www.lawvault.co.za/opm/matter/matter.tpl.php so you can look at by code in the browser source view
Regards Roger.
On Editor -> Tutorial -> Display controllers http://editor.datatables.net/tutorials/display_controllers
This link returns a blank page
settings namespace
http://editor.datatables.net/docs/current/DataTable.Editor.models.settings.html
Hi Allan
Sorry for all the posts but I am hoping you will see the error of my ways.
My next attempt. I have been following the Example. What I am trying to do is get my Edit form inside the standard 'envelope'
This gives 'TypeError: $opmEditor.models is undefined' on this line
$opmEditor.display.details = $.extend( true, {}, $opmEditor.models.displayController, {
$opmEditor is obviously instantiated but not .models.
I expected the models to be instantiated with this line
var $opmEditor = new $.fn.dataTable.Editor( {
[code]
$(document).ready( function () {
var envelopeConf = $.fn.dataTable.Editor.display.envelope.conf,
$tableId = '#opmTable';
envelopeConf.attach = 'head';
envelopeConf.windowScroll = false;
var $opmEditor = new $.fn.dataTable.Editor( {
//"ajaxUrl": "php/formOnlyData.php",
"domTable": $tableId,
"display": 'envelope'
} );
$opmEditor.display.details = $.extend( true, {}, $opmEditor.models.displayController, {
"init": function ( dte ) {
// Init function
return $opmEditor.display.details;
},
"open": function ( dte, append, callback ) {
// Show form
var table = $(dte.s.domTable).dataTable();
$opmEditor.display.details.close( dte );
if ( callback ) {
callback();
}
},
"close": function ( dte, callback ) {
// Hide form
var table = $(dte.s.domTable).dataTable();
var openRows = table.fnSettings().aoOpenRows;
// Call fnClose on the DataTable
if (openRows.length > 0) {
var openRow = openRows[0].nParent;
table.fnClose( openRow );
if ( callback ) {
callback();
}
}
}
} );
[/code]
I am desperate. Everyone, client included, is on my back. If a solution is not found for this problem I will have to revert to the css positioning method which I don't want to do as it is messy or else go another route
Regards
Roger
I have found a fix to get me on. It is very messy but will suffice for now but this problem must be solved before I write a live system. So looking forward to your advice.
Is there a way I can mail you so that it doesn't appear in the Forum? This one has got long with unhelpful blogs for other people. When we find a solution I will post it as a working example with your guidence, perhaps with a link to my test site if required.
Regards Roger
I've just set you an email and I'll update this thread for others interesting in this discussion when we reach a conclusion :-)
Allan
Thanks for the response.
In FireBug it stalls and when I press continue the console gives me
var envelopeConf = $.fn.dataTable.Editor.display.envelope.conf;
Without FireBug I get "Assert Failure" it hangs and the Browser console gives me
[10:33:30.702] The Web Console logging API (console.log, console.info, console.warn, console.error) has been disabled by a script on this page.
[10:33:36.546] GET http://opm.picturenet.co.za/opm/matter/matter.tpl.php [HTTP/1.1 200 OK 11ms]
[10:33:36.779] Use of Mutation Events is deprecated. Use MutationObserver instead. @ chrome://firebug/content/chrome/tabContext.js:589
[10:33:36.794] TypeError: $.fn.dataTable is undefined @ http://opm.picturenet.co.za/opm/matter/matter.tpl.php:104
The links
[code]
<!---->
<!---->
<!---->
<!---->
<!---->
[/code]
The code. I have tried the first 3 lines inside the .ready as well - same result
[code]
var envelopeConf = $.fn.dataTable.Editor.display.envelope.conf;
envelopeConf.attach = 'head';
envelopeConf.windowScroll = false;
$(document).ready( function () {
var editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/formOnlyData.php",
"domTable": "#example",
"display": 'envelope',
"fields": [
{"label": ID,
"name": 0,
"type": "hidden"},
{"label": MATTER_DESC,
"width": "50px",
"name": 4},
{"label": NAME,
"name": 2},
{"label": MATTER_TYPE,
"width": "20px",
"name": 3},
{"label": MATTER_CODE,
"name": 4},
{"label": CLIENT_REFERENCE,
"name": 5},
{"label": INSTRUCTION_DATE,
"name": 5},
{"label": NON_BILLABLE,
"name": 6,
"type": "checkbox",
"ipOpts": [{"label": "", "value": "1"}]},
{"label": DEPARTMENT,
"name": 7}
]
} );
var oTable = $('#example').dataTable( {
"sDom": "<'row-fluid'<'span5'RT><'span3'l><'span4'f>r>t<'row-fluid'<'span6'i><'span5'p>>",
//"sScrollY": "545px",
"bScrollCollapse": true,
"iDisplayLength": 10,
"aLengthMenu": [[10, 20, 40, -1], [10, 20, 40, "All"]],
"bInfo": true,
"sPaginationType": "full_numbers",
"bAutoWidth":false,
"bLengthChange": true,
"aaSorting": [[ 2, "asc" ]],
"aoColumns": [
{"bSortable": false, //0 actions
"sWidth": "85px"},
{"bSortable": false, //1 ID
"bVisible": false},
null, //2 client
{"sWidth": "90px"}, //3 state
null, //4 matter
null, //5 attorney
{"sWidth": "90px"}, //6 mandateSigned
],
"oTableTools": {
"sSwfPath": "../swf/copy_csv_xls_pdf.swf",
"sRowSelect": "single",
"aButtons": [
{"sExtends": "editor_create", "editor": editor},
{"sExtends": "editor_edit", "editor": editor},
{"sExtends": "editor_remove", "editor": editor},
"print",
"csv",
"xls",
"pdf"
]
}
}
).makeEditable( {
sAddNewRowFormId: "matterEditForm",
sUpdateURL: "UpdateData.php",
sAddURL: "AddData.php",
sDeleteURL: "DeleteData.php"
});
} );
[/code]