0

I am showing data in list, so each record in database is shown as list item. I have two buttons in each list row namely Modify, Delete. So, whenever the user clicks on respective button either that record's column data has to be changed or it has to delete that record in the database. I have used Ajax to get the data. Following is my code.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>INFO</title>
<style type="text/css">
.table_box {
    display: table;
    margin: auto;
}
</style>
</head>
<body>
<jsp:include page="common.jsp"/>
<div>
<input type="text" name="date" id="date" readonly>
</div>
<div class="table_box">
<div class="container" id="tablediv">
<table style='text-align:center;' class="table table-bordered" id="datatable"> 
    <tr class="success"> 
        <th style='text-align:center;' scope="col">Record1</th> 
        <th style='text-align:center;' scope="col">Record2</th> 
        <th style='text-align:center;' scope="col">Name</th> 
        <th style='text-align:center;' scope="col">Modify/Delete</th>              
    </tr>
</table>
</div>
</div>
<script>

function requestForData(date)
{
$.get('getdata',{ 'date': date },function(jsonResponse) {
    $("#tablediv").show();

    else if(jsonResponse!=null){
        $("#datatable").find("tr:gt(0)").remove();
        var table1 = $("#datatable");
        $.each(jsonResponse, function(key,value) {
             var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
                rowNew.children().eq(0).text(value['record1']); 
                rowNew.children().eq(1).text(value['record2']); 
                rowNew.children().eq(2).text(value['Name']); 
                var id = value['primaryId'];
                rowNew.append("<td><button id="+id+" class=\"btn modify-row\">Modify</button><button id="+id+" class=\"btn delete-row\">Delete</button></td>");

                rowNew.appendTo(table1);
        });

        }

    });


}

$(document).ready(function() {
    requestForData(todayDate());

    $(".modify-row").click(function () {
        var buttonname = this.name;
        alert("You clicked a button"+buttonname); 

    });

});

I tried replacing click with on as following, but still no luck. The event is not fired.

$(".modify-row").on("click", function () {
            var buttonname = this.name;
            alert("You clicked a button"+buttonname); 

        });

I am sure that JQuery is being referred because the other element which is jquery calendar works fine on that page. Can someone please help me on the following two questions.

  1. How to make the click event fired on those buttons?

  2. How to tag multiple info to each button, that is when user clicks on delete, I want to get primary id of that record and name of that record to show in the dialog to take the confirmation from the user. Is this the right approach to do this kind of thing?

rick
  • 4,665
  • 10
  • 27
  • 44
  • As explained in the duplicate, you need to use `$("#datatable").on("click", ".modify-row", function...)` – Barmar Oct 01 '14 at 04:41
  • @Barmar I had tried this too, but it didn't work. Moreover I have asked two things in my question. – rick Oct 01 '14 at 04:45
  • You're using `button.name`, but your buttons don't have names. You're also giving both buttons the same ID, but IDs should be unique. Put what you want in a `data-XXX` attribute, then you can use `$(this).data('XXX')`. – Barmar Oct 01 '14 at 04:49
  • The delegation syntax should work. Please update the question, showing what you tried. – Barmar Oct 01 '14 at 04:50

0 Answers0