Base solution for your next web application
Open Closed

Open a modal inside another modal #2828


User avatar
0
inovatech created

I'm trying to open a new modal form from CreateOrUpdateUnitModal, but I'm not getting. I did the same procedure in the sample PhoneBook project , and it worked. Please, help me!!!!

I'm doing the following:

In the file CreateOrUpdateUnitModal.cshtml, i have a button:

<span style="color:#FF0000"><button ng-if="vm.permissions.createOUContato" class="btn btn-primary blue" ng-disabled="!vm.organizationUnit.id" ng-click="vm.createContato(vm.organizationUnit)"><i class="fa fa-plus"></i> @L("CreateNewOUContato")</button></span>

In then file CreateOrUpdateUnitModal.js, i added "$uibModal, $uibModalInstance"

<span style="color:#FF0000">appModule.controller('common.views.organizationUnits.createOrEditUnitModal', [ '$scope', '$uibModal', '$uibModalInstance', 'abp.services.app.organizationUnit', 'organizationUnit', function ($scope, $uibModal, $uibModalInstance, organizationUnitService, organizationUnit) {</span>

And add the function openCreateOrEditOUContatoModal:

             &lt;span style=&quot;color:#FF0000&quot;&gt;      **vm.createContato = function (OU) {
            openCreateOrEditOUContatoModal(OU);
        };**&lt;/span&gt;

 &lt;span style=&quot;color:#FF0000&quot;&gt;      **function openCreateOrEditOUContatoModal(OU) {
            var modalInstance2 = $uibModal.open({
                templateUrl: '~/App/common/views/organizationUnits/createOrEditOUContatoModal.cshtml',
                controller: 'common.views.organizationUnits.createOrEditOUContatoModal as vm',
                backdrop: 'static',
                resolve: {
                    OU: function () {
                        return OU;
                    }
                }
            });

            modalInstance2.result.then(function (result) {
                vm.getOrganizationUnits();
            });
        }**&lt;/span&gt;

3 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Can you check if modal is added to page or not ? Because as I remember an older version had such a problem.

    Second modal was placed behind the first modal.

    Thanks.

  • User Avatar
    0
    inovatech created

    Hi for all!!!! I figured out how to do it!!! Tks for all!!!!

    In the file CreateOrUpdateUnitModal.js add $uibModalInstance, $uibModal:

    appModule.controller('common.views.organizationUnits.createOrEditUnitModal', [
        '$scope', '$uibModalInstance', '$uibModal', 'abp.services.app.organizationUnit', 'organizationUnit',
        function ($scope, $uibModalInstance, $uibModal, organizationUnitService, organizationUnit) {
            var vm = this;
    
            vm.createContato = function (organizationUnit) {
                openCreateOrEditOUContatoModal(organizationUnit, null);
            };
    
    
            vm.editContato = function (organizationUnit, contato) {
                openCreateOrEditOUContatoModal(organizationUnit, contato);
            };
    
    
            function openCreateOrEditOUContatoModal(organizationUnit, contato) {
                var modalInstance = $uibModal.open({
                    templateUrl: '~/App/common/views/organizationUnits/createOrEditOUContatoModal.cshtml',
                    controller: 'common.views.organizationUnits.createOrEditOUContatoModal as vm',
                    backdrop: 'static',
                    resolve: {
                        param: function () {
                            return { 'organizationUnit': organizationUnit, 'contato': contato };
                        }
                    }
                });
    
                modalInstance.result.then(function (result) {
                    vm.getOrganizationUnits();
                });
            }
    

    And add the function openCreateOrEditOUContatoModal:

    (function () { appModule.controller('common.views.organizationUnits.createOrEditOUContatoModal', [ '$scope', '$uibModalInstance', 'abp.services.app.organizationUnit', 'param', function ($scope, $uibModalInstance, organizationUnitService, param) { var vm = this;

        vm.organizationUnit = param.organizationUnit;
        vm.contato = param.contato;
    
        vm.cancel = function () {
            $uibModalInstance.dismiss();
        };
    
    
        vm.save = function () {
            vm.contato.organizationUnitId = param.organizationUnit.id;
            if (vm.contato.depositoContatoId) {
                organizationUnitService
                    .updateContato(vm.contato)
                    .then(function (result) {
                        abp.notify.info(app.localize('SavedSuccessfully'));
                        $uibModalInstance.close(result.data);
                    });
            } else {
                organizationUnitService
                    .createContato(vm.contato)
                    .then(function (result) {
                        abp.notify.info(app.localize('SavedSuccessfully'));
                        $uibModalInstance.close(result.data);
                    });
            }
    
    
        };
    
    
        }
    ]);
    

    })();

  • User Avatar
    0
    ismcagdas created
    Support Team

    Thanks for feedback :)