0

Im trying to delete a row from a database by clicking on a row in a table. Then the row get deleted using ajax request by picking up ID from the row.

my html is:

<div>
    <table class="table table-striped" id="tabble">
        <th>Id</th>
        <th>Name</th>
        <th></th>
        <tbody id="tab"></tbody>

    </table>

    <h3>Add a row to the database</h3>
    <input id="NewPosition" />
    <button onclick="PostData()" class="btn btn-info">Post data</button>
</div>

<button id="Save" class="btn btn-success" onclick="UpdateData()">Update data</button>

My Javascript:

$(document).ready(function () {

        UpdateData();
    });


    $('#tabble tr').click(function () {
        console.log("It works!!!");
        var value = $(this).find('td:first').html();
        alert("Picked value is: " + value);


    });

    function PostData() {

        var position = new Object();
        position.PositionDescription = $('#NewPosition').val(),
            $.ajax({
                url: 'http://localhost:50663/api/CropAssignments',
                type: 'POST',
                dataType: 'json',
                data: position,
                async: false,
                //success: function (data, textStatus, xhr) {
                //    console.log(data);
                //},
                error: function (xhr, textStatus, errorThrown) {
                    console.log('Error in Operation');
                }

            });

        UpdateData();
    };

    function UpdateData() {

        var tabBody = $('#tab');
        tabBody.empty();
        var tabulka = '';
        //obj.CropAssignments.PositionId = $('#container').val();
        $.ajax({
            url: 'http://localhost:50663/api/PositionsAPI',
            type: 'GET',
            dataType: 'json',
            success: function (data, textStatus, xhr) {

                //data.forEach(function (item, index) {
                //    console.log(index + " " + item.PositionDescription);
                //});

                data.forEach(function (item, index) {
                    tabulka += '<tr><td>' + item.PositionId + '</td><td>' + item.PositionDescription + '</td><td><i class="far fa-trash-alt" style="color: red"></i></td></tr>';
                    //console.log(index + " " + item.PositionDescription);
                });

                tabBody.append(tabulka);
                tabBody.sort();

            },
            error: function (xhr, textStatus, errorThrown) {
                console.log('Error in Operation');
            }

        });
    };

this part of code should do the trick, but it doesn't do anything:

$(document).ready(function () {

        UpdateData();
    });

I tried to do this according to this example http://jsfiddle.net/65JPw/2/.

Any idea what is wrong here?

Any help greatly appreciated :)

xcelm
  • 541
  • 1
  • 6
  • 19
  • 1
    `$('#tabble tr').click(...` is being executed outside of the document ready. So it will execute before the logic in the document ready executes. Even if you moved it into the document ready, the method you are calling is performing an ajax request that is asynchronously creating rows. You need to either bind to the rows after the ajax request has made them, or use a delegate instead. – Taplar Jun 26 '19 at 18:48
  • Aside from the above, remove `async: false`. It's terrible practice, and you don't need it here. – Rory McCrossan Jun 26 '19 at 18:52
  • @Taplar thanks for pointing me in the right direction - this was the way to go – xcelm Jun 26 '19 at 19:13
  • @RoryMcCrossan - I think I do - when posting a new line to the DB, it only appears with 'async: false'. Without it I need to do F5 in order to display the new line. Anything I'm missing or can be improved? Thanks – xcelm Jun 26 '19 at 19:14
  • 1
    Put the call to `UpdateData()` within the `success` callback which you commented out – Rory McCrossan Jun 26 '19 at 20:05
  • @RoryMcCrossan - wow thanks - that does make sense :) – xcelm Jun 27 '19 at 06:05

0 Answers0