locked
Call Action Method from Dropdown list change event inside jquery datatable RRS feed

  • Question

  • User-2131816816 posted

    I would like to update my status based on what I select from the dropdown list.

    I am using jquery datatable to display my data. Basic data looks like below.

    Technically my status column is display with dropdown list which 4 different values. If I change my dropdown value from Pending to Active then it needs to update database and reload with the changed data. 

    Name Email Description Status
    ABC a@y.c my name is A Active
    XYZ x@y.c may name is X Pending

    If someone can make small example then that would be great.

    Thanks.

    Wednesday, January 30, 2019 10:48 PM

All replies

  • User1520731567 posted

    Hi hozefa_unwala,

    What is your code?

    What error messages you encountered?

    Please post more details.

    Best Regards.

    Yuki Tao

    Thursday, January 31, 2019 7:05 AM
  • User-2131816816 posted

    I am beginner in MVC and I need someone who can help to write the code. I can display records. The only help needed is how to update data directly from the dropdown. How to write jquery function.

    Thanks.

    Thursday, January 31, 2019 3:57 PM
  • User1520731567 posted

    Hi hozefa_unwala,

    I think you could use change() event to capture dropdownlist and then use ajax() to reload,

    For example:

    $("#DropdownId").change(function() {
        loadData();
    
    }); 
    
    
    function loadData(){
       var dropdownSelected = $("#DropdownId").val()
        var changeValue = {
            "isDropdownSelected" : dropdownSelected
        }  
    
        $("#demoTable").DataTable({
            "columns": [
               { "data": "xx1" },
               { "data": "xx2" },
               { "data": "xx3" }
    
               ],
               "ajax": {
                   "url": "/ControllerName/ActionName",
                   data : JSON.stringify(changeValue),
                   contentType : 'application/json; charset=utf-8',
                   dataType : "json",
                   "type": "POST",
                   "dataSrc": "[]",
    
               }
           });
    
       }

    assuming your response JSON of ajax is like this:

    [ { "xx1" : "sfsdsdfs" , "xx2" : "322",  "xx3": "sfsdfsdf"}, 
    { "xx1" : "5345345" , "xx2" : "4444",  "xx3": "sadfasds"}] 

    The other methed is like:

    We are creating a reference for later use (var refDataTable = ... show as bold upon). fnDraw function (or same name draw) update table.

    @section scripts {
        <script type="text/javascript">
            var filterValues = {};
            $(document).ready(function () {
                var refDataTable = $("#demoTable").dataTable({
                    serverSide: true,
                    bFilter: false,
                    columns: [
                        { data: "Name" },
                        { data: "SurName" },
                        { data: "ClassRoom" }
                    ],
                    ajax: function (data, callback, settings) {
                        filterValues.draw = data.draw;
                        $.ajax({
                            url: '/ControllerName/ActionName',
                            method: 'GET',
                            data: filterValues
                        }).done(callback);
                    }
                });

    $("#DropdownId").change(function() {
    ...
    filterValues.name = "111";
    ...
    refDataTable.fnDraw();
    });
    }); }); </script> }

    More details, you could refer to this similar demo:

    https://www.codeproject.com/Articles/1118603/%2FArticles%2F1118603%2FjQuery-DataTable-with-AJAX-on-ASP-NET

    Best Regards.

    Yuki Tao

    Friday, February 1, 2019 9:37 AM
  • User-2131816816 posted

    can't get the id of my dropdown list because it's inside jquery datattable. Please refer my 1st question.

    Friday, February 1, 2019 5:39 PM
  • User1520731567 posted

    Hi hozefa_unwala,

    can't get the id of my dropdown list because it's inside jquery datattable. Please refer my 1st question.

    It doesn't necessarily need an ID, it can be any value that can represent the drop-down box.

    Best Regards.

    Yuki Tao

    Monday, February 4, 2019 8:29 AM
  • User-2131816816 posted

    If you can make a small project and send me the entire thing then that would really help me.

    Thanks.

    Monday, February 4, 2019 5:28 PM
  • User1520731567 posted

    Hi hozefa_unwala,

    This article has the method you want,it can give you more inspiration,why not spend some time to learn?

    https://www.codeproject.com/Articles/1118603/%2FArticles%2F1118603%2FjQuery-DataTable-with-AJAX-on-ASP-NET

    Best Regards.

    Yuki Tao

    Tuesday, February 5, 2019 7:55 AM