Editor Inline Select2 field automatically sets to default on click

Maniz Shrestha

I am using inline editor and select2 for a dropdown field. After insert data into the select2 field, if I click on it the value disappears and is reset to placeholder option in the frontend. When I click somewhere else the placeholder data is saved.

$(document).ready(function () {
var editor; // use a global for the submit and return data rendering in the examples

 editor = new $.fn.dataTable.Editor({
     ajax: "./user_processing.php",
     table: "#user_table",
     fields: [{
             label: "ID:",
             name: "Subject.Id",
             attr: {
                 disabled: true
             }
        }, {
             label: "Name:",
             name: "Subject.Name",
             attr: {
                 disabled: true
             }
        }, 
         {
             label: "Manager 1:",
             name: "Subject.Manager1",
             type: "select2",
             opts: {
                 ajax: {
                     url: "manager_ajax.php",
                     type: "post",
                     dataType: 'json',
                     delay: 250,
                     data: function (params) {
                         return {
                             searchTerm: params.term // search term
                         };
                     },
                     processResults: function (response) {
                         return {
                             results: response
                         };
                     }
                 },
                 allowClear: false,
                 placeholder: {
                     id: "",
                     text: "NA"
                 },

             }
         },]
 });

 // Activate an inline edit on click of a table cell
 $('#user_table').on('click', 'tbody td:not(:first-child)', function (e) {
     editor.inline(this, {
         onBlur: 'submit'
     });
 });

 $('#user_table').DataTable({
     serverSide: true,
     dom: "Blfrtip",
     pageLength: 25,
     lengthMenu: [
            [10, 25, 50, 100, 200, 400],
            ['10 rows', '25 rows', '50 rows', '100 rows', '200 rows', '400 rows']
        ],
     ajax: {
         url: "./user_processing.php",
         type: 'POST'
     },
     columns: [{
             data: null,
             defaultContent: "",
             className: "select-checkbox",
             orderable: false,
             searchable: false
            },
         {
             data: "Subject.Id"
            },
         {
             data: "Subject.Name"
            }, 
         {
             data: "Subject.Manager1"
            },![](https://datatables.net/forums/uploads/editor/sv/6xau0t7rjxfy.png "")

        ],
     order: [1, 'asc'],
     select: {
         style: 'os',
         selector: 'td:first-child'
     },
     autoFill: {
         columns: ':not(:first-child)',
         editor: editor
     },
     keys: {
         columns: ':not(:first-child)',
         keys: [9],
         editor: editor,
         editOnFocus: true
     },
     buttons: ['selectAll',
            'selectNone',
         {
             extend: 'collection',
             text: 'Export',
             buttons: [
                'copy',
                'excel',
                'csv',
                'pdf',
                'print'
            ]
        },
         {
             extend: "edit",
             editor: editor
            }
        ]
 });

 editor.on('postEdit', function (e, json, data) {
     $("#alertBulk").removeClass('d-none');
     $("#alertBulk").fadeTo(4000, 500).slideUp(500, function () {
         $("#success-alert").slideUp(500);
     });
 });

});

allan

Hi,

The issue is most likely that your "manager_ajax.php" script for Select2 isn't handling the initialValue request made by the script. For example it might send:

initialValue: true
value[]: 2

Then it needs to return an array of the options that were selected (label and value).

Allan

Maniz Shrestha

Yes, you are correct. I am using limit in SQL so that the dropdown is not very long. Here is my code for manager.php. Any suggestions? Thanks for the quick response Allan.

<?php
    include 'include/db_connect.php';

    if(!isset($_POST['searchTerm'])){ 
      $fetchData = mysqli_query($db,"select * from People order by Unix_Id limit 20");
    }else{ 
      $search = $_POST['searchTerm'];   
      $fetchData = mysqli_query($db,"select * from People where Unix_Id like '%".$search."%' order by Unix_Id limit 20");
    } 

    $data = array();
    while ($row = mysqli_fetch_array($fetchData)) { 
      $data[] = array("id"=>$row['Unix_Id'], "text"=>$row['Unix_Id'] ." (". $row['Employee_Name'].")");
    }
    echo json_encode($data);

Maniz Shrestha

In AJAX request to manager.php, I cannot see initialValue and value written in the $_POST as a parameter. It appears only as text (PHP cannot grab that as a POST parameter).

Maniz Shrestha

Any suggestions?

allan

I cannot see initialValue and value written in the $_POST as a parameter. It appears only as text (PHP cannot grab that as a POST parameter).

Try $_REQUEST['initialValue']. That said, it does look like you should be able to use $_POST['initialValue'] from the above. Is it saying that is not set?

Allan

Maniz Shrestha

It is saying
Notice: Undefined index: initialValue in /Applications/MAMP/htdocs/CW/manager_ajax.php

Maniz Shrestha

Can you provide me the code to handle the initialValue request in the backend PHP (for me that is manager_ajax.php). The code is in the comment above.

Maniz Shrestha

Just figured out the issue.

I had to add the following to ajax beforesend in editor.select2.js.
jqXhr.setRequestHeader("Content-type", settings.contentType);

This changed the post from plain/text to application/x-www-form-urlencoded.
After that I could see the initialValue in $_POST and return the initialValue as a JSON.

Make sure you have initialValue: true; while initializing fields in datatables.