List data in a table using ajax php and bootstrap

-1

I am facing a series of problems and doubts with ajax! Have the following function that updates the data and list in a table:

 function atualiza(){
                $.ajax({    
                    dataType: 'json',
                    url: 'get_enderecos.php',
                    success: function(data){
                        for(var i=0; data.length>i;i++){
                            $('#enderecos').append('<tr><td>'+data[i].sequencia+'</td><td>'
                                                    +data[i].cep+'</td><td>'+data[i].endereco+
                                                    '</td><td>'+data[i].bairro+'</td><td>'+data[i].cidade+
                                                    '</td><td>'+data[i].estado+
                                                    '</td><td class="actions col-xs-2 col-sm-2 col-md-2 col-lg-2" align="center">'+
                                                        <button class="btn btn-danger" id="teste" type="button">Alterar Endereço</button>);
                            }
                        }
                    });
            }

PHP:

<?php

    require_once('acessabanco.php');

    $objDb = new db();
    $link = $objDb->conecta_banco(); 

    $sql = " SELECT sequencia, cep, endereco, bairro, cidade, estado FROM ENDERECOS";

    $lista = mysqli_query($link, $sql);

        while($resultado = mysqli_fetch_assoc($lista)){
            $vetor[] = array_map('utf8_encode', $resultado);
        }
        echo json_encode($vetor);

?>

HTML:

 <table class="table table-striped table-bordered table-hover table-condensed table-responsive"> 
                        <thead>
                            <tr>
                                <th> Código </th>
                                <th> CEP </th>
                                <th> Endereço </th>
                                <th> Bairro </th>
                                <th> Cidade </th>
                                <th> Estado </th>
                                <th> Alterar </th>
                            </tr>
                        </thead>
                         <tbody id="enderecos">
                        </tobody> 
                    </table>  

I think this is not the best way (it seems gambiarra) to list the data in a table, for example: the button I put, I can not access it, perhaps because it is being declared in a JS function. Is there a proper way to do this?

    
asked by anonymous 26.10.2017 / 02:01

1 answer

0

I was able to solve the problem by putting the function out of the function that checks if the document is ready!

 <script>
   $(document).ready( function(){
)};

function teste(){
                alert('a');
            }
</script>

And calling it by onClick="" on the button!

 '<button class="btn btn-danger" onClick="teste()" type="button">Alterar Endereço</button>'

Thank you all for the help! And for wasting your time trying to help me.

THANK YOU VERY MUCH!

    
26.10.2017 / 03:08