click on table and load the information on the screen

Asked

Viewed 583 times

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’t get the Doubleclick event and pass the selected line as 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 it on the 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 it 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 each <TD> of my table.

jquery asp.net-mvc
  • 2

    Try to assign the event to its lines and take its content and put it in the variable and then move on to your post, ex:(NOTE: I did not test, I just put the idea) http://jsfiddle.net/raulsenaferreira/LokrjzcL/2/

  • I created this table in fiddle and assigns the class to jquery worked, but in my project it didn’t. The problem I think, is here> $(Document). ready(Function.... Because nothing I do anywhere in my project works that function. I don’t know what’s wrong. jquery.2.1.0.min. js is included in the layout page. But I also called it straight from the inherited page and it didn’t work. Just to add.

  • My fiddle: http://fiddle.jshell.net/pnet/3xckdycm/

  • I started to discover some things. When the page is loaded, by debug, I saw that the jquery function is called. After the document is fully loaded, there even clicking on the <td> is no longer called the function and the dblclick loses its operability.

  • You could paste the entire code of your page into a fiddle so I could take a look?

  • Okay, Raul, I’ll do it. I’ve been having structural problems and so I didn’t answer sooner. I will and I warn you.

Show 1 more comment

2 answers

2


For elements dynamically added to the page, the click event must be attached to a parent element and delegated to the elements where we intend to "fire" 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 the click() is not attached to them.

Where have you:

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

Exchange for:

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

Note: From what I see in the code, the target elements go inside an element with the ID #nmUsuario, therefore you can limit the delegation’s Chair as follows:

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

0

I solved as follows. I created a function for the double click and call on each double click . That way it worked. Instead of using Document.ready I used a function being called from within the tag like this. The function is called duploclique.

$(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>';
            })

Browser other questions tagged jquery asp.net-mvc

You are not signed in. Login or sign up in order to post.