data-target not working inside bootgrid plugin

Question

I'm trying to call a modal inside the bootgrid plugin, just it is not working.

This is the script which makes the json data to bootgrid: (Please focus in the variable $acoes)

try {

        $where = " 1=1 ";
        $order_by= "usuarionome";
        $rows = 25;
        $current = 1;
        $limit_l = ($current * $rows) - ($rows);
        $limit_h = $limit_l + $rows  ;

        //Handles Sort querystring sent from Bootgrid
        if (isset($_REQUEST['sort']) && is_array($_REQUEST['sort']) ) {
            $order_by="";
            foreach($_REQUEST['sort'] as $key=> $value) {
                $order_by.=" $key $value";
            }
        }

        //Handles search  querystring sent from Bootgrid
        if (isset($_REQUEST['searchPhrase']) ) {
            $search=trim($_REQUEST['searchPhrase']);
            $where.= " AND ( usuarionome LIKE '".$search."%' OR  usuariodescricao LIKE '".$search."%' ) ";
        }

        //Handles determines where in the paging count this result set falls in
        if (isset($_REQUEST['rowCount']) ) {
            $rows=$_REQUEST['rowCount'];
        }

        //calculate the low and high limits for the SQL LIMIT x,y clause
        if (isset($_REQUEST['current']) ) {
            $current=$_REQUEST['current'];
            $limit_l=($current * $rows) - ($rows);
            $limit_h=$rows ;
        }

        if ($rows==-1) {
            $limit = "acesso.usuario";  //no limit
        } else {
            //$limit=" LIMIT $limit_l,$limit_h  ";

            $limit = " (SELECT ROW_NUMBER() OVER(ORDER BY usuarioidentificador) AS rownumber,*
                                FROM acesso.usuario WHERE $where)  as somex  WHERE  rownumber >= ($current)*10-9
                                AND rownumber <=($current)*$rows  ";
        }

        // POSTGRES
        //$sql = "SELECT usuarionome, usuariodescricao, usuariosituacao FROM acesso.usuario WHERE $where $limit";

        // SQL SERVER
        $sql = "SELECT usuarioidentificador, usuarionome, usuariodescricao, usuariosituacao FROM $limit";

        $user= new Usuario();
        $result = $user->CustomSelect($sql);

        foreach ($result as &$value) {

            $editar = $this->link('usuarios/editar/'.Encrypt::encrypt($value->usuarioidentificador));
            $excluir = $this->link('usuarios/excluir/');

            $acoes = '<a class="btn btn-primary" href="'.$editar.'" role="button"><i class="glyphicon glyphicon-edit"></i> Editar </a>&nbsp;
                        <button class="btn btn-danger" type="button" data-toggle="modal" data-target="#confirmDelete" data-title="Excluir usuário" data-message="Tem certeza que deseja excluir o usuário '.$value->usuarionome.'?" data-id="'.Encrypt::encrypt($value->usuarioidentificador).'" data-link="'.$excluir.'"> 
                                <i class="glyphicon glyphicon-trash"></i> Excluir 
                            </button>';

            if ($value->usuariosituacao == 1) {
                $value->usuariosituacao = 'Ativo';
            } else {
                $value->usuariosituacao = 'Inativo';
            }

            $value->usuarioidentificador = $acoes;
        }

        $json=json_encode( $result );

        $count = "SELECT COUNT(*) as qtd FROM acesso.usuario WHERE $where";

        $nRows = $user->CustomSelect($count);
        $qtde = $nRows[0]->qtd;

        // Tell the broswer JSON is coming
        header('Content-Type: application/json');

        // Means we're using bootgrid library
        if (isset($_REQUEST['rowCount']) ) {
            echo "{ \"current\":  $current, \"rowCount\":$rows,  \"rows\": ".$json.", \"total\": $qtde }";
        } else {
            // Just plain vanillat JSON output
            echo $json;
        }

    } catch(PDOException $e) {
        echo 'SQL PDO ERROR: ' . $e->getMessage();
    }

