Jquery UI, Razor and MVC: Uncaught TypeError: Illegal invocation

Question

Attempting to get a Jquery UI dialog to confirm (OK, Cancel) a call to a delete operation (DeleteTestUser). My jquery ui dialog is coming up on click. The cancel button works as expected but OK is not.

The error (Uncaught TypeError: Illegal Invocation) is what Chrome is showing in the console when I click OK. This is probably not surprising since it doesn't know what testUser.TestUserId is...

How do I ultimately pass that value along from client to server? The delete operation from HomeController.cs otherwise does work without the confirmation dialog. I need to get OK to call that. I feel like I am close but not sure how to form the Url.Action post in Javascript.

I'm pretty sure the problematic line is the post in _layout.cshtml

_layout.cshtml

    <script type="text/javascript">
    $(document).ready(function() {

        $('#dialog-modal').dialog(
            {
                title: 'Test User',
                draggable: false,
                resizeable: false,
                closeOnEscape: true,
                modal: true,
                autoOpen: false,
                buttons: {
                    'Cancel': function() {
                        $(this).dialog('close');
                    },
                    'OK': function() {
                        $.post("@Url.Action("DeleteTestUser", "Home")",
                            { id: $('testUser.TestUserId') });
                        $(this).dialog('close');
                    }

                }
            });

        $('#confirm-delete').click(function () {
            $('#dialog-modal').dialog("open");
        });
    });
</script>

HomeController.cs

    public ActionResult DeleteTestUser(int id)
    {
        this.testUserBusinessLogic.DeleteTestUser(id);
        return this.RedirectToAction("Index");
    }

index.cshtml

    @foreach (var testUser in this.Model)
    {
        <tr>
            <td>@testUser.FirstName</td>
            <td>@testUser.LastName</td>
            <td>@testUser.EmailAddress</td>
            <td>
                <a href="@Url.Action("TestUser", "Home",
                        new {id = testUser.TestUserId})">
                    <i class="fa fa-pencil fa-lg text-primary"></i>
                </a>
            </td>
            <td>
                <a href="#" id="confirm-delete" >
                    <i class="fa fa-trash fa-lg text-primary"></i>
                </a>
            </td>
        </tr>
    }

What is your script to open the dialog (you need to pass your id value there).And you have invalid html because of the duplicate id="confirm-delete" — user3559349
– user3559349, Commented Mar 20, 2018 at 3:54
@StephenMuecke the function $('#confirm-delete').click opens the dialog. The dialog is opening fine. Cancel works, OK does not... — Steve
– Steve, Commented Mar 20, 2018 at 3:58
@StephenMuecke I don't see a duplicate id tag of confirm-delete. I can change the signature of the #confirm-delete click function to take the id value, but not sure how to pass it. — Steve
– Steve, Commented Mar 20, 2018 at 4:06
You have multiple id="confirm-delete" in the <a> element :) Give me 5 min and I'll add an answer. — user3559349
– user3559349, Commented Mar 20, 2018 at 4:07
It created once for every iteration of your @foreach (var testUser in this.Model) loop :) — user3559349
– user3559349, Commented Mar 20, 2018 at 5:15

score 1 · Accepted Answer · 2018-03-20 04:27:05Z

1

Change the code that generates your link to both remove the duplicate id attribute (use a class name instead) and add a data- attribute to store the value of TestUserId

<td>
    <a href="#" class="confirm-delete" data-id="@testUser.TestUserId">
        <i class="fa fa-trash fa-lg text-primary"></i>
    </a>
</td>

In the script, you can then retrieve the value and assign it to a data- attribute of the dialog before calling open

$('.confirm-delete').click(function () { // modify selector
    var id = $(this).data('id');
    $('#dialog-modal').data('id', id).dialog("open");
});

and retrieve it when you click the OK button

$('#dialog-modal').dialog(
    ....
    buttons: {
        'Cancel': function() {
            $(this).dialog('close');
        },
        'OK': function() {
            $.post('@Url.Action("DeleteTestUser", "Home")', { id: $('#dialog-modal').data('id') });
            $(this).dialog('close');
        }
    }
});

edited Mar 20, 2018 at 4:27

answered Mar 20, 2018 at 4:13

user3559349

Sign up to request clarification or add additional context in comments.

3 Comments

Steve Over a year ago

I think I see now, you're using the class attribute as a stand in to call the dialog. Seems unconventional to me, but I could be wrong.

user3559349 Over a year ago

What is wrong is that you have duplicate id attributes, which is invalid html, and you always use a class name for cases like this :). As a side note, you probably use { id: $(this).data('id') } in the $.post() but could not test it to be sure

Steve Over a year ago

Duplicate because of the Foreach you mean?

Collectives™ on Stack Overflow

Jquery UI, Razor and MVC: Uncaught TypeError: Illegal invocation

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related