Using JQuery to bind to click events in MVC

Question

I am attempting to expand on the examples from MattHidinger.com to add pop up dialogs to an MVC site.

Using the code from his site...

<script type="text/javascript">

$.ajaxSetup({ cache: false });

$(document).ready(function () {
    $(".openDialog").live("click", function (e) {
        e.preventDefault();

        $("<div></div>")
            .addClass("dialog")
            .attr("id", $(this).attr("data-dialog-id"))
            .appendTo("body")
            .dialog({
                title: $(this).attr("data-dialog-title"),
                close: function () { $(this).remove() },
                modal: true,
                width: 700,
                height: 350
            })
                .load(this.href);
        });

        $(".close").live("click", function (e) {
            e.preventDefault();
            $(this).closest(".dialog").dialog("close");
        });
    });
</script>

and an Html.ActionLink

@Html.ActionLink("Delete via actionlink", "Delete", "CostModel"
, new { id = item.HighlightReportID }
, new { @class = "openDialog", data_dialog_id = "dialog", data_dialog_title =
 string.Format("Delete {0}", item.DisplayIdentifier) })

I can render an anchor tag that, when clicked, opens a UI Dialog.

<a class="openDialog" data-dialog-id="dialog" data-dialog-title="Delete report for Nov 12" href="/CostModel/Delete/162">Delete via actionlink</a>

But!

If I add an anchor tag manually to the page using the same identifying structures, it fails.

<a class="openDialog" data_dialog_id="dialog" data_dialog_title="Delete report for Nov 12" href="/CostModel/Delete/162">Delete via manual anchor tag</a>

Is there a reason why MVC generated Anchor tags would work, versus manually created tags.

Caveat. Obviously I would not be manually adding tags to a page in MVC. I started by trying to use an ImageLink helper that generates an image inside the anchor tag and it failed too, so going back to first principals I tried the manual approach and was very confused when it failed!

Edit 1

Here is the code from the page, note I have tried setting the data_dialog_id to be the same and different, adding both at the same time and individually, it makes no difference, only the ActionLink will be picked up by the JQuery.

@Html.ActionLink("Delete via actionlink", "Delete", "CostModel"
                    , new { id = item.HighlightReportID }
                    , new { @class = "openDialog", data_dialog_id = "dialog1", data_dialog_title = string.Format("Delete {0}", item.DisplayIdentifier) })
<a class="openDialog"
                data_dialog_id="dialog2"
                data_dialog_title="@string.Format("Delete {0}", item.DisplayIdentifier)"
                href="/CostModel/Delete/@item.HighlightReportID">Delete via manual anchor tag</a>

and these are the two tags as rendered

<a class="openDialog" data-dialog-id="dialog1" data-dialog-title="Delete report for Dec 12" href="/CostModel/Delete/212">Delete via actionlink</a>
<a class="openDialog" data_dialog_id="dialog2" data_dialog_title="Delete report for Dec 12" href="/CostModel/Delete/212">Delete via manual anchor tag</a>

As far as my eyes can see they are identical, and yet only the first one (dialog1) will be picked up by the jquery.

Try using on and delegate the click event to the document. — Pow-Ian
– Pow-Ian, Commented Mar 17, 2013 at 12:19
@Pow-Ian, while .on is indeed the recommended way to subscribe to events and .live is deprecated this won't change anything to the problem here and doesn't explain why the code works when using a helper. — Darin Dimitrov
– Darin Dimitrov, Commented Mar 17, 2013 at 12:21
Potentially it could explain it. I am thinking that the manually added links are in a different html context than the generated links. The ready event may not be firing with the manually added links in context. Personally I would try adding a click handler in a <script> tag in the view right after the manual tags are coded. Then you could ensure they are in the right context. The on event delegated to the document would catch it where the live may not. — Pow-Ian
– Pow-Ian, Commented Mar 17, 2013 at 14:32

Darin Dimitrov · Accepted Answer · 2013-03-17 12:13:43Z

2

There's absolutely no reason why hardcoding the markup would fail. All that the Html.ActionLink helper does is generate an HTML anchor which is the only thing visible to client side scripting. I guess that your problem lies somewhere else. For example you might have put different markup than what's generated by the helper. One thing that comes to mind is the href attribute which you have hardcoded to a non existent action. Don't forget that if you deploy your application in a virtual directory in IIS, if you hardcode the url (instead of using a helper) to /CostModel/Delete/162 that might fail because the correct url is now /myappname/CostModel/Delete/162. That's one of the reasons why you should never be hardcoding urls in an ASP.NET MVC application.

You could use a javascript debugging tool such as FireBug or Chrome Developer toolbar in order to inspect your code and see potential problems. Also look in your console for possible errors.

answered Mar 17, 2013 at 12:13

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

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

1 Comment

ColinBruce Over a year ago

Darin, thanks for answering the question on whether it should work! I've added more examples but will have to start picking it apart in chrome developer to see why it isn't.

Collectives™ on Stack Overflow

Using JQuery to bind to click events in MVC

Edit 1

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit 1

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related