CODEWITHSUNDEEP
jqueryjquery-ui
Stas Svishov
Stas Svishov

Reputation: 531

Close jQueryUI Dialog from event of ajax loaded content element

I load content with .load() passing url. Inside of the content that is returned and loaded sucessfully into jq ui dialog, is simple link with id cancel123. I am just trying to close this jqueryUiDialog w ID testDialog from click on the link. I cannot figure out what im missing, and tried to do it in 48 different ways. Please help

 function InitializeDialog($element, title, url) {

            $element.dialog({
                autoOpen: false,
                width: 500,
                resizable: true,
                draggable: true,
                title: title,
                model: true,
                show: 'slide',
                closeText: 'x',
                //dialogClass: 'alert',
                closeOnEscape: true,
                modal: true,
                open: function (event, ui) {
                    //Load the Partial View Here using Controller and Action
                    $element.load(url);
                    $("#cancel123").bind('click', function (event) {
                        $('#testDialog').dialog('close');
                        alert('close this');
                    });


                },

                close: function () {
                    $(this).dialog('close');
                }
            });

Upvotes: 1

Views: 912

Answers (1)

Diego
Diego

Reputation: 16714

You can bind it to the document like this:

$(document).on("click", "#cancel123", function(event) {
    $('#testDialog').dialog('close');
    alert('close this');
});

Another way (I think its even better):

$element.load(url, function() {
    $("#cancel123").bind('click', function (event) {
        $('#testDialog').dialog('close');
        alert('close this');
    });
});

Upvotes: 2

Related Questions