click on table and load the information on the screen

Question

click on table and load the information on the screen

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

This is my table:

<div class="col-md-13">
        <table data-url="data1.json" data-height="500" data-sort-name="name" data-sort-order="desc" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th data-field="id" data-align="center" data-sortable="true">Nível Acesso</th>
                    <th data-field="name" data-align="center" data-sortable="true">Nome</th>
                    <th data-field="price" data-align="center" data-sortable="true">Usuário</th>
                </tr>
            </thead>

            <tbody id="nmUsuario"></tbody>
        </table>
    </div>

I can not get the doubleclick event and pass the selected line as a parameter to the controller via jquery. This is my jquery skeleton.

function ConsultarAcesso() {

    str = "";

    $.ajax({

        url: '/CadastroAcesso/ConsultaAcesso',
        datatype: 'json',
        contentType: 'application/json;charset=utf-8',
        type: 'POST',
        data: JSON.stringify({  }),
        success: function (data) {
        },
        error: function (error) {

        }
    })
}

I turned this into fiddle and it worked.

<div id="divDb" class="teste" style="background-color: green; color: white; font-size: 30px;">
Duplo clique aqui e vai funcionar!
</div>

$(document).ready(function () {
    $(".teste").dblclick(function () {
         alert("Alô Paulão, Funcionou!");        
    });
});

I did this in my project and nothing.

function AtualizaTabela() {

    str = "";

    $.ajax({

        url: '/CadastroAcesso/AtualizaTabelaUsuario',
        datatype: 'json',
        contentType: 'application/json;charset=utf-8',
        type: 'POST',
        data: JSON.stringify({}),
        success: function (data) {

            $(data.result_usu).each(function () {

                str += '<tr>';
                str += '<td data-field="id" class="col-md-4 clique">' + this.Nivel_Acesso1 + '</td>';
                str += '<td data-field="name" class="col-md-4 clique">' + this.NM_Usuario + '</td>';
                str += '<td data-field="price" class="col-md-4 clique">' + this.Usuario1 + '</td>';
                str += '</tr>';
            })

            $('#nmUsuario').html(str);
            str = "";

        },
        error: function (error) {

        }
    })
}
$(document).ready(function () {
    AtualizaTabela();

    $(".clique").dblclick(function () {
        alert("Alô Paulão, Funcionou!");
    });
})

See that I created a class called clique for every <TD> of my table.

jquery asp.net-mvc

asked by anonymous 09.10.2014 / 13:42

2 answers

0

I have decided as follows. I created a function for double clicking and I call in every double click on the. That way it worked. Instead of using document.ready I used a function being called from within the tag as well. The function is called doubleclick.

$(data.result_usu).each(function () {

                str += '<tr>';
                str += '<td data-field="id" class="col-md-4 clique" onclick=" return duploclique();">' + this.Nivel_Acesso1 + '</td>';
                str += '<td data-field="name" class="col-md-4 clique" onclick=" return duploclique();>' + this.NM_Usuario + '</td>';
                str += '<td data-field="price" class="col-md-4 clique" onclick=" return duploclique();>' + this.Usuario1 + '</td>';
                str += '</tr>';
            })

16.10.2014 / 13:59

Visual error in Visual Studio / VS2010 projects in 2013 DELETE command in VBA does not work

score 2 · Accepted Answer

For elements dynamically added to the page, the click event must be attached to a parent element and delegated to the elements where we want to "click" the click.

This is necessary because when the code of click() is read the elements do not exist on the page, so the code of click() is not attached to them.

Where you have:

$(".clique").dblclick(function () {
    alert("Alô Paulão, Funcionou!");
});

Exchange By:

$(document).on("dblclick", '.clique', function (){
  alert("Alô Paulão, Funcionou!");
}

Note: As I see from the code, the target elements go into an element with the ID #nmUsuario , so you can limit the delegation scope as follows:

$('#nmUsuario').on("dblclick", '.clique', function (){
  alert("Alô Paulão, Funcionou!");
}