no checkboxes?

ashiers

Hi there,

Now that I'm able to load up DataTables with data from multiple tables using Join, I'm trying to figure out why I'm not getting a bunch of checkboxes for my last field labelled "Hobby" when I go to open the Edit or Create dialog form. When I return the JSON string, I append all the options from the hobbies table in the database, so it looks like so:

{... {"DT_RowId":"527","LASTNAME":"Boulton","FIRSTNAME":"Lee-Ann","mobile":{"MOBILE_NUMBER":"719-5459","TYPE":"blackberry"},"hobbies":[]},{"DT_RowId":"722","LASTNAME":"Bar","FIRSTNAME":"Foo","mobile":{},"hobbies":[]},{"DT_RowId":"725","LASTNAME":"Abreham","FIRSTNAME":"Andrew","mobile":{},"hobbies":[]},{"DT_RowId":"728","LASTNAME":"Goodwill","FIRSTNAME":"Ziggy","mobile":{},"hobbies":[]}],"hobbyoptions":[{"value":"1","label":"sports"},{"value":"2","label":"crafts"},{"value":"3","label":"photography"},{"value":"4","label":"sewing"},{"value":"5","label":"models"},{"value":"6","label":"reading"}]}

Notice the array labelled "hobbyoptions"? This is supposed to be read in by the JavaScript. See below:

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

$(document).ready(function() {

editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "http://localhost:8080/JQuery/join2.jsp",
"domTable": "#employees",
"fields": [ {
"label": "LASTNAME:",
"name": "LASTNAME",
"type": "text"
}, {
"label": "FIRSTNAME:",
"name": "FIRSTNAME",
"type": "text"
}, {
"label": "MOBILE:",
"name": "mobile.MOBILE_NUMBER",
"type": "text"
}, {
"label": "MOBILE TYPE:",
"name": "mobile.TYPE",
"type": "text"
}, {
"label": "HOBBY:",
"name": "hobbies.NAME",
"type": "checkbox"
}
]
} );

$('#employees').dataTable( {
"sDom": "Tfrtip",
"sAjaxSource": "http://localhost:8080/JQuery/join2.jsp",

"aoColumns": [
{ "mData": "LASTNAME" },
{ "mData": "FIRSTNAME" },
{ "mData": "mobile.MOBILE_NUMBER",
"sDefaultContent": "" },
{ "mData": "mobile.TYPE",
"sDefaultContent": "" },
{ "mData": "hobbies",
"sDefaultContent": "",
"mRender": "[, ].NAME"}
],
"oTableTools": {
"sRowSelect": "single",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
},
"fnInitComplete": function ( settings, json ) {
// Set the allowed values for the select and radio fields based on
// what is available in the database
editor.field('hobbyoptions[].value').update( json.hobbies);
}
} );
} );

[/code]

Have I got the fnInitComplete thing right? Please advise.

Alan

allan

`editor.field('hobbyoptions[].value')` - that looks like the problem. You don't have a field called `hobbyoptions[].value` in Editor - its called `hobbies.NAME` - try that instead:

[code]
editor.field('hobbies.NAME').update( json.hobbies);
[/code]

Allan

ashiers

That didn't work either. I've tried several combinations:

editor.field('hobbies[].NAME').update( json.hobbyoptions );
editor.field('hobbies[].NAME').update( json.hobbies );
editor.field('hobbyoptions[].value').update( json.hobbyoptions );

I'm also getting an error message in firebug pertaining to datatables.editor.js line 34:
TypeError: d is undefined
http://localhost:8080/JQuery/js/dataTables.editor.js
Line 34


...this._findField(a),h=f.fieldTypes[d.type];e.each(h,function(a,e){b[a]="function"...

I'm wondering if that has anything to do with it?

Alan

ashiers

I've been playing around with my example trying to get it to work. I've made a couple of changes that more closely resemble your example. I'm now using:

editor.field('hobbies[].HID').update( json.hobbies );

and changed the field name in editor:

[code]
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "http://localhost:8080/JQuery/join2.jsp",
"domTable": "#employees",
"fields": [ {
"label": "LASTNAME:",
"name": "LASTNAME",
"type": "text"
}, {
"label": "FIRSTNAME:",
"name": "FIRSTNAME",
"type": "text"
}, {
"label": "MOBILE:",
"name": "mobile.MOBILE_NUMBER",
"type": "text"
}, {
"label": "MOBILE TYPE:",
"name": "mobile.TYPE",
"type": "text"
}, {
"label": "HOBBY:",
"name": "hobbies.HID",
"type": "checkbox"
}
]
} );

[/code]

I believe this more closely matches you example. I've changed the name of the array from hobbyoptions to hobbies. So it looks like this on the JSON string:

{ ... {"DT_RowId":"526","LASTNAME":"Zanth","FIRSTNAME":"Kathy","mobile":{},"hobbies":[]},{"DT_RowId":"527","LASTNAME":"Boulton","FIRSTNAME":"Lee-Ann","mobile":{"MOBILE_NUMBER":"719-5459","TYPE":"blackberry"},"hobbies":[{"HID":"1","NAME":"sports"},{"HID":"4","NAME":"sewing"}]},{"DT_RowId":"722","LASTNAME":"Bar","FIRSTNAME":"Foo","mobile":{},"hobbies":[{"HID":"2","NAME":"crafts"}]},{"DT_RowId":"725","LASTNAME":"Abreham","FIRSTNAME":"Andrew","mobile":{},"hobbies":[{"HID":"3","NAME":"photography"}]},{"DT_RowId":"728","LASTNAME":"Goodwill","FIRSTNAME":"Ziggy","mobile":{},"hobbies":[]}],"hobbies":[{"value":"1","label":"sports"},{"value":"2","label":"crafts"},{"value":"3","label":"photography"},{"value":"4","label":"sewing"},{"value":"5","label":"models"},{"value":"6","label":"reading"}]}

This should work and I should be getting those checkboxes in the Edit and Create forms, but I'm not. I think there is something amis with regard to the error message I'm still getting from my previous post. Please advise.

Alan

allan

Hi Alan,

You say you are using `editor.field('hobbies[].HID').update( json.hobbies );` - but there is no field in Editor called `hobbies[].HID` . There is one called `hobbies.HID` but I'm not sure that is quite correct.

You want an array of the checkbox values, is that correct? If you call the field in Editor `hobbies[].HID` that should help if not out right fix it. A bit like the Editor join example: http://editor.datatables.net/release/DataTables/extras/Editor/examples/join.html

Regards,
Allan

ashiers

Though you can't see it, I'm hiding my head in shame. It had to be something simple like that didn't it! And I'm not getting the error message any more either. Thanks again.

Alan

allan

No problem at all - great to hear that you've got it resolved now :-)

Allan