Btukfyl

I am using jQuery dataTables, ajax, and web services to display my data from the SQL database. I am successful in doing this, however now I need a way to be able to update only one column of the record in the database from the datatable.

What I want: if I click on the edit button, the will be a modal pop and then I input a value in the pop, that value should be added to the already existing value in the database. This is because entries should accumulate on a daily interval when new entries are made. my issue is that I have managed to write the web method in the web service and it looks fine, but I can't update the field i want, please can you help as I don't have much knowledge with jQuery dataTables and ajax (how to get the id of the record I want to update and finally able to update in the client side using jQuery ajax)

This is what I have tried:

Clientside jQuery and ajax:

 $(document).ready(function () {

        insertkpi();

        submitinit();



        displayKPI();

        updateprogress(Id);

    });

Displaying in the DataTable

 function displayKPI() {

        $.ajax({

                url: 'MyService.asmx/getKPI',

                method: 'post',

                dataType: 'json',

                success: function (data) {

                    $('#datatable').DataTable({

                        data: data,

                        columns: [

                            { 'data': 'Name' },

                            {

                                'data': '', 'render': function () {

                                    return "<a class='btn btn-default btn-sm' data-target='#iniativemodal' data-toggle='modal'><i class='glyphicon glyphicon-pencil'>Initiative</i></a>";

                                }



                            },

                            { 'data': 'Initiative' },

                            {

                                'data': 'perfomance',

                                'render': function (perfomance) {

                                    return perfomance + "%";

                                }

                            },

                            {

                                'data': 'progress'

                                //'render': function (progress) {

                                //    return "<a class='btn btn-default btn-sm' data-target='#progressmodal' data-toggle='modal'><i class='fa fa-pencil'>Progress</i></a>";

                               // }

                            },

                            { 'data': 'BaseTarget' },

                            {

                                'data': 'streachTarget'



                            },

                            { 'data': 'Period' },

                            {

                                'data': 'Id' ,

                                'render': function (Id, type, full, meta) {



                                    return '<a href="#" onclick="updateprogress(' + Id + ')" ><i class="glyphicon glyphicon-pencil"></i></a>';

                                }

                            },

                        ]                

                    });

                }



            }

        );

    }

The function to update the database value taking the ID from the DataTable:

 function updateprogress(Id) {



       // var url = "MyService.asmx/getProgress?Id=" + Id+"";

       // var url = "MyService.asmx/updateprogres";

        $("#progrdata").load("MyService.asmx/updateprogres?Id=" + Id + "", function () {

            $("#progressmodal").modal("show");



            $("#progrebtn").click(function () {



                var progress = $('#pgtxt').val();

                var cid = Id.val();

                $.ajax({

                    type: "POST",

                    url: 'MyService.asmx/updateprogres',

                    contentType: "application/json;charset=utf-8",

                    datatype: "json",

                    data: '{Id: ' +Id + ', progress: "' + progress + '" }',

                    success: function () {



                        $('#progressmodal').modal('hide');

                    },

                });

            });

        })

    }

HTML markup:

 <div class="modal" id="progressmodal" data-keyboad="false" data-backdrop="static" tabindex="-1">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title">Input Progress</h4>

                <button class="close" data-dismiss="modal">&times;</button>

                </div>

            <div class="modal-body" id="progrdata">



                <div class="form-group">

                    <label id ="pnamelb">Cumulative Progress</label>

                    <label id="prglbl" />

                </div>

                <div class="form-group">

                    <label id ="pinelb">Enter progress</label>

                    <label id="finalpglbl"></label>

                    <input type="text" class="form-control" id="pgtxt" />

                </div>

                </div>

            <div class="modal-footer">

                <button class="btn-primary" id="progrebtn">Save</button>

                <button class="btn-primary" data-dismiss="modal">Cancel</button>

                </div>

            </div>

    </div>

</div>

My web method:

[WebMethod]

    public void updateprogres(int Id,int progress)

    {

        string constring = System.Configuration.ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString;

        using (SqlConnection conn = new SqlConnection(constring))

        {



            using (SqlCommand cmd = new SqlCommand("UPDATE KPIs SET progress=@progress WHERE [Id] =@Id",conn))

            {

                try

                {

                    conn.Open();

                    cmd.Parameters.AddWithValue("@Id", Id);

                    cmd.Parameters.AddWithValue("@progress", progress);

                    cmd.ExecuteNonQuery();

                }

                catch (Exception)

                {

                }

                finally

                {

                    conn.Close();

                }

            }

        }

    }

In success method of your ajax post. find the index of the td you like to update and set the progress to it. like ;

   $("#progrebtn").closest("tr").find("td:eq(4)").text(progress);

https://codepen.io/anon/pen/oQaWeg

So regarding my issue i have managed to solve it now, my error was that i was missing another parameter, that is the one i wanted to update. check the JS function now

 function updateprogress(Id) {



        // var url = "MyService.asmx/getProgress?Id=" + Id+"";



        var urll = "MyService.asmx/updateprogres?Id=" + Id + "&progress=" + $('#pgtxt').val() + "";



        $("#progrdata").load(urll, function () {

            $("#progressmodal").modal("show");



            $("#progrebtn").click(function () {



                var progress = $('#pgtxt').val();



                $.ajax({

                    type: "POST",

                   url: urll,

                    contentType: "application/json;charset=utf-8",

                    datatype: "json",

                    data: '{Id: ' +Id + ', progress: "' + progress + '" }',

                    success: function () {

                        $("#progrebtn").closest("tr").find("td:eq(4)").text(400);

                        $('#progressmodal').modal('hide');

                    },



                });





            });

        })









    }