append link in ajax and post id by them.


    @rec.DegreeTitle
    @rec.Institute
    @rec.CompletionYear
    @rec.City

(anchors onclick="dataEdu(@rec.AcId)" )       

(anchors  onclick="delEdu(@rec.AcId)" )

as this @ sign shows this data is a bunch of list coming from db and anchors shows fetchin data by id.

what my logic is i insert data using ajax request and display it again with same styling using append method in success of ajax request like this.

$("#addBtn").click(() => {
let formdata = $("#formacad").serialize();

$.ajax({
    type: "POST",
    url: "/Js/AddUpdateMethod",
    data: formdata,

    success: function (result) {
        let str = JSON.parse(result);
        $("#acadrec").empty();
        for (let i = 0; i < str.length; i++) {
            $("#acadrec").append(
                '' + 
                '' + str[i].DegreeTitle + '' +
                '' + str[i].Institute + '' +
                '' + str[i].CompletionYear + '' +
                '' + str[i].City + '' +
                 '(anchors  onclick="dataEdu(@rec.AcId)" ')       some issues happens with anchors that is why i put anchors like this these are normal anchors
                  '(anchors  onclick="delEdu(@rec.AcId)" ) '       some issues happens with anchors that is why i put anchors like this  these are normal anchors
                + '' 
                );
                $("#panacad").slideUp()
                $("#acadrec").slideDown();
            }
            $("#panacad input[type=text]").each(function () {
                this.value = "";
            });
        }
    });
});

data posted successfully, recent record with all previous records showing in the view successfully even anchors are displaying but problem is i cant get data by using these anchors as these anchors are append to the body using jquery and previously these anchors are binded with strongly typed view so getting data by id is very easy.

i hope i have cleared all the things regarding my issues to my readers.

after inserting,data is appending with view using jquery there is no other way to bind data if ajax request is our main concern

kindly help me out to resolve this issue or if you have any other way to do this operation in a clean manner so share it with me please

// Attach event handler to a parent element that is present in the view $("#acadrec").on("click", "a[data-action='dataEdu']", function() { var acId = $(this).data("id"); // Perform the necessary action using the acId }); $("#acadrec").on("click", "a[data-action='delEdu']", function() { var acId = $(this).data("id"); // Perform the necessary action using the acId }); // ... // Append new data to the view $("#acadrec").append( '' + '' + str[i].DegreeTitle + '' + '' + str[i].Institute + '' + '' + str[i].CompletionYear + '' + '' + str[i].City + '' + 'Fetch Data' + 'Delete Data' + '' );

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Jayraj Chhaya2y ago
Problem

The problem is that the anchors are not able to fetch data by ID as they were previously bound to a strongly typed view. This means that the event handlers for the anchors were set up when the view was initially rendered, but they are not working after the new data is appended to the view.

Cause

The cause of the issue is that the event handlers for the anchors are not being reattached after the new data is appended to the view. This is because the event handlers were only set up for the initial set of anchors that were present in the view when it was rendered.

Try these code
```
// Attach event handler to a parent element that is present in the view
$("#acadrec").on("click", "a[data-action='dataEdu']", function() {
    var acId = $(this).data("id");
    // Perform the necessary action using the acId
});

$("#acadrec").on("click", "a[data-action='delEdu']", function() {
    var acId = $(this).data("id");
    // Perform the necessary action using the acId
});

// ...

// Append new data to the view
$("#acadrec").append(
    '' + 
    '' + str[i].DegreeTitle + '' +
    '' + str[i].Institute + '' +
    '' + str[i].CompletionYear + '' +
    '' + str[i].City + '' +
    'Fetch Data' +
    'Delete Data' +
    ''
);
```
you need to reattach the event handlers for the anchors after appending the new data to the view. One way to achieve this is by using event delegation. Instead of directly attaching the event handlers to the anchors, you can attach them to a parent element that is present in the view when it is initially rendered and will still be present after new data is appended.
0