JQuery Click Events not firing based on class attribute - GETTING DESPERATE - PLEASE HELP!

JQuery Click Events not firing based on class attribute - GETTING DESPERATE - PLEASE HELP!

alexandregsafalexandregsaf Posts: 3Questions: 0Answers: 0
edited January 2014 in DataTables 1.9
I'm currently using datatables processing on the server side and being loaded by Ajax Requests, the problem is, before changing all to server side, i had everything loaded in the DOM in my first request and then processed client side, that was fine because all my items were in the DOM, now with server side, looks like datatables uses aria properties to show components nested in it, so my events that were fired when you clicked an icon that has an specific class is not working anymore. Code below for example:

HTML

[code]

[/code]

valorVisita is the class there i'm using to fire the click event.

JQUERY

[code]
$('.valorVisita').click(function (e) {
valor = $(this).attr('idcliente');
$("#modalVisitaSubmit").attr('idcliente', valor);

e.preventDefault();
$.ajax({
url: '/Cliente/ContatoClienteJSON/',
cache: false,
type: 'POST',
data: { ClienteID: valor },
error: function (e) {
},
success: function (data) {
$("#compose-visita-contato option").each(function (i, elemento) {
$("#compose-visita-contato option[value='" + $(this).val() + "']").remove();
})

var response = $.parseJSON(data);
for (index in response) {
$('#compose-visita-contato').append('' + response[index].Nome + '');
}
}
});
});
[/code]

Used to work fine, now it's not even entering the event, my table is currently displaying like these:

[code]





Nome


Email


Site


Tipo


Potencial


Telefone

Ações







[/code]

But if I go to firebug, i can find my tbody elements like that:

[code]

A A B B ASSOCIAÇÃO ATLETICA DO BANCO DO BRASIL


Outros

(81) 3117-6056










[/code]

Anyone knows how to proceed? I can not use JQuery ON resource and a static components because i need the ID in idcliente and that's being rendered dinamically, so i need a way to make those available in my DOM.

Thanks in advance.

Replies

  • allanallan Posts: 63,493Questions: 1Answers: 10,470 Site admin
    edited January 2014
    See the top FAQ: http://datatables.net/faqs#events and the jQuery documentation for on: http://api.jquery.com/on/ - specifically about delegated events.

    Allan
  • alexandregsafalexandregsaf Posts: 3Questions: 0Answers: 0
    Allan,

    I admit that i'm probably lost because considering my code, you can see that inside my tbody there's nothing, but when you use firebug, it shows hidden nodes that jquery functions cannot find.

    So using something like:

    [code]
    $( "#dataTable tbody tr" ).on( "click", function() {

    alert( $( this ).text() );

    });
    [/code]
    Doesn't work for me because tr, td and other internal elements cannot be found. My modal needs to get the item ID, so when i submit it, i use it for deletion, update and other actions, but in order to pass it to my modal, i'm binding the click event using a class selector, like this:

    [code]
    $('.valorVisita').click(function (e) {
    valor = $(this).attr('idcliente');
    $("#modalVisitaSubmit").attr('idcliente', valor);
    [/code]

    and that's the part that doesn't work.
  • netaisllcnetaisllc Posts: 24Questions: 2Answers: 0
    Your post is a little confusing. When you say "my table is currently displaying like these", what does that mean exactly? Are you using View Source in the browser? Let's assume that is true. With dynamic server-side loading that is exactly what is expected, because View Source shows the original page content at load time. Then (later, after the server loads the dynamic content), Firebug sees that content in the DOM. These are not hidden nodes, they are DOM nodes added to the document dynamically.

    The click event on the the ClassName is probably failing because the DOM node (the row) isn't there yet when the Jquery statement is executed. Remember Jquery is very quiet about failures like this.

    Allan suggests using event delegation because with it you can register events before their target nodes exist. That sounds right for this. However, you may also be able to register your events if you take care to do so AFTER the table row nodes have been added to the document. Note that pagination may be a challenged for you under that scenario.

    Regards, KJM
  • alexandregsafalexandregsaf Posts: 3Questions: 0Answers: 0
    netaisllc,

    What you said made complete sense, i'm felling completely stupid, I was somehow assuming that data was hidden and JQuery functions could not work for that reason.

    I just got my functions inside fnDrawCallback and worked just fine. Even with pagination it's working fine.

    Thanks a lot, you and Allan were very helpful!
  • allanallan Posts: 63,493Questions: 1Answers: 10,470 Site admin
    edited January 2014
    > $( "#dataTable tbody tr" ).on( "click", function() {

    Change to:

    [code]
    $( "#dataTable" ).on( "click", 'tbody tr', function() {
    [/code]

    to be a delegated event.

    Allan
This discussion has been closed.