Addding a tags field to editor sourced from ajax
Addding a tags field to editor sourced from ajax
crcucb
Posts: 43Questions: 12Answers: 0
I am trying to add a tags field to my editor that will only allow picking residents who are assigned under the address.
When I edit an Address, I plan on having multiple checkboxes and allowing picking from the residents already assigned to the address. I will have a custom routine that updates the server based on what was checked. For example, suppose there are 4 residents at an address, and the user selects a checkbox indicating that they spoke to a resident. The user may pick 3 of the 4 residents meaning they spoke with 3. In the update process, I will update each of the residents picked.
Below is the first part of the editor, Res Pick is the tags field I am adding.
var addresseditor = new DataTable.Editor( {
ajax: 'php/Addresses_Address_DT.php',
table: '#Addresses',
idSrc: "Addresses.AddressAID",
fields: [
{
"label": "Address Notes:",
"name": "Addresses.addressnotes",
"type": "textarea"
},
{
label: 'Res Pick',
name: 'FullNameParty',
type: 'tags',
limit: 6
}
I am using the open event to call a PHP which will resturn the residens for an address (I am hardcoding the AddressAID for now o 46)
addresseditor.on('open', function () {
addresseditor
.field('Addresses.AddressAID')
.dt()
.ajax.reload(function (json) {
console.log("opened editor");
// usersEditor.field('Addresses.AddressAID').update(json.options['Addresses.AddressAID']);
});
$.ajax({
url: '/php/Addresses_Residens_Children_Ajax.php', // Replace with your server-side endpoint
method: 'GET',
data : {AddressIAD: 46},
success: function (data) {
// {"data":[{"FullNameParty":"GILBOY, MICHAEL F (B)"},{"FullNameParty":"GILBOY, KRISTY S (R)"}]}
addresseditor.field('FullNameParty').update(data); // this is when the error occurs
},
error: function (xhr, error, thrown) {
console.error("Error fetching tags:", error);
}
});
});
Data is coming back from the php but and error is thrown when I am rying to update FullNameParty:
dataTables.editor.min.js:6 Uncaught TypeError: t.forEach is not a function
at E.options (dataTables.editor.min.js:6:49929)
at R.update (dataTables.editor.min.js:6:68958)
at O._typeFn (dataTables.editor.min.js:6:77965)
at O.update (dataTables.editor.min.js:6:76157)
at Object.success (Addresses_Address.js:246:69)
at c (datatables.min.js:14:25266)
at Object.fireWith [as resolveWith] (datatables.min.js:14:26015)
at l (datatables.min.js:14:77721)
at XMLHttpRequest.<anonymous> (datatables.min.js:14:80204)
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Answers
field().update()expects an arrau of data, but based on the JSON structure there you are actually passing the object. I think you just need to change it to be:Allan
thank you. I Am not familiar with the data.data usage, when I try it, I don't get an error but the values aren't populated, meaning the list is empty.
.
when I try to set to just data, I get the error.
success: function (data) {
console.log("returned ", data);
addresseditor.field('FullNameParty').update(data);
returned {"data":[{"FullNameParty":"GILBOY, M F (B)"},{"FullNameParty":"GILBOY, K S (R)"}]}
dataTables.editor.min.js:6 Uncaught TypeError: t.forEach is not a function
at E.options (dataTables.editor.min.js:6:49929)
at R.update (dataTables.editor.min.js:6:68958)
at O._typeFn (dataTables.editor.min.js:6:77965)
at O.update (dataTables.editor.min.js:6:76157)
It is simply getting the
dataproperty from the object that is referenced by your variabledata. The naming is perhaps a little confusing - change thedatavariable tojsonit you would need to usejson.data, since that is where the array of options are.Regarding it still not working:
Editor expects
label/valueproperties - e.g.:I'm just guessing at the value - normally it is a primary key which is why I've used that. If it is in fact just the same as the label, you could do:
Allan