Why is SweetAlert getting overridden after each loop?-CodePudding

I am trying to make a delete button for each of my activities, however when I am applying sweetalert to the delete button, it will get overridden after each iteration. Therefore, no matter what button you press, it will always delete the last item in the list.

This is from my partialview where the buttons are created ->

    <td>
        <form asp-action="DeleteActivity" method="post">
            <input type="hidden" name="ActivityID" value="@Model.Activityid" />
            <input name="returnURL" type="hidden" value="@ViewBag.returnURL" />
            <button  type="submit" id="@Model.Activityid"> Slet </button>
        </form>
    </td>
</tr>

<script type="text/javascript">
        $('.delete-confirm').on('click', function(e) {

        e.preventDefault()
        var requested_to = $(this).attr("id")

        console.log('DeleteRequest on activityID: '   requested_to);

        swal({
            title: 'Bekræft',
            text: 'Advarsel: Indholdet vil blive permanent slettet!',
            type: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Slet',
            confirmButtonColor: '#C6472A',
            cancelButtonText: 'Fortryd'
        }).then((result) => {
            if (result.value) {
                $('.delete-confirm').closest('form').submit();
            }
        });
    });
</script>

This is from my mainview, where the loop is happening ->

    <table >
        <thead >
            <tr>
                <th>Title</th>
                <th>v/ hvem</th>
                <th>Dato</th>
                <th>Afdeling</th>
                <th>Lokale</th>
                <th>Status</th>
                <th>Rediger</th>
                <th>Slet</th>
        </thead>

        <tbody>
            @foreach (Activity a in Model.OrderBy(a => a.date))
            {
                <partial name="ActivitySearchPartialview" model="a" />
            }
        </tbody>
    </table>

How do I make the buttons unique to each iteration in the loop?

CodePudding user response：

This line seems to be the culprit

$('.delete-confirm').closest('form').submit();

This will always identify the first form. I have created a snippet that illustrates this, with an incorrect identification of the form as $('.delete-confirm').closest('form') and a correct identification of the form as $(this).closest('form'), so, instead of searching in the DOM for any .delete-confirm and the closest form to the match, we search for specifically the .delete-confirm we clicked on and the closest form to that. This is why we get the same result in the first console log independently of what we have clicked upon and the correct result for the second log.

$('.delete-confirm').on('click', function(e) {
    e.preventDefault();
    console.log('Incorrect: ');
    console.log($('.delete-confirm').closest('form').attr('asp-action'));
    console.log('Correct: ');
    console.log($(this).closest('form').attr('asp-action'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
    <td>
        <form asp-action="DeleteActivity1" method="post">
            <input type="hidden" name="ActivityID" value="1" />
            <input name="returnURL" type="hidden" value="@ViewBag.returnURL" />
            <button  type="submit" id="1"> Slet </button>
        </form>
    </td>
    <td>
        <form asp-action="DeleteActivity2" method="post">
            <input type="hidden" name="ActivityID" value="2" />
            <input name="returnURL" type="hidden" value="@ViewBag.returnURL" />
            <button  type="submit" id="2"> Slet </button>
        </form>
    </td>
    <td>
        <form asp-action="DeleteActivity3" method="post">
            <input type="hidden" name="ActivityID" value="3" />
            <input name="returnURL" type="hidden" value="@ViewBag.returnURL" />
            <button  type="submit" id="3"> Slet </button>
        </form>
    </td>
</tr>
</table>

It is strange that your code resulted in removing the last element instead of the first, so the behavior you have described is slightly different from the behavior I would expect from the bug I have described, but it could be a different jQuery version, some structural nuances the question did not clarify, some server-side bug or anything else. Yet, the client-side issue you have experienced seems to be the one I have described above.