Search code examples
phpjquerydropdownpopulate

Cannot populate database column in dropdown

This issue is reminiscent of a question I asked a few years ago:

jQuery dropdown option:first selected

Here is the jQuery function that successfully populates the dropdown id #namelist:

$('#edituserModal').on('show.bs.modal', function (e) {
    initializeSelect($('#namelist'), 'assets/process/getNames.php', function (item) { 
        return {
            value: item.name,
            text: item.name
        }
    }); 
});

The code directly above successfully populates the HTML dropdown select here:

<select id="namelist">
</select>

Here is the code that creates the datatable:

$('#datatable').DataTable({
    "searching": true,
    "paging": true,
    "serverSide": false,
    "type": "POST", 
    "ajax": {
        "url": "assets/process/getusers.php", 
        "dataSrc": ""
    },
    "columns": 
    [
        { "data": "null",
          "render": function ( data, type, row, meta )
          {
            return "<i class='far fa-edit editUser' 
                    title='Edit User' data-editdeptrepname='"+row.name+"'></i>";
          }
        },
        {"data": "username"},
        // few more columns
    ]
});

The user clicks on the icon with the class .editUser. That onClick event is here:

$('#datatable').on('click', 'tr > td > .editUser', function(e){
  e.preventDefault();
  var $dataTable = $('#datatable').DataTable();
  var tr = $(this).closest('tr');
  var rowData = $dataTable.row(tr).data();

  var name = $(this).attr('data-name');

  $('#namelist').val(name);
  // $('#namelist').val(rowData.name); // <-- I tried this
  // $('#namelist').val(rowData.name).text(rowData.name); // <-- also tried this
  // $('#namelist option:first').val(rowData.name).text(rowData.name);  // <-- this too
  // $('#namelist option:first').val(name); // <-- this as well

  $('#edituserModal').modal('show');
});

As stated above, the dropdown list is populated with a list of names. When a user opens the modal, the first name that should appear in the dropdown should be whatever the name is saved in the db.

Problem is, in the modal, the dropdown list doesn't initially display the name saved in the database. The dropdown does still display all of the selectable name options, but it's the name saved in the database that should initially be displayed.

As you will see in the last piece of code, I've tried several methods to make it work, all to no avail.

Here is a pic of the dropdown after the modal opens. It should initially read the name currently saved in the database. I can click on the dropdown and it shows a whole list of names. But I need it to initially display the saved name:

enter image description here

What on Earth am I missing? I've done this a hundred times, and it has never failed me until now.

Solution

  • Here it is:

     $('#datatable').on('click', 'tr > td > .editUser', function(e){
    e.preventDefault();

    // Here is where sould go your initializeSelect call
    initializeSelect($('#namelist'), 'assets/process/getNames.php', function (item) { 
        return {
            value: item.name,
            text: item.name
        }
    }); 

    var row = $(this).parent().parent();
    name = row[0].cells[0].innerText;
    $('#namelist option:first').val(name).text(name);

    $('#edituserModal').modal('show');
});

    By doing this, you dont need your modal show event listener anymore.

    Hope this helped.