CODEWITHSUNDEEP
javascriptjqueryajaxrazorforeach
Luke
Luke

Reputation: 409

Retrieving event and htmlInput element from a foreach using javascript or jquery

I managed to retrieve a dynamic element ID from inside a foreach and send it to a controller this way:

    @using (Html.BeginForm("DeleteConfirmed", "Gifts", FormMethod.Post, new { @class = "form-content", id = "formDiv" }))
    {
        foreach (var item in Model.productList)
        {
            <input type="button" value="Delete" onclick="DeleteButtonClicked(this)" data-assigned-id="@item.ID" />
        }
    }

and here's the relevant script, pointing to the controller's ActionResult method in charge for item deletion:

function DeleteButtonClicked(elem) {
        var itemID = $(elem).data('assigned-id');
        if (confirm('sure?')) {
            window.location.href = "/Gifts/DeleteConfirmed/" + itemID; 
}}

Now, this works just fine, as itemID is correctly retrieved. As I would like to add a @Html.AntiForgeryToken() to the form, the idea is to change the MVC controller's Actionmethod into a JsonResult adding a little Ajax to the script, allowing me to pass both itemID and token.

Something like:

function DeleteButtonClicked(elem) {
   event.preventDefault();
   var form = $('#formDiv');
   var token = $('input[name="__RequestVerificationToken"]', form).val();
   var itemID = $(elem).data('assigned-id');
   if (confirm('sure?')) {
            $.ajax({
                type: 'POST',
                datatype: 'json',
                url: '@Url.Action("DeleteConfirmed", "Gifts")',
                data: {
                   __RequestVerificationToken: token,
                    id: itemID
                },
                cache: false,
                success: function (data) { window.location.href = "/Gifts/UserProfile?userID=" + data; },
                error: function (data) { window.location.href = '@Url.Action("InternalServerError", "Error")'; }
            });
        }
   dynamic }Some

but I have no idea on how to add the 'event' to the element (this => elem) in <input type="button" value="Delete" onclick="DeleteButtonClicked(this)" data-assigned-id="@item.ID" /> that I am using to identify the item inside the foreach loop, in order to pass it to the script.

Above script obviously fails as there's no 'event' (provided this would end to be the only mistake, which I'm not sure at all).

Some help is needed. Thanks in advance for your time and consideration.

Upvotes: 1

Views: 147

Answers (2)

chain_the_wheel
chain_the_wheel

Reputation: 177

Try the 'on' event handler attachment (http://api.jquery.com/on/). The outer function is shorthand for DOM ready.

$(function() {
  $('.some-container').on('click', '.delete-btn', DeleteButtonClicked);
})

Upvotes: 0

Matt Spinks
Matt Spinks

Reputation: 6698

What you want to do is use jQuery to create an event handler:

$('input[type="button"]').on('click', function(event) {
   event.preventDefault();
   var form = $('#formDiv');
   var token = $('input[name="__RequestVerificationToken"]', form).val();
   var itemID = $(this).data('assigned-id');
   if (confirm('sure?')) {
       $.ajax({
           type: 'POST',
           datatype: 'json',
           url: '@Url.Action("DeleteConfirmed", "Gifts")',
           data: {
              __RequestVerificationToken: token,
               id: itemID
           },
           cache: false,
           success: function (data) { window.location.href = "/Gifts/UserProfile?userID=" + data; },
           error: function (data) { window.location.href = '@Url.Action("InternalServerError", "Error")'; }
       });
   }
});

Just make sure you render this script after your buttons are rendered. Preferably using the $(document).onReady technique.

Upvotes: 1

Related Questions