CODEWITHSUNDEEP
asp.net-mvc-3asp.net-ajax
priya77
priya77

Reputation: 175

ajax work only for first row of table

I'm using asp.net MVC3 In my view i'm displaying a table in table i have a link for each row called "Attach a File" this link will call controller function through the ajax call

@Html.HiddenFor(modelItem => item.CourseID, new { @id = "CourseID", @Class="courseiding"})
@Html.HiddenFor(modelItem => item.PrtfID, new { @id = "prtfID" , @Class="prtfiding"})
@Html.ActionLink("Attach a file", "Index", null, new { @Id = "attchlink" })

ajax:

 $('#attchlink').click(function (e) {
        window.formCount = 0;
        e.preventDefault();
       var id = $('.prtfiding').val();
        var size1 = $('.sizing').val();
        var url2 = '@Url.Action("Index")';
        $.ajax({
            url: url2,
            data: { pid: id, size: size },
            cache: false,
            type: 'POST',
            success: function (data) {
                $('#result').html(data);
            }
        });
    });

This is working for all the rows but while passing value in id and size...it is passing value of first row only for all rows

Upvotes: 0

Views: 930

Answers (1)

nemesv
nemesv

Reputation: 139768

The Id attribute of an element should be unique on a page.

Your problem is that you have multiple links with the same Id = "attachlink" and when you call $('#attachlink') jQuery just using the first one.

To solve this you should use classes instead of Id:

@Html.ActionLink("Attach a file", "Index", null, new { @class = "attachlink" })

$('.attachlink').click(function (e) {

}

And then you can use the .closest() function to get the "colosest" values in your click event:

var id = $(this).closest('.prtfiding').val();
var size1 = $(this).closest('.sizing').val();

Alternatively you can put all the required data on the ActionLink in the form of data- attributes:

@Html.ActionLink("Attach a file", "Index", null, 
    new 
    { 
         @Id = "attchlink",
         data_courseID = item.CourseID,
         data_prtfID = item.prtfID
    })

And in your js function you can access them with:

var courseID = $(this).data('courseID');
var prtfID = $(this).data('prtfID');

If you don't need elsewhere the Hidden field you can remove them with this approach.

Upvotes: 1

Related Questions