Question 70034 in Ajax Question posted in
You can find the official documentation here.

JQuery (this).data("id") returns undefined output – Jquery ajax

I have two files, load-request.php, and load-data.php, the delete button in load-request.php returns an undefined value when I click on the delete button to get its value.
kindly advise, why I am not getting the value.

Load-request.php

<form>
    <table class="table" id="main" border="0" cellspacing="0">
        <tr>
            <td id="table-load">
                <input type="button" id="load-button" value="Load Data">
            </td>
        </tr>
        <table class="table" width="55%">
            <tr>
                <td id="table-data"></td>
            </tr>
        </table>
        </td>
        </tr>
    </table>
    <script>
        $(document).ready(function() { //ajax to load the table
            $("#load-button").on("click", function() {
                $.ajax({
                    url: "load-data.php",
                    type: "POST",
                    dataType: "text",
                    success: function(data) {
                        $("#table-data").html(data);
                    }
                });
            });
            $(document).on("click", ".delete-btn", function() {
                console.log($(this).find("data-id"));
                var pn = $(this).attr('value');
                alert(pn);

            });
        });
    </script>
</form>
</body>
</html>

load-data.php

<?php
while ($row = mysqli_fetch_assoc($result)) {
    $output .= "<tr><td>{$row["pname"]}</td><td>{$row["src"]}</td><td>{$row["dst"]}</td><td>{$row["ports"]}</td><td>{$row["inzone"]}</td><td>{$row["outzone"]}<td><button Class='delete-btn' **data-id'{$row["pname"]}**'>Delete</button></td></tr>";
}
$output .= "</table>";
echo $output;
mysqli_close($conn);
?>
Tags:

2

Answers


  1. 0

    It’s been a while since I don’t use jQuery but I can tell that if an element is not attached to the DOM at the moment that you register the event, it won’t subscribe to it. So maybe after you render the data you can register the event, this way the elements will listen to it. Something like this:

    $("#load-button").on("click", function() {
    $.ajax({
        url: "load-data.php",
        type: "POST",
        dataType: "text",
        success: function(data) {
            $("#table-data").html(data);
            $(document).on("click", ".delete-btn", function() {
              console.log($(this).find("data-id"));
              var pn = $(this).attr('value');
              alert(pn);

          });
        }
    });
});
    Login or Signup to reply.
  2. 0

    Jquery.ajax is async by default. You can see this clearly in the Jquery.ajax documentation

    By default, all requests are sent asynchronously (i.e. this is set to
    true by default). If you need synchronous requests, set this option to
    false.

    so to solve your issue you need to

    1. : make it sync instead of async :
    $(document).ready(function() { //ajax to load the table
    $("#load-button").on("click", function() {
        $.ajax({
            url: "data.php",
            type: "POST",
            dataType: "text",
            success: function(data) {
                $("#table-data").html(data);
            },
            async: false
        });

        $(document).on("click", ".delete-btn", function() {
            console.log($(this));
            var pn = $(this).attr('data-id');
            alert(pn);

        });
    })
});
    1. or you can listen to the document object
    $(document).ready(function() { //ajax to load the table
    $("#load-button").on("click", function() {
        $.ajax({
            url: "data.php",
            type: "POST",
            dataType: "text",
            success: function(data) {
                $("#table-data").html(data);
                
            }
        });
    })
}).on("click", ".delete-btn", function() {
    console.log($(this));
    var pn = $(this).attr('data-id');
    alert(pn);
});
    1. use a custom listener as following
    $(document).ready(function() { //ajax to load the table

    function myCustomListener(that) {
        that.on("click", ".delete-btn", function() {
            console.log($(this));
            var pn = $(this).attr('data-id');
            alert(pn);
        });
    }

    $("#load-button").on("click", function() {
        $.ajax({
            url: "data.php",
            type: "POST",
            dataType: "text",
            success: function(data) {
                $("#table-data").html(data);

                myCustomListener($("#table-data"));
            }
        });
    })
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search