Javafx - button-click event, inside a table, does not work

Navigation
1

I'm in a JavaFX project where I needed to autocomplete an input. We have some plugins that can be used, but the autocomplete was so simple that we'd rather do it by hand.

Here's p HTML: 

<div class="input-group">
    <input type="text" class="form-control" name="nome" id="nome"/>
    <input type="text" style="display: none" class="form-control" name="cod-nome" id="cod-nome"/>
    <div class="input-group-btn">
        <button type="button" data-toggle="modal" data-target="#modal_addNome" class="btn btn-default">
            <span class="glyphicon glyphicon-plus"></span>
        </button>
        <button type="button" data-toggle="modal" data-target="#modal_pesqNome" class="btn btn-default">
            <span class="glyphicon glyphicon-search"></span>
        </button>
    </div>
</div>
<div id="divNomes" class="table table-bordered table-striped" style="position: absolute; z-index: 500; background-color: #ffffff; width: 93%; display: none">
    <table style="margin-left: 10px">
        <tbody id="tabNomes"></tbody>
    </table>
</div>

Basically, with each keyup done in the input, we look in a historico the names of people that contain the arranged string. From the result, we place this in a table below the input, with only the names, one per line. This works fine, and it's pretty fast. The problem is to get the click event on each name.

We are mounting the table as follows: 

function montarListaAutocomplete(arrayKeyValue) {
    $('#tabNomes').empty();
    for (var i in arrayKeyValue) {
        $('#tabNomes').append('<tr><td><button onclick="selecionarNome(' + arrayKeyValue[i].value + ')" class="autoComplete" type="button">' + arrayKeyValue[i].key + '</button></td></tr>');
    }
}

On each line I put this function onclick by passing a value, in this case an id.

The question is well there. The table is mounted, the names are arranged in autocomplete, but as soon as I click, it should do something (selectName ()), but it simply does nothing. Not even a console.log works.

Here is the function that clears the table and / or a display arrow: none in it: 

function configAutocomplete() {
    $('#nome').on('focus', function() {
        $('#divNomes').css('display', 'block');
        nomeController.autoCompleteNome($('#nome').val());
    });
    $('#nome').on('keyup', function() {
        nomeController.autoCompleteNome($('#nome').val());
    });
    $('#nome').on('blur', function() {
        $('#divNomes').css('display', 'none');
        $('#tabNomes').empty();
    });
}

Remembering people, I'm doing an application in JavaFX using HTML, CSS, Javascript and, of course, Java.

Does anyone have any idea what I might be doing wrong?

    
asked by anonymous 07.10.2015 / 21:43

1 answer

0

If you add this statement to your configAutocomplete() 

$('#tabNomes').on('click','button',function(){
    var id = $(this).attr('data-id');
    if (id) selecionarNome(id);
    else return false;
});

And you change to montarListaAutocomplete() to make $('#tabNomes').append('<tr><td><button data-id="' + arrayKeyValue[i].value + '" class="autoComplete" type="button">' + arrayKeyValue[i].key + '</button></td></tr>'); it has to work.

Explaining:

  • configAutocomplete() puts the event by event delgation (this means that, no matter when the element is put on the page, it will always respond to the click)
  • The montarListaAutocomplete function declares the data-id attribute on the new button that configAutoComplete() needs to call selecionarNome()
08.10.2015 / 13:37
Uncaught Error: [$ injector: modulerr] - Asp.Net MVC How to tell if application is open