Question posted in
You can find the official documentation here.

Jquery ajax – Ajax on click function – not responding buttons

I have small question, below is my jsp page, i have button for getting user data from database, it is working properly, now i want to add delete button in each row, buttons are visible but there is no action after clicking on delete buttons.
Do you know why the buttons don’t respond?

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>PageTitle</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-light">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="login">Login</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="register">Register</a>
        </li>
    </ul>
</nav>
<button class="button test-ajax" type="button">Pobierz listę użytkowników</button>
<table class="table">
    <thead>
    <tr>
        <th scope="col">id</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Mail</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<script type="text/javascript">
    apiUrl = "http://localhost:8080/";
    $list = $('.table tbody');

    $(".test-ajax").on('click', function () {
        $btn = $(this);
        $.ajax({
            url: apiUrl + '/users',
            dataType: 'json'
        })
            .done((res) => {
                $list.empty();
                $.each(res, function (i, item) {
                    $list.append('<tr><th scope="row" >' + res[i].id + '</th><td>' + res[i].firstname + '</td><td>' + res[i].lastname + '</td>' +
                        '<td>' + res[i].email + '</td><td><button class="btn btn-danger btn-xs btn-delete" id=aaa'+res[i].id+'>Delete</button></td></tr>');
                })
            })
    });


</script>
<script type="text/javascript">
    apiUrl = "http://localhost:8080/";
    $(".btn-delete").on('click', function (){
        $.ajax({
            url: apiUrl + '/users/1',
            dataType: 'json'
        });
    });
</script>
</body>
</html>
Tags:

2

Answers


  1. 0

    Binding dynamic elements require the following changes to your code. Please check and let me know

    <script type="text/javascript">
    apiUrl = "http://localhost:8080/";

    //delegate will work though it is depricated
    $( "body" ).delegate( ".btn-delete", "click", function() {
        $.ajax({
            url: apiUrl + '/users/1',
            dataType: 'json'
        });
    });

    // use this function to avoid any depricated issue
    $("body").on("click",".btn-delete", function(){
        $.ajax({
            url: apiUrl + '/users/1',
            dataType: 'json'
        });
    });
</script>
    Login or Signup to reply.
  2. 0

    Like this:

    <script type="text/javascript">
    apiUrl = "http://localhost:8080/";
    $(".table tbody").on('click','.btn-delete', function (){
        $.ajax({
            url: apiUrl + '/users/1',
            dataType: 'json'
        });
    });
</script>

    Binding dynamic elements need to assign parent elements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search