Dialog popup doesn't work

Question

I'm trying open a view in popup (dialog) after a click on a link, i don't find the problem:

Here is my JS code in my view:

<script type="text/javascript">
$.ajaxSetup({ cache: false });

$(document).ready(function () {
    $(".openDialog").on("click", "a", 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,
                height: 500,
                width: 700
            })
            .load(this.href);
    });

    $(".close").on("click", "a", function (e) {
        e.preventDefault();
        $(this).closest(".dialog").dialog("close");
    });
});

</script>

And here is my link in the same view:

@Html.ActionLink("Exports",
                 "List",
                 new { id = Model.Orga_Id },
                 new {
                 @class = "openDialog",
                 data_dialog_id="exportDialog",
                 data_dialog_title="Tous les exports"
                })

All the code is of this view and the code of the view i'd like to show in the dialog is in the same Controller. When i click on the link, my nav only change the page like a <a href="#"..></a>

Can you see what is wrong here? Do you need more information?

Answer 1

I believe your problem is your click handler.

$(".openDialog").on("click", "a", function (e) {

Your ActionLink is an A tag. The javascript you are using adds a click to an anchor tag that is a child of the object with the .openDialog class. But the anchor is the object with the .openDialog class, eg has no child anchor to attach a click handler to.

Try just

    $(".openDialog").on("click", function (e) {

Refer to JQuery Documention for .on() for more detailed examples,

http://api.jquery.com/on/

Answer 2

Change your code as like below,

 $(".openDialog").on("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,
            height: 500,
            width: 700
        })
        .load(this.href);
});

Answer 3

Perhaps trying the .live method instead of the .on

something like

('.openDialog').live('click', function (e) {

This solved a similar issue I was having recently, granted I am relatively new to JS/jQuery