how can i create an modal dialog in a datatable

Question

i have an angularJS app.controler with a datatable inside. in the last column is a delete-button. if i press this button should appear a modal dialog with a question "Do you realy want to delete this user?" That is working fine. But how can i display the username in the modal dialog? and how can i send the userid to the backend-controller? if i write this return '<a class="btn btn-danger btn-sm btn-block" href=/deleteUser?userid=' + data + '>' + ($filter('translate')('delete')) + '</a>'; the user will be delete immediately. this is my table: usertable

the modal dialog: the modal dialog in action (without the username)

this is a snippet in html

 <div id="myModal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
       <h2>DELETE USER</h2>
     </div>
     <div class="modal-body">
   <p>Do you realy want to delete the user? </p>
   <p>username: ??? </p>
 </div>
 <div class="modal-footer">
   <button type="button" class="btn btn-default" data-dismiss="modal">CANCEL</button>
   <button type="button" class="btn btn-danger">DELETE</button>
 </div>
 </div>
 </div>

and this is the app.controller

app.controller('UsersController',['$translate', '$scope','$filter', '$http', function($translate,$scope, $filter, $http) {

                $scope.users = [];
                $http.get('/user').then(function(resp) {
                    $scope.users = resp.data;
                });

                $scope.tableConfig = {
                    columns : [
                            {
                                data : 'username'
                            },
                            {
                                data : 'lastname'
                            },
                            {
                                data : 'firstname'
                            },
                            {
                                data : 'supplier',
                                render : function(data, type, row, meta) {
                                    if (!data || !data.name) {
                                        return '';
                                    }
                                    return data.name;
                                }
                            },
                            {
                                data : 'role'
                            },
                            {
                                //the edit button
                                data : 'id',
                                render : function(data, type, row, meta) {
                                    if (!data || !data) {
                                        return '';
                                }
                                    return '<a class="btn btn-warning btn-sm btn-block" href=/editUser?userid=' + data + '>' + ($filter('translate')('edit')) + '</a>';
                                }

                            },
                            {
                                //the delete button
                                data : 'id',
                                render : function(data, type, row, meta) {
                                    if (!data || !data) {
                                        return '';
                                }
                                    return '<button type="button"  class="btn btn-danger btn-sm btn-block" id="myDELBtn"  data-toggle="modal" data-target="#myModal" >DEL</button>'

                                }
                            },

                    ]
                }


            }]);

I guess you're using bootstrap so take a look over here: http://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal — FKutsche, Feb 19 '16 at 12:26

score 0 · Answer 1 · answered Feb 19 '16 at 12:32

0

Usually, on action in controllers you pass the ID of the entity; a good example is you can make your HREF to be /users/delete/5 that calls controller action delete for user #5. This way you will have the ID to pass to the controller and retrieve the username from it using AJAX call.

answered Feb 19 '16 at 12:32

Daniel Protopopov

6,778
3
23
39

you mean something like this: return ''. But how can i get the id from data in my html? – duke_42 Feb 19 '16 at 12:59

score 0 · Answer 2 · answered Feb 19 '16 at 13:10

/**
         * @Function to delete a user.
         */                    
        $scope.deleteConfirmation = function(size) {

                 var modalInstance = $modal.open({
                        templateUrl : 'views/userManagement/gxDeleteMessagePopup.html',
                        controller : ModalInstanceCtrlForDelete,
                        size : size,
                        resolve : {
                            dataSelect : function() {
                                return $scope;
                            }
                        }
                    });
                 modalInstance.result.then(function(selectedItem) {
                    },function() {
                }); 
        };


        //Added controller for delete message modal pop up 
        var ModalInstanceCtrlForDelete = function($scope, $modalInstance,dataSelect) {
            $scope.dataSelect = dataSelect;
                $scope.ok = function() {    

                      Service.deleteUser(dataSelect.gridOptions.user);
                     $modalInstance.close();    
                     $state.go('home.Manage Users');
                };

                $scope.cancel = function() {
                    $modalInstance.dismiss('cancel');

                };
                };

you can get data from html by using {{ user.id }}. Or if you are using a grid component, you can store the user row from your row click handler. Please tell me if this solves. — Dhananjay J, Feb 19 '16 at 13:13
if i write:

Do you realy want to delete the user?

username: {{user.id}}

there is nothing in the user.id. i have to put something in scope.userID = ... — duke_42, Feb 19 '16 at 13:25

how can i create an modal dialog in a datatable

2 Answers2