Dependency Question - call back function is not getting called.

Dependency Question - call back function is not getting called.

Leju PalakapillyLeju Palakapilly Posts: 7Questions: 5Answers: 0
edited March 2021 in Editor

I have ownerId and ownerName fields in my application which are dependent. If the ownerId field changes, ownerName needs to be populated by a ajax call. I have set up dependency like below.

editor.dependent( 'ownerId', function ( val, data, cb) {
       if(val!==data.rows.ownerId) {
           $.ajax( {
              url: '/ed/ajax/companyName.txt',
              dataType: 'json',
              data:val,
              success: function ( json ) {
                 cb(json);
                 return {};
              }
            } );
         }
      } );

This is the callback function

function cb(json)
{
       var compName = json.data.companyName;
       editor.field('ownerName').set(compName);

 }

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Hi Leju,

    I'm not clear what your question is I'm afraid. I presume that what you have above isn't working? At what point does it break down? Also, what is the response from the server (it looks like it is loading a static text file, but perhaps it is dynamically generated?).

    Also, its a little confusing that you have a function called cb and a parameter in the dependent callback called cb. Your function that sets the ownerName will never be called due to the variable name clash.

    Allan

  • Leju PalakapillyLeju Palakapilly Posts: 7Questions: 5Answers: 0

    Hi Allan,
    We have two dependent fields ownerId and ownerName. When the ownerId changes, ownerName needs to be populated. This should happen when editing inline or adding a new row. I am using the dependency API to accomplish this.
    I understood the dependency API syntax wrong. I have it working now.

    But I still have an issue. The dependency API is getting executed even when tabbing through ownerId while inline editing. This causes the ownerName to be updated even where there is no change to the ownerId field.
    Here is my code for the datatable.

    var editor; // use a global for the submit and return data rendering in the examples
    
    $(document).ready(function() {
        editor = new $.fn.dataTable.Editor( {
            table: "#companyOwnership",
            fields: [ {
                    label: "Owner ID:",
                    name: "ownerId"
                }, {
                    label: "Company Name:",
                    name: "ownerName"
                }, {
                    label: "Ownership(%):",
                    name: "ownerPercent"
                }
            ]
        } );
    
    
        editor.dependent( 'ownerId', function ( val, data, cb) {
           if ( val!=='' )
           {
              if(typeof(data.rows !== 'undefined'))
              {
               $.ajax( {
                  url: '/ed/ajax/companyName.txt',
                  dataType: 'json',
                  data:data,
                  success: function ( json ) {
                     cb(json);
                  }
                } );
             }
          }
          return {};
          }, {event: 'change'} );
    
        var table = $('#companyOwnership').DataTable( {
            "jQueryUI": true,
            dom: "Bftr",
            ajax: "/ed/ajax/companyOwnershipData.txt",
    
            scrollY:        '15vh',
            scrollCollapse: true,
            paging:         false,
            columns: [
                { data: "ownerId",  className :"editable" },
                { data: "ownerName" },
                { data: "ownerPercent", className :"editable" }
    
            ],
            select: true,
            order: [[ 0, 'asc' ]],
            keys: {
                        columns: '.editable',
                        keys: [ 9 ],
                        editor: editor,
                        editOnFocus: true
            },
            buttons: [
                { extend: "create", editor: editor }
            ],
            language: {      "search": "Filter"}
        } );
    
    } );
    

    For testing purposes I have hardcoded ajax call (ed/ajax/companyName.txt') to return

    {   "values": {
            "ownerName": "Retrieved throw AJAX"
        }
    }
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    We have two dependent fields ownerId and ownerName. When the ownerId changes, ownerName needs to be populated.

    This sounds to me like it should be done as a left join on the server when reading data. Is there a reason for not doing that? It would ensure data integrity, which the current method doesn't.

    The dependency API is getting executed even when tabbing through ownerId while inline editing.

    Yes - when entering into edit mode the dependent callback has to be called, to ensure that everything in correctly in sync for the row being edited. In this case you might want to check to see if the name is different before setting it.

    However, I would very strongly encourage you to look at using a left join unless there is a technical reason for not being able to use one here. It would resolve this issue, since the dependent action would no longer be required.

    Allan

This discussion has been closed.