How to call Ajax from Javascript function

Question

I have a delete button in a <td> in a html table with an onclick() function attached to it. How to call ajax from this function i.e. I'd like to get the values in the <tr> and post to a URL.

    <script>
        function deleteRow(btn) {
            var row = btn.parentNode.parentNode;
            id = row.cells[0].textContent;
            //call ajax, pass id as data
        }
    </script>

  <body>
    <table>
      <tr>
        <th>Id</th>
        <th>Lastname</th>
        <th>Firstname</th>
        <th></th>
      </tr>
      <tr>
        <td>122</td>
        <td>Jackson</td>
        <td>Evans</td>
        <td><button type="button" onclick="deleteRow(this)">Delete row</button></td>
      </tr>
    </table>
  </body>

It doesn't look like you've done much research. There are countless examples of this online. Have you tried making an AJAX request? If so, please add your attempt to the question. — , Jun 01 '18 at 14:29
How you call ajax will depend on how the service which does the deleting is set up. — Heretic Monkey, Jun 01 '18 at 14:32
Google is your best friend here: https://www.google.com/search?q=ajax+post+request — Sid, Jun 01 '18 at 14:33
Dupe, if the question is not too broad: [How to call a REST web service API from JavaScript?](https://stackoverflow.com/q/36975619) or [web service call from javascript](https://stackoverflow.com/q/23520590) — Heretic Monkey, Jun 01 '18 at 14:38
@DougKruger Please kindly check out my answer again, I have updated it. It will help you... `:)` — Praveen Kumar Purushothaman, Jun 01 '18 at 21:21

Praveen Kumar Purushothaman · Accepted Answer · 2018-06-01T21:21:03.513

0

You can use something here. Follow the comments on the JavaScript section:

// Run at document load.
$(function () {
  // Get the button. Make it unobtrusive as there could be more.
  // Execute this on click event.
  $(".del-btn").click(function () {
    // Fire an AJAX call.
    $.post("/path/to/delete", {id: $(this).closest("tr").find("td:first").text()}, function () {
      $(this).closest("tr").fadeOut();
    });
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<table>
  <tr>
    <th>Id</th>
    <th>Lastname</th>
    <th>Firstname</th>
    <th></th>
  </tr>
  <tr>
    <td>122</td>
    <td>Jackson</td>
    <td>Evans</td>
    <td><button type="button" class="del-btn">Delete row</button></td>
  </tr>
</table>

As mentioned by Sid, I would also ask you to please use data-* attributes and don't fully rely on the DOM for the data purposes. This will require you to change:

// Run at document load.
$(function () {
  // Get the button. Make it unobtrusive as there could be more.
  // Execute this on click event.
  $(".del-btn").click(function () {
    // Fire an AJAX call.
    $.post("/path/to/delete", {id: $(this).closest("tr").data("id")}, function () {
      $(this).closest("tr").fadeOut();
    });
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<table>
  <tr>
    <th>Id</th>
    <th>Lastname</th>
    <th>Firstname</th>
    <th></th>
  </tr>
  <tr data-id="122">
    <td>122</td>
    <td>Jackson</td>
    <td>Evans</td>
    <td><button type="button" class="del-btn">Delete row</button></td>
  </tr>
</table>

edited Jun 01 '18 at 21:21

answered Jun 01 '18 at 14:29

Praveen Kumar Purushothaman

164,888
24
203
252

3

Using DOM elements for data is an anti-patter, I would rather suggest passing the data to the method, or using data attributes – Sid Jun 01 '18 at 14:31
4

You are making some big assumptions as to the nature of the service which does the deleting. If it's a RESTful service, the method would be DELETE, not POST. Perhaps you could wait until the question is clarified before answering? – Heretic Monkey Jun 01 '18 at 14:33
Yes @MikeMcCaughan – Praveen Kumar Purushothaman Jun 01 '18 at 15:50
@MikeMcCaughan Looking at the OP accepting my answer shows that mine works. It's not a big deal, looks like OP is a newbie trying to do some quick POST method. You can't expect everyone to build a perfect RESTful system, where you correctly implement all the `GET, POST, PUT, DELETE` methods. Even I don't do it and limit myself to `GET` and `POST` methods. The key to take here is understand your audience and cater to their needs, at the same time, don't give an information that's too wrong or too specific to the problem. I hope I am making my point clear here. – Praveen Kumar Purushothaman Jun 01 '18 at 21:18
1

@Sid Agreed using `data-*` attributes are good way of using it. I have updated it in the answer and gave you due credits too boss. Also look at my previous comment. Thanks. – Praveen Kumar Purushothaman Jun 01 '18 at 21:19
@MikeMcCaughan I have also updated my answer. Kindly review it again. Thanks. – Praveen Kumar Purushothaman Jun 01 '18 at 21:21
1

It's still an answer to a poor question. You've essentially written the OP's code for them, and answered a duplicate of many other questions. I never said that your code didn't work, but I did ask that you wait until the question is clarified. So you made a guess that panned out, and made the site a little more cluttered with duplicates. Congratulations? – Heretic Monkey Jun 02 '18 at 00:15

score -1 · Answer 2 · answered Jun 01 '18 at 14:30

-1

I would rather not give away direct answer. A sample code using jquery is:

$("selector").click(function(){
    $.post("/your/path", function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

answered Jun 01 '18 at 14:30

Sid

4,893
14
55
110

How to call Ajax from Javascript function

2 Answers2