How to add a button in a call and send an update to server about the data of this row

maorlast

I added the following button <button class='updatePrice btn btn-info btn-sm btn-icon icon-left'>Update</button> to all of my cells.
I would like to connect the button to event that will pass the row data to the server and will save it into the database

How can I do that?

    <table id="activeListing" class="table table-striped table-bordered" cellspacing="0" width="100%">
       <thead>
            <tr class="replace-inputs">
                <th class="no-sorting"> @*checkbox*@
                    <input type="checkbox" class="cbr">
                </th>
                <th></th>
                <th>Description</th>
                <th>Desired Price USD</th>
                <th>Listed Price</th>
                <th>Edit</th>
            </tr>
            </thead>

            <tbody></tbody>
        </table>

     $('#activeListing').DataTable({
                lengthMenu: [[25, 50, 250, 500], [25, 50, 250, 500]],
                ajax: 'api/Active/GetActiveListings',
                columns: [
                    {
                        render: function(data, type, row) {
                            return "<td>" +
                                "<input type='checkbox' class='cbr'>" +
                                "</td>";
                        },
                        className: "dt-body-center"
                    },
                    {
                           render: function(data, type, row) {
                              return "<td><a href=" + row.image + " target='blank'><img src='" + row.ImageUrl + "'></a></td>";
                        }
                    },
                    { data: "Title" },
                    { data: "DesiredPrice", render: editIcon },
                    {
                        data: "Price",
                    },
                    {
                        render: function(data, type) {   // HERE I NEED HELP
                            return "<button class='updatePrice btn btn-info btn-sm btn-icon icon-left'>Update</button>";
                        }
                    }
                ]
            });

    public class ActiveController : ApiController
    {
        [Route("Home/api/Active/GetActiveListings")]
        [HttpPost, HttpGet]
        public IHttpActionResult GetActiveListings()
        {
            try
            {
                var request = HttpContext.Current.Request;
                var settings = Properties.Settings.Default;
                using (var db = new Database(settings.DbType, settings.ConnectionString))
                {
                    var response = new Editor(db, "Products", "Id")
                        .Model<Product>()
                        .Process(request)
                        .Data();
 
                    return Json(response);
                }
            }
            catch (Exception ex)
            {
                // Log this
                return BadRequest("error was found~!!");
            }
        }

allan

Is this using Editor? If so, you want to call the edit() method from your button. For that you might use something like:

$('#activeListing').on( 'click', 'tbody button.updatePrice', function () {
  editor.edit( $(this).closest('tr')[0] );
} );

i.e. get the tr element that the button that was clicked on is in and pass it to Editor to start editing the row.

Allan

maorlast

Thanks,
yes, I am working with editor plugin and with your answer I do see that it calling the service, however it opens me a popup where it prompts me to put a value before submit.

what i'm trying to do is simply to submit the value of few cells.

The idea is that the data of few cells will be rendered automatically every x minutes and when the user clicks the updateprice button it will call the backend with that data.

And I am also looking for a code that from the server side, every x minutes will do some Foo calculation and will send data to the datatables.

allan

Oh I see! Sorry - you are looking for a method to get the latest data for that row and then update that display, rather than to submit edited values?

In which case there are two options:

1. Use ajax.reload() (assuming you are using Ajax loaded data). That will refresh the whole table!
2. To refresh just the row, you'll need to make an Ajax call to get the data and then the row().data() method to perform the updata:

$('#activeListing').on( 'click', 'tbody button.updatePrice', function () {
  var tr = $(this).closest('tr');

  $.ajax( {
     ...,
     success: function ( json ) {
        table.row( tr ).data( json ).draw( false );
     }
  } );
} );

Regards,
Allan