CODEWITHSUNDEEP
jqueryajaxasp.net-mvcasp.net-web-api
Batuhan
Batuhan

Reputation: 503

Sending one AJAX request, but receiving multiple requests on the controller side

I am sending ajax HTML DELETE request from my web site to my RESTful Web Service (Asp.NET MVC 4 Web-Api ApiController) to delete the selected data from my HTML table. I get the selected row with jquery.

When I press my delete button which sends the delete ajax request everything works fine. However, the problem is after I send my first request, if I click the delete button for the second time, interestingly the controller receives two requests. Let me explain the problem with an example:

Suppose I have two row data of type Person which has Id, Name, Surname:

1 John Brown
2 Matthew Jonhson

Suppose I select the first row of the table and click delete button. My Api Controller receives the request as expected and deletes the data from database. Everything is okay upto now. But, after deleting the first row, when I select the second row and press the delete button my controller receives delete requests for both the first row and the second row. More interestingly, when I click the delete button for the third time, controller receives three requests and this goes on...

I provide the code that sends ajax request below:

$("#delete").click(function () {
    $.ajax({
        url: "api/Person/Delete?id=" + id,
        type: "DELETE"
    }).success(function (data) { create(data); });
});

I couldn't resolve the problem. Any suggestion will be greatly appreciated.

i return my data json type from get api controller and i create my table rows with loop in script and table rows have not id.After click on the table a receive row index,according to index i take row data(id name surname) and i send delete request with this parameters.But i click second time,firstly api controller receive first row data after this receive second row data,how i solve this problem please give your opinion thanks for your interest:D

data is coming get api controller(json type).

function create(data) {

        var num_cols = 3
        var theader = '<table id="datatable" border="1">\n';
        var tbody = '<tbody>';

        tbody += '<tr id="firstrow">';
        tbody += '<th> ID </th>';
        tbody += '<th> Name </th>';
        tbody += '<th> Surname </th></tr>';

        for (var i = 0; i < data.length; i++) {

            tbody += '<tr id="tr">';

            tbody += '<td>' + '<span contenteditable=\"true\">' + data[i].Id +       '<\/span' + '</td>';
            tbody += '<td>' + '<span contenteditable=\"true\">' + data[i].Name + '<\/span' + '</td>';
            tbody += '<td>' + '<span contenteditable=\"true\">' + data[i].Surname + '<\/span' + '</td>';

            tbody += '</tr>\n';

        }
        tbody += '</tbody>';
        var tfooter = '</table>';
        document.getElementById('tablodiv').innerHTML = theader + tbody + tfooter;

}

Upvotes: 2

Views: 1707

Answers (1)

Brad Christie
Brad Christie

Reputation: 101614

You have multiple rows but assign only one unique ID to bind to? Look in to using classes instead of IDs. IDs should be unique (only one "delete" on the entire page, not one per row).

Chances are your biding is getting confused and firing twice because the IDs aren't unique.

Also, I'm coming to this conclusion because your binding is $('#delete').click(...) and you only reference id in your AJAX call and not iterate over a collection of ids. Otherwise, a checkbox--per-line would have some form of iterator and multiple AJAX calls (or at the very least bundle the DELETE request so it's sending multiple IDs).

Having said that, try something like (excuse my creative liberty on the element structure and how I've stored the IDs):

<div class="people">
  <div class="person" data-id="1">
    John Brown
    <span class="delete"></span>
  </div>
  <div class="person" data-id="2">
    Matthew Johnson
    <span class="delete"></span>
  </div>
</div>

Then your JS could look like:

$('.person .delete').click(function(){
  var id = new Number($(this).closest('.person').data('id'));
  if (!isNaN(id)){
    $.ajax({
      type: 'DELETE',
      url: 'api/Person/Delete?id=' + $(this).closest('.person').data('id')
    }).success(function(data){
      create(data);
    });
  }
});

Upvotes: 1

Related Questions