1

I have an ASP.NET view in an MVC project in which I am trying to create a pop-up dialog to create data. There is another view that gets loaded and that view has a button with the id "btncancel_create". I cannot get that button to close the dialog. I am using jQuery 2.1.3 and jQuery UI 1.11.4.

Here is the code for the button:

<input type="button" value="Cancel" id="btncancel_create" />

And here is the view:

$(document).ready(function () {
    //alert("Document is ready");
    var url = "";

    $("#dialog-create").dialog({
        title: 'Create User',
        autoOpen: false,
        resizable: false,
        width: 400,
        show: { effect: 'drop', direction: "up" },
        modal: true,
        draggable: true,
        open: function (event, ui) {
            $(".ui-dialog-titlebar-close").hide();
            $(this).load(url);
        }
    });

    $("#lnkCreate").on("click", function (e) {
        url = $(this).attr('href');
        $("#dialog-create").dialog('open');

        return false;
    });

    //$("#btncancel_create").on("click", function (e) {
    //    $("#dialog-create").dialog("close");
    //    return false;
    //});

    $("#dialog-create").button("#btncancel_create").click(function (e) {
        alert("btncancel_create was clicked");
        $("#dialog-create").dialog('close');
        return false;
    });
});

<div id="dialog-create" style="display: none"></div>

<p>@Html.ActionLink("Create New", "Create", null, new { id = "lnkCreate" })</p>

As you can see, I tried something else which didn't work, which is commented out. The uncommented button click function does return the alert, but does not close the dialog. Thanks in advance for your help, and please let me know if you need any more information.

Mary K
  • 11
  • 3
  • I'm test your code is right . may be wrong selector. test console.log($("#dialog-create")) – MJ Vakili Apr 15 '15 at 21:48
  • can you try $.modal.close();? – Sushil Apr 15 '15 at 21:49
  • Neither of those two things work. Console.log shows that the button has been clicked. However, I discovered that it wasn't the button being clicked but the entire dialog, so that's wrong. The original code as found was: $("#btncancel_create").live("click", function (e) { $("#dialog-create").dialog("close"); return false; }); but ".live" is now deprecated so I was trying ".on" and that doesn't work at all. – Mary K Apr 16 '15 at 19:26

1 Answers1

0

Instead of
$("#btncancel_create").on("click", function (e) {...
(in my commented out code above)
it should be
$(document).on("click", "#btncancel_create", function (e) {....

I found the answer here: Turning live() into on() in jQuery.

Community
  • 1
  • 1
Mary K
  • 11
  • 3