Answers

• x1484 Posts: 18Questions: 2Answers: 0

  October 2019 edited October 2019

  Hi again

  Sorry to not have been sufficiently accurate in my question.

  I have included the js, the css, included the js code, specified the employee_id field type as "autoComplete" as well.

  As soon as I specify the field type, nothing works.

  So is there any include sequence to take care of ?
  Thanks
  x1484
• x1484 Posts: 18Questions: 2Answers: 0

  October 2019 edited October 2019

  Hello,

  I found out the reason, bad js include path

  Nevertheless, my employee id field appears but the ajax php page is never called.

  Here is a code fragment, is the syntax correct ?

  the alert trace box is never displayed :

  gridedit = new $.fn.dataTable.Editor( {
          table: '#grid',
          fields: [ 
              {
                  label: "Employee ID",
                  name: "employee_id",
                  type: "autoComplete",
                  source: function (query, result) {
                              alert('trace here');
                              $.ajax( {
                                          url: 'ajax.php',
                                          cache: false,
                                          async: false,
                                          data:'query=' + query,            
                                          dataType:"json",
                                          type:"POST",
                                          dataType: 'json',
                                          success: function ( data ) {
  
                                              // code here
  
                                          }
                                      } );
                  }
              }
              <...>
  

  Thanks so much
  x1484
• x1484 Posts: 18Questions: 2Answers: 0

  October 2019

  Hi again,

  I removed the alert box and simply put a debug text file in ajax.php to see what is going on and ajax.php is never called. The same ajax.php is called from the dependent API and is working nice.

  I have no idea what makes the autocomplete not working...

  Thanks
  x1484
• allan Posts: 63,192Questions: 1Answers: 10,412 Site admin

  October 2019

  Hi,

  The source option needs to be wrapped in a opts object - e.g.:

  gridedit = new $.fn.dataTable.Editor( {
          table: '#grid',
          fields: [
              {
                  label: "Employee ID",
                  name: "employee_id",
                  type: "autoComplete",
                  opts: {
                      source: function (query, result) {
                              alert('trace here');
                              $.ajax( {
                                          url: 'ajax.php',
                                          cache: false,
                                          async: false,
                                          data:'query=' + query,           
                                          dataType:"json",
                                          type:"POST",
                                          dataType: 'json',
                                          success: function ( data ) {
   
                                              // code here
   
                                          }
                                      } );
                  }
                }
              }
              <...>
  

  Anything in the opts object is passed on to jQuery UI's auto complete.

  Allan
• x1484 Posts: 18Questions: 2Answers: 0

  October 2019

  Hello Allan

  Thanks a lot.

  To complete my post, there is one bug i found out, solved by replacing that line

  data:'query=' + query,

  by this line

  data:'query=' + query.term,

  But there is still something which is strange. When i'm in the success section, i do this :

  success: function (data) {
             result ( $.map( data,    function (item) { 
                return {  emp_id: item.emp_id, 
                      emp_name: item.emp_name,
                      label: item.emp_id + '('+item.emp_name+')',
                      value: item.emp_id 
                  };
               } 
              ) 
             );
          }
      minLength: 2,
         select: function( event, ui ) {
            gridedit.field('emp_id').val(ui.item.emp_id);
            $(table.cell( current_row, COLUMN_EMP_ID ).node()).html(ui.item.emp_id);
            gridedit.field('emp_name').val(ui.item.emp_name);
            $(table.cell( current_row, COLUMN_EMP_NAME ).node()).html(ui.item.emp_name);
         }
  }   
  

  And when i select one of the employee id, it fills up the employee name but the cursor does not exit from the autocomplete entry field (emp_id).

  The problem is due to this (when i remove it, the cursor exits out of the autocomplete field) :

  gridedit.field('emp_id').val(ui.item.emp_id);
                $(table.cell( current_row, COLUMN_EMP_ID ).node()).html(ui.item.emp_id);
                gridedit.field('emp_name').val(ui.item.emp_name);
                $(table.cell( current_row, COLUMN_EMP_NAME ).node()).html(ui.item.emp_name);
  

  So how can i set the other columns values in the DataTable Editor correctly when the user select an autocomplete value ?

  Any ideas ?

  Thanks so much
  x1484
• x1484 Posts: 18Questions: 2Answers: 0

  October 2019

  Hello again

  Is it a recommended practice to set Datatable Editor fields via this select: Jquery Autocomplete feature ?
  Before implementing it, i have used the dependent API but that one does not fire anymore except if i select a suggested item via the mouse. If i select an item via the keyboard the dependent() API does not work anymore...
  Thanks
  x1484
• allan Posts: 63,192Questions: 1Answers: 10,412 Site admin

  October 2019

  If i select an item via the keyboard the dependent() API does not work anymore...

  That suggests that AutoComplete is not triggering a change event when selecting a value via the keyboard. Try this - I just jQuery UI AutoComplete uses the select event:

  editor.dependent(
    'myField',
    function(val, data) {
      ...
    },
    {
      event: 'select change'
    }
  );
  

  That will bind to both the select and change events.

  Allan