0

I want to add an inline dropdown list that when it changes updates db via ajax. I get as far as getting an editable dropdown but cant get it to send data when changed.

html

<td>
    <select name="status" class="ui compact dropdown select-first update" id="status">
        <option data-id"18956" data-column="ActionStatus" value="longlist">Longlist</option> 
        <option selected="" data-id"18956"="" data-column="ActionStatus" value="backburner">Backburner</option> 
        <option data-id"18956" data-column="ActionStatus" value="paperwork">Paperwork</option> 
        <option data-id"18956" data-column="ActionStatus" value="shortlist">Shortlist</option> 
        <option data-id"18956" data-column="ActionStatus" value="submitted">Submit</option> 
        <option data-id"18956" data-column="ActionStatus" value="interview">Interview</option> 
        <option data-id"18956" data-column="ActionStatus" value="start">Placed</option> 
    </select>
</td>

This should send the value to ajax function

$(document).on('blur', '.update', function(){
    var id = $(this).data("id");
    var column_name = $(this).data("column");
    var value = $(this).text();
    update_data(id, column_name, value);
});

I also tried this js code (BUT it is inactive in my current code)

$("#status").change(function(){
    var id = $(this).data("id");
    var column_name = $(this).data("column");
    var value = $(this).text();
    update_data(id, column_name, value);
    alert(status);
});



function update_data(id, column_name, value){
        $.ajax({
         url:"ajax/Recruitment/doUpdateInsert.php",
         method:"POST",
         data:{id:id, column_name:column_name, value:value},
         success:function(data) {
                $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
//                $('#user_data').DataTable().destroy();
//                fetch_data();
         }
        });
            setInterval(function(){
             $('#alert_message').html('');
        }, 5000);
  }
Natie Rautenbach
  • 43
  • 9
  • 1
    Possible duplicate of [jQuery get value of select onChange](https://stackoverflow.com/questions/11179406/jquery-get-value-of-select-onchange) – devlin carnate Jan 15 '18 at 19:31
  • 1
    @Natie ... please provide your code definition for `update_data`. – IncredibleHat Jan 15 '18 at 19:35
  • Oh, and your html seems a bit garbled on the data-id... you have `data-id"18956"=""` ... which should really be `data-id="18956"` – IncredibleHat Jan 15 '18 at 19:40
  • update_data is not the problem, I am not getting any values to it. Let me fix the data-id problem - Thanks @IncredibleHat – Natie Rautenbach Jan 16 '18 at 06:27
  • @devlincarnate what makes this different is that it is part of an editable field in a table. If it was simply to get the value of the dropdown that is simple. But each is editable. – Natie Rautenbach Jan 16 '18 at 06:33
  • OK I've added this @devlincarnate - $('#status_dropdown').change(function() { // $(this).val() will work here alert( this.value ); var id = $(this).data("id"); var column_name = $(this).data("column"); var value = $(this).text(); update_data(id, column_name, value); }); with an extra id no the – Natie Rautenbach Jan 16 '18 at 07:00
  • How do you know `update_data` is not getting values? I'll assume you did like `console.log( id ); console.log( column_name );` etc inside of `update_data`, and it says in console like "undefined" or "null"? Also, you are certain there are no other errors being displayed in console? – IncredibleHat Jan 16 '18 at 14:32

0 Answers0