I have a modal window that opens on the click of an item in dropdown. I got stuck in implementing the closing of dialog on a button click.

 var $that = this;
 $("#btncart_cancel").on("click", function () {
      ///// ***********close the dialog *************** 
      /// tried this but not working
      $that.dialog("close");
 });

My code :

$(".ddlCart li").click(function (e) {
$('#actionsCart').slideToggle();

var ddlselectedVal = $(this).attr('id');
var selectedListinsCount = selected_Listings.length;
var SelectedMlsnums = selected_Listings.join();
var agentId = $("#AgentId").val();

var EnvironmentURL = $("#EnvironmentURL").val();

var autoUrl = "/Stats/SearchContacts";
var Action = "PreAddToCart"

var postData = {
    AgentId: agentId,
    Mlsnums: SelectedMlsnums,
    ActionTypeValue: Action
};
var $that = this;
var close = function (event, ui) {
    $(this).dialog("destroy");
}
var open = function (event, ui) {
    var agentId = $("#AgentId").val();
    var url = EnvironmentURL + "/Stats/SearchContacts";

    $("#btncart_cancel").on("click", function () {
        ///// ***********close the dialog *************** 
    });

    $("#btncart_submit").on("click", function () {
        $(".liloading").show();

        if (App.ContactInfo.Id != 'undefined') {
            var contactKey = App.ContactInfo.Id;
            var cartName = App.ContactInfo.Name;
        } else {
            var contactKey = 0;
            var cartName = 'My Personal Cart';
        }

        var note = $("#txtNotes").val();
        var url = EnvironmentURL + "/Stats/Cart";

        //Send the data using post and put the results in a div                   
        $.post(url, {
            CartName: cartName,
            Notes: note,
            Contactkey: contactKey,
            ActionTypeValue: "AddToCart"
        },

        function (data) {
            // Replace current data with data from the ajax call to the div.         
            $("#dvModalDialog").empty().append(data);

        });
    });
};

var rd = Mod.ReportsDialog({
    title: 'Add To Cart',
    close: close,
    open: open
});
rd.url = EnvironmentURL + "/Stats/Cart";
rd.targetElement = '#dvModalDialog' // '#dvSendEmail'
rd.formName = '#frmCart'
rd.postData = postData
rd.open();
var $that = this;
});

I have a modal window that opens on the click of an item in dropdown. I got stuck in implementing the closing of dialog on a button click.

 var $that = this;
 $("#btncart_cancel").on("click", function () {
      ///// ***********close the dialog *************** 
      /// tried this but not working
      $that.dialog("close");
 });

My code :

$(".ddlCart li").click(function (e) {
$('#actionsCart').slideToggle();

var ddlselectedVal = $(this).attr('id');
var selectedListinsCount = selected_Listings.length;
var SelectedMlsnums = selected_Listings.join();
var agentId = $("#AgentId").val();

var EnvironmentURL = $("#EnvironmentURL").val();

var autoUrl = "/Stats/SearchContacts";
var Action = "PreAddToCart"

var postData = {
    AgentId: agentId,
    Mlsnums: SelectedMlsnums,
    ActionTypeValue: Action
};
var $that = this;
var close = function (event, ui) {
    $(this).dialog("destroy");
}
var open = function (event, ui) {
    var agentId = $("#AgentId").val();
    var url = EnvironmentURL + "/Stats/SearchContacts";

    $("#btncart_cancel").on("click", function () {
        ///// ***********close the dialog *************** 
    });

    $("#btncart_submit").on("click", function () {
        $(".liloading").show();

        if (App.ContactInfo.Id != 'undefined') {
            var contactKey = App.ContactInfo.Id;
            var cartName = App.ContactInfo.Name;
        } else {
            var contactKey = 0;
            var cartName = 'My Personal Cart';
        }

        var note = $("#txtNotes").val();
        var url = EnvironmentURL + "/Stats/Cart";

        //Send the data using post and put the results in a div                   
        $.post(url, {
            CartName: cartName,
            Notes: note,
            Contactkey: contactKey,
            ActionTypeValue: "AddToCart"
        },

        function (data) {
            // Replace current data with data from the ajax call to the div.         
            $("#dvModalDialog").empty().append(data);

        });
    });
};

var rd = Mod.ReportsDialog({
    title: 'Add To Cart',
    close: close,
    open: open
});
rd.url = EnvironmentURL + "/Stats/Cart";
rd.targetElement = '#dvModalDialog' // '#dvSendEmail'
rd.formName = '#frmCart'
rd.postData = postData
rd.open();
var $that = this;
});

• javascript
• jquery
• modal-dialog

• your problem might be for having nested click events – G.Mendes Commented Jun 11, 2014 at 19:09
• Can you make a jsFiddle? – j08691 Commented Jun 11, 2014 at 19:15

2 Answers 2

The problem that I see with your close method is that the $that is not a JQuery object.

You could probably fix this with either $($that).dialog("close") or $(this).dialog("close") or $('#dvModalDialog').dialog("close").

   $(document).ready(function () {
     $('#modalClose').click(function (){
                window.setTimeout(function () {
                  $('#contact').modal('hide');
                }, 5000);
              });
          });

for Button use id = modalClose and for modal use id = contact