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;
Go to accepted answer
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 :)

Assignee
No one
Labels
None yet