Addding a tags field to editor sourced from ajax

crcucb

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.

allan

// {"data":[{"FullNameParty":"GILBOY, MICHAEL F (B)"},{"FullNameParty":"GILBOY, KRISTY S (R)"}]}
addresseditor.field('FullNameParty').update(data); // this is when the error occurs

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:

addresseditor.field('FullNameParty').update(data.data);

Allan

crcucb

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)

allan

I Am not familiar with the data.data usage

It is simply getting the data property from the object that is referenced by your variable data. The naming is perhaps a little confusing - change the data variable to json it you would need to use json.data, since that is where the array of options are.

Regarding it still not working:

{
    "data": [
        {
            "FullNameParty": "GILBOY, MICHAEL F (B)"
        },
        {
            "FullNameParty": "GILBOY, KRISTY S (R)"
        }
    ]
}

Editor expects label / value properties - e.g.:

{
    "data": [
        {
            "value": 1,
            "label": "GILBOY, MICHAEL F (B)"
        },
        {
            "value": 2,
            "label": "GILBOY, KRISTY S (R)"
        }
    ]
}

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:

{
    "data": [
        "GILBOY, MICHAEL F (B)",
        "GILBOY, KRISTY S (R)"
    ]
}

Allan

crcucb

https://jyorkejudge.org/
I am back around to working on this tags field. Below is the value returned from the PHP:
{"data":[{"value":124,"label":"GILMORE, JESYCCA C (B)"},{"value":125,"label":"GILMORE, CHARLES S (B)"}]}

The field definition from the editor form:
{ label: 'Apply to Residents:', name: 'ResidentsPicker', type: 'tags', limit: 6 },

Below is the logic that retrieves the above and attempts to set the tags field under
addresseditor.on('open', function () {

$.ajax({ // for resident picker
url: '/php/Addresses_Residens_Children_Ajax.php',
method: 'POST',
data: ({ AddressAID: selected.data().Addresses.AddressAID }),

success: function (json) {
console.log("addresseditor on open, returned from ajax = ", json);

  addresseditor.field('ResidentsPicker').update(json.data);
  },
    error: function (xhr, error, thrown) {
      console.error("Error fetching tags:", error);
     }
});

residentsPicker shows up empty, the two residents returned from the aren't in the list. No errors in dev tools

crcucb

I got it to work, unsure if this is the best way as it seems different from the approach I was originally taking.

My php returns the following json (I dropped the data descriptor): [{"label":"name1","value":124},{"label":"name2","value":125}]

below is the code:

$.ajax({ // for resident picker
url: '/php/Addresses_Residens_Children_Ajax.php', // Replace with your server-side endpoint
method: 'POST',
data: ({ AddressAID: selected.data().Addresses.AddressAID }),

success: function (json) {
console.log("addresseditor on open, returned from ajax post Addresses_Residens_Children_Ajax.php= ", json);
jsonstring = JSON.parse(json);
addresseditor.field('ResidentsPicker').update(jsonstring);

allan

Looks good - nice one! Thanks for the update

Allan