How to get the value of an attribute in an html tag with JQuery

Question

How to get the value of an attribute in an html tag with JQuery

Navigation

#1 by (2 votes)
#2 by (0 votes)

3

Friends What happens is that I need to capture the value of an attribute of an html tag in this case.

<input class="btn btn-danger link1" type="button" value="Delete" data="@item.MunicipalityId" />

I have this tag inside a cycle for that is, it creates approximately 3 elements with the same class 'link1'

<table class="table">
                @foreach (var item in Model.Municipalities)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(x => item.Name)
                        </td>
                        <td>
                            @Html.ActionLink("Edit", "EditMunicipality", new { id = item.MunicipalityId }, new { @class = "btn btn-warning" }) |
                            <input class="btn btn-danger link1" type="button" value="Delete" data="@item.MunicipalityId" />
                        </td>
                    </tr>
                }
</table>

and I need to make JQuery capture that value to the button that the user clicks on, this means that each one button of the cycle will bring me a different data attribute. I've done it like that

<script>
    $('.link1').click(function () {
        swal({
            title: 'Are you sure?',
            text: 'You will not be able to recover this imaginary file!',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#DD6B55',
            confirmButtonText: 'Yes, delete it!',
            closeOnConfirm: false
        }, function () {
            $.ajax({
                type: "POST",
                url: '@Url.Action("DeleteMunicipality")',
                data: { MunicipalityId: $(this).attr("data") },
                datatype: "html",
                //success: function (data) {
                //    //codigo
                //}
                success: function () {
                    var MunicipalityId = $(this).attr("data");
                    if (MunicipalityId == null) {
                        swal('Deleted!',
                             'Your imaginary file has been deleted.',
                             'success'
                             );
                    } else {
                        swal("Oops", "The record can't be delete.(has related records)", "error");
                    }
                },
                error: function (ex) {
                    swal("Oops", "We couldn't connect to the server!" + ex, "error");
                }
            });
            return false;
        });
    });
</script>

And I always capture is the first of the list, regardless of the button that you click. Thanks is what you can help me.

javascript jquery c# asp.net-mvc-5 razor

asked by Kmiilo Berrio Montoya 13.06.2016 в 22:06

source

2 answers

Help in laravel 5 and ajax. Get a value from the database How can I group 2 tables and count the number of rows?

score 2 · Answer 1

Replacing the

 $(this).attr("data")

for

 $(this).data("municipalidad")

Try the following:

$(function(){
  $('.link1').click(function(){
    var result = { data: { MunicipalityId: $(this).data("municipalidad") } };
    alert(result.data.MunicipalityId);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="btn btn-danger link1" type="button" value="Delete" data-municipalidad="municip01" />
<input class="btn btn-danger link1" type="button" value="Delete" data-municipalidad="municip02" />
<input class="btn btn-danger link1" type="button" value="Delete" data-municipalidad="municip03" />

Update

 <input class="btn btn-danger link1" type="button" value="Delete" data-municipalidad="@item.MunicipalityId" />

score 0 · Answer 2

How do you set the click event handler for the buttons?

You should not have a bigger problem to recover the value.

Look at this example:

$(function(){
  $('.link1').click(function(){
    var result = { data: { MunicipalityId: $(this).attr("data") } };
    alert(result.data.MunicipalityId);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="btn btn-danger link1" type="button" value="Delete" data="municip01" />
<input class="btn btn-danger link1" type="button" value="Delete" data="municip02" />
<input class="btn btn-danger link1" type="button" value="Delete" data="municip03" />