Call javascript function from modal popup button

Question

I´m can´t make this work. Can anyone help me?

First I have a page that opens a modal popup like this:

<label class="h5"> <button id="btnPopup" name="btnPopup" type="button" class="btn-u-green" data-toggle="modal" data-target="#responsive">Clique aqui</button> <span id="txtEscolherEstabelecimento">para escolher o estabelecimento</span> </label>


<div class="modal fade bs-example-modal-lg" id="responsive" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg">  <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" id="myModalLabel4">Escolha o Estabelecimento</h4>           <input type="hidden" name="nuEstabelecimentoEscolhido" />       </div>

        <div class="modal-body">            <div class="row">

                <label class="label">&nbsp;&nbsp;&nbsp;Qual o Estado?</label>
                <div class="col-md-6">
                    <label class="select">
                        <select id="cmbUf" name="cmbUf" class="form-control">
                            <option value="0">::: Selecione :::</option>
                            <?php
                            $ufs = $objUfs->getUfs($objConexao);
                            while($ufs = $objConexao->converterResultado()){
                                ?>
                                <option value="<?php echo $ufs['CoUf']?>"><?php echo $ufs['NoUf']?></option>
                            <?php }?>
                        </select>
                        <i></i>
                    </label>
                </div>          </div>

            <div class="row">
                <label class="label">&nbsp;&nbsp;&nbsp;Digite o nome para pesquisa</label>
                <div class="col-md-12">
                    <label class="input">
                        <i class="icon-append fa fa-search"></i>
                        <input type="text" id="NoEstabelecimentoPesquisa" name="NoEstabelecimentoPesquisa" placeholder="Digite o nome principal do Estabelecimento">
                    </label>
                </div>          </div>

            <div class="modal-footer">
                <button type="button" class="btn-u btn-u-default" id="btnPesquisarEstabelecimento" name="btnPesquisarEstabelecimento"><i class="fa fa-search"></i> Pesquisar</button>           </div>

            <table id="grdEstabelecimentosEncontrados" class="table" data-height="300" data-id-field="id" >
                <thead style="font-size: 12px;" >
                <tr>
                    <th data-field="Id" data-visible="false">Id</th>
                    <th data-field="NoEstabelecimento" data-visible="true">Nome</th>
                    <th data-field="NoTipoEstabelecimento" data-visible="true" >Tipo do Estabelecimento</th>
                    <th data-field="Endereco" data-visible="true">Endereço</th>
                    <th data-field="CidadeUf">Cidade/Uf</th>
                    <th data-field="Acao">Ação</th>
                </tr>
                </thead>
                <tbody style="font-size: 12px"></tbody>             </table>

        </div>

        <div class="modal-footer">          <button type="button" class="btn-u btn-u-default" data-dismiss="modal"><i class="fa fa-close"></i>Fechar</button>       </div>

    </div> </div>

After modal is opened I have a button on each line from table that I want to call a Javascript from the main page, each line look like this:

<tbody style="font-size: 12px">
    <tr>
        <td>1</td>
        <td>Smaff Hyundai</td>
        <td>Particular</td>
        <td>Trecho SIA Trecho 1 - até 628 - lado par</td>
        <td>Brasília</td>
        <td><button id="button1" class="btn btn-success" type="button"><i class="fa fa-check-circle-o" onclick="SelectItem(1);"></i> Selecionar</button></td>
    </tr>
</tbody>

Then I have thejavascript function I want to call:

function SelectItem(nuEstabelecimento) {
    alert('Here' + nuEstabelecimento);
}

The row is added to table from another script that appends a row, like this:

$.each(dataJSON, function(idx, elem){

newTR =  ('<tr>');
newTR += ('<td>'+elem.NuEstabelecimento+'</td>');
newTR += ('<td>'+elem.NoEstabelecimento+'</td>');
newTR += ('<td>'+elem.NoTipoEstabelecimento+'</td>');
newTR += ('<td>'+elem.Endereco+'</td>');
newTR += ('<td>'+elem.CidadeUf+'</td>');
newTR += ('<td><button id="button'+elem.NuEstabelecimento+'" class="btn btn-success" type="button"><i class="fa fa-check-circle-o" onclick="SelectItem(1);"></i> Selecionar</button></td>');
newTR += ('</tr>');

$('#grdEstabelecimentosEncontrados tbody').append(newTR);

});

Everything is work fine but the onclick button added don´t do anything and no error occurs on console.

Any Helps on that? Thanks!!!

Brian Hadaway · Accepted Answer · 2017-01-16 23:41:38Z

2

Use event delegation instead of adding a click handler to every row:

$('#grdEstabelecimentosEncontrados').on('click', '.btn-success', function(e){ //this code will run for all current //and future elements with the class of .btn-success });

answered Jan 16, 2017 at 23:41

Brian Hadaway

1,89114 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rafael Leandro Ferreira Over a year ago

Thanks Brian. This works just as I want to! Even if I have many rows with different buttons id every one calls the function as I want!

Rafael Leandro Ferreira Over a year ago

Brian, the problem now is that each row has its own value and I want to pass or get this on click button. Calling function in event onclick I can pass this like onclick=SelectItem(param), but with your solution I don´t now if its possible!

Rafael Leandro Ferreira Over a year ago

Ok Brian, I did this. I don´t pass parameters but I can get the value of rows like this and it´s good for now.

$(document).on("click", ".selecionarEstabelecimento", function(e){  	var $tr = $(this).closest("tr"); 	var $td = $(this).closest("td");  	alert($(this).val()); 	alert($td.prev().prev().prev().prev().text());  });

Collectives™ on Stack Overflow

Call javascript function from modal popup button

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related