Base solution for your next web application
Open Closed

PhoneBook Tutorial / Can't Open Modal #1220


User avatar
0
bobtabor created

Hi, was attempting to follow the tutorial to pop open the Create Person dialog.

It's at this step I get stuck:

<a class="postlink" href="http://www.aspnetzero.com/Documents/Developing-Step-By-Step#creating-a-new-people">http://www.aspnetzero.com/Documents/Dev ... new-people</a>

In Chrome Tools, I can see the error. (See attached screenshot).

Looked up the error on the forums, and saw this thread: #862@a3828112-88a9-4f3e-8d4e-08789ee5b88b

... and I replaced the $modal with $uibModal, however it didn't fix the issue.

Delete, filter, permissions ... everything works. Just can't pop up the dialog. Help? Thank you!

Here's the index.js

(function () {
    appModule.controller('tenant.views.phonebook.index', [
        '$scope', '$uibModal', 'abp.services.app.person',
        function ($scope, $uibModal, personService) {
            var vm = this;

            $scope.$on('$viewContentLoaded', function () {
                App.initAjax();
            });

            vm.loading = false;

            vm.persons = [];
            vm.filterText = '';

            vm.permissions = {
                createPerson: abp.auth.hasPermission('Pages.Tenant.PhoneBook.CreatePerson'),
                deletePerson: abp.auth.hasPermission('Pages.Tenant.PhoneBook.DeletePerson')
            };

            vm.getPeople = function () {
                personService.getPeople({
                    filter: vm.filterText
                }).success(function (result) {
                    vm.persons = result.items;
                });
            };

            vm.openModal = function () {
                var modalInstance = $uibModal.open({
                    templateUrl: '~/App/tenant/views/phonebook/createPersonModal.cshtml',
                    controller: 'tenant.views.phonebook.createPersonModal as vm',
                    backdrop: 'static'
                });

                modalInstance.result.then(function () {
                    vm.getPeople();
                });
            };


            vm.deletePerson = function (person) {
                abp.message.confirm(
                    app.localize('AreYouSureToDeletePerson', person.name),
                    function (isConfirmed) {
                        if (isConfirmed) {
                            personService.deletePerson({
                                id: person.id
                            }).success(function () {
                                abp.notify.success(app.localize('SuccessfullyDeleted'));
                                vm.getPeople();
                            });
                        }
                    }
                );
            };

            vm.getPeople();
        }
    ]);
})();

... and the index.cshtml:

<div ng-controller="tenant.views.phonebook.index as vm">
    <div class="row margin-bottom-5">
        <div class="col-xs-6">
            <div class="page-head">
                <div class="page-title">
                    <h1>
                        <span>@L("PhoneBook")</span>
                    </h1>
                </div>
            </div>
        </div>
        <div class="col-xs-6 text-right">
            <button ng-if="vm.permissions.createPerson" class="btn btn-primary blue" ng-click="vm.openModal()"><i class="fa fa-plus"></i> @L("CreateNewPerson")</button>
        </div>
    </div>
    <div class="portlet light">
        <div class="portlet-title">

            <h3>@L("AllPeople") ({{vm.persons.length}})</h3>

            <div class="inputs inputs-full-width">
                <div class="portlet-input">
                    <form>
                        <div class="input-group">
                            <input ng-model="vm.filterText" auto-focus class="form-control" placeholder="@L("SearchWithThreeDot")" type="text">
                            <span class="input-group-btn">
                                <button ng-click="vm.getPeople()" class="btn btn-default" type="submit"><i class="icon-magnifier"></i></button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>

        </div>
        <div class="portlet-body">

            <div id="AllPeopleList" class="list-group">
                <div class="list-group-item" ng-repeat="person in vm.persons" ng-class="{'person-editing':person==vm.editingPerson}">
                    <h4 class="list-group-item-heading">
                        {{person.name}} {{person.surname}}
                        <span class="person-buttons">
                            <button ng-click="vm.editPerson(person)" title="@L("Edit")" class="btn btn-circle btn-icon-only green">
                                <i class="icon-pencil"></i>
                            </button>
                            <button ng-if="vm.permissions.deletePerson" ng-click="vm.deletePerson(person)" title="@L("Delete")" class="btn btn-circle btn-icon-only red">
                                <i class="icon-trash"></i>
                            </button>
                        </span>
                    </h4>
                    <p class="list-group-item-text">
                        {{person.emailAddress}}
                    </p>
                    
                </div>
            </div>

        </div>
    </div>
</div>


7 Answer(s)
  • User Avatar
    0
    vnetonline created

    try clearing your cache

    Regards vnetonline

  • User Avatar
    0
    bobtabor created

    Thank you, however, I cleared the browser cache, even used a NEW browser that never accessed that page before and the problem persists.

  • User Avatar
    0
    vnetonline created

    I two have been going through the tutorial and finished it last night. The only difference I can see between your code and my code is I have name my method call vm.openCreatePersonModal instead of vm.openModal. But that shouldn't matter and it works fine for me.

  • User Avatar
    0
    bobtabor created

    Yeah, I changed it in one of many attempts at diagnosing the problem. Thanks ... the tutorial is pretty rough in a few spots. I'd be happy to help update it (once I figure this issue out).

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    I believe your problem is related to your modal's controller. Can you share createPersonModal controller's code as well.

    Probably you will need to inject $uibModalInstance on that controller.

  • User Avatar
    0
    rferrari created

    I confirm the issue on that part is that you have to replace $modal with $uibModal in both the modal controller and the index one. Look at:

    $modal has been renamed to $uibModal in ui-bootstrap 0.14.0: [https://github.com/olov/ng-annotate/issues/200])

  • User Avatar
    0
    hikalkan created
    Support Team

    Oh, PhoneBook sample application is a bit old and not upgraded to latest UI-bootstrap. We will upgrade it and update the documentation soon.

    Created an issue: <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-samples/issues/1">https://github.com/aspnetzero/aspnet-ze ... s/issues/1</a>

    Thank you.