CODEWITHSUNDEEP
jquery-uiangularjsjquery-ui-dialog
Max
Max

Reputation: 643

Reusable JQuery UI dialog does not work from AngularJS partial

I am trying to use JQuery UI Dialog from AngularJS partial HTML pages.

The problem is that the dialog works fine, and even can be opened multiple types, from a view - as long as the view is opened for the 1st time.

Yet when navigating to another view, and then back to the view using the dialog - an attempt to open the dialog works as if there would be 2 dialogs to show, not one. Browser "refresh" of the view URL makes the problem disappear, till the next back-and-forth navigation.

I put a test application (not integrated with real back end) to show the problem:

Navigate to: http://socialtodow.cloudapp.net/app/tdg_test/#!/new

Click on red "Get Advice" button: the dialog shows up OK, and can be closed with Esc.

Now, please navigate to http://socialtodow.cloudapp.net/app/tdg_test/#!/search and then back to http://socialtodow.cloudapp.net/app/tdg_test/#!/new

Click red "Get Advice". You get 2 dialogs, one on top of another - the buggy behavior I am talking about.

The relevant directive code:

.directive('advice', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var self = $(element),
                adviceDialog = $(attrs.advice);

            adviceDialog.dialog({
                width: 260,
                height: 405,
                autoOpen: false,
                modal: true,
                dialogClass: "advice_dialog"
            });

            self.click(function () {
                adviceDialog.dialog('open');
            });

            adviceDialog.find('button').click(function() {
                adviceDialog.dialog('close');
            });
        }
    }
}])

Checking 

 adviceDialog.is('dialog'))

does not seem to work - it's always true.

I am looking for a fix (not infrastructure replacement).

Any hint will be appreciated.

Max.

Upvotes: 1

Views: 1576

Answers (1)

Max
Max

Reputation: 643

This is the modification to the directive, found by a developer wokring on the project, that seems to resolve the issue:

.directive('advice', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var self = $(element),
                adviceDialog = $(attrs.advice);

            self.click(function () {
                adviceDialog.dialog({
                    width: 260,
                    height: 405,
                    autoOpen: false,
                    modal: true,
                    dialogClass: "advice_dialog",
                    close: function() {
                        adviceDialog.dialog('destroy');
                    }
                });

                adviceDialog.dialog('open');
            });

            adviceDialog.find('button').click(function() {
                adviceDialog.dialog('close');
            });
        }
    }
}])

Note: the URl mentioned in the original question may not be operational - sorry for that.

Max.

Upvotes: 3

Related Questions