This is my interface, it makes use of Twig, its the project template.

{% import 'Shared/_twigMacro.mitra.php' as forms %}

<div class="container-fluid">
    <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading"><a href="{{ link('home/index') }}">Home</a> > Usu&aacute;rios</div>
                <div class="panel-body">
                    <a class="btn btn-default" href="{{ link('usuarios/salvar') }}" role="button"><i class="glyphicon glyphicon-plus"></i> Adicionar novo usu&aacute;rio</a>
                    <br/><br/>
                    <table id="grid-data" class="table table-condensed table-hover table-striped" data-toggle="bootgrid" data-ajax="true" data-url="{{ link('usuarios/paginacao') }}">
                      <thead>
                            <tr>
                                    <th data-column-id='usuarionome'><div align='center'>Usu&aacute;rio</div></th>
                                    <th data-column-id='usuariodescricao'><div align='center'>Descri&ccedil;&atilde;o</div></th>
                                    <th data-column-id='usuariosituacao'><div align='center'>Situa&ccedil;&atilde;o</div></th>
                                    <th data-column-id='usuarioidentificador'><div align='center'>A&ccedil;&otilde;es</div></th>
                            </tr>
                    </thead>
                    </table>
                    <a class="btn btn-default" href="{{ link('home/index') }}" role="button"><i class="glyphicon glyphicon-arrow-left"></i> Voltar</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Dialog -->
<div class="modal fade" id="confirmDelete" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
    <input type="hidden" id="confirmId">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <p></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><i class="glyphicon glyphicon-ban-circle"></i> Cancelar</button>
                    <button type="button" class="btn btn-danger" id="confirm"><i class="glyphicon glyphicon-trash"></i> Excluir</button>
                </div>
            </div>
    </div>
</div>

{{ forms.modal( tituloModal , corpoModal ) }}

This is my javascript, it is loaded in my masterpage.

    $('#confirmDelete').on('show.bs.modal', function (e) {
    $id = $(e.relatedTarget).attr('data-id');
    $link = $(e.relatedTarget).attr('data-link');
    $message = $(e.relatedTarget).attr('data-message');
    $(this).find('.modal-body p').text($message);
    $title = $(e.relatedTarget).attr('data-title');
    $(this).find('.modal-title').text($title);
    $(this).find('#confirmId').val($id);

    // Pass form reference to modal for submission on yes/ok
    var form = $(e.relatedTarget).closest('form');
    $(this).find('.modal-footer #confirm').data('form', form);
});

<!-- Form confirm (yes/ok) handler, submits form -->
$('#confirmDelete').find('.modal-footer #confirm').on('click', function(){
     window.location= $link +$('#confirmId').val();
});

The modal works if I remove the bootgrid from the project. I already changed the js load order of both scripts. I'm 100% sure that it is just a little trick to make it happens. Help me if you can.

Thanks

Answer 1

It is working with the following script:

    $("#grid-data").on("loaded.rs.jquery.bootgrid", function(){
    $(".btn-deletar").click(function() {

        $id = $(this).data('id');
        $link = $(this).data('link');
        $message = $(this).data('message');
        $('#confirmDelete').find('.modal-body p').text($message);
        $title = $(this).data('title');
        $('#confirmDelete').find('.modal-title').text($title);
        $('#confirmDelete').find('#confirmId').val($id);

        // Pass form reference to modal for submission on yes/ok
        var form = $(this).closest('form');
        $('#confirmDelete').find('.modal-footer #confirm').data('form', form);


        <!-- Form confirm (yes/ok) handler, submits form -->
        $('#confirmDelete').find('.modal-footer #confirm').on('click', function(){
             window.location= $link +$('#confirmId').val();
        });


        $('#confirmDelete').modal('show');


    });

});