List data in a table using ajax php and bootstrap

Asked

Viewed 1,691 times

-1

I am facing a lot 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 that this is not the best way (it seems to gambiarra) to list the data in a table, for example: the button I put, I can’t access it, perhaps because it is being declared precisely in a JS function. There is the right way to do this procedure?

inserir a descrição da imagem aqui

O resultado, quando aperto em cima do botao para me exibir um simples ALERT(), ele nao exibe nada, porem nao exibe nenhum erro.

javascript jquery html ajax bootstrap-3

  • The button is outside of javascript, first change

  • But how do I get him out? If when I place it generates the following error: Uncaught Syntaxerror: Unexpected token < OBS: '<button>...</button>' for <button>...<button>

  • missing simple quotation marks '<button class="btn btn-Danger" id="test" type="button">Change Address</button>' does so

  • He’s right the way you put it, that’s how it was. However, I cannot find it when I make the following call: $('#test'). on('click',test); which executes the following function: Function test(){ Alert(data.cep); }

  • looks like it missed closing like after the </button>' + '</td></tr>';

  • '<button class="btn btn-Danger" onClick="test();" type="button">Change Address</button>'+ '</td></tr>' Same problem.

  • it is more lacked that, something else if has to put the image of that?

  • Already on, Perai

  • The page result image

  • I updated the question, give a look... I can’t look at it anymore and I can’t solve it! rs

  • Posted! From a look ai..

  • That one data.length does not make sense.. Put in question what returns this data... that’s the key to the issue, so your loop fordoesn’t work

  • The change address button which is the probleama?

  • A data.lengthwould only make sense if you return an array, as it returns a JSON, it makes no sense at all.

  • You have to see the structure of this JSON in order to make a loop.

  • my LOOP is working properly, now that Voce said I saw that it does not make much sense, but the problem is not in the is, but in the requisicao what I try to do when I press the CHANGE ADDRESS button. Theoretically he would have to show me a simple Alert: '<button class="btn btn-Danger" id="test 1" type="button">Change Address</button>' $('#teste1'). on('click',test); Function test(){ Alert('a'); }

  • yes, in the change button.

  • Puts $('#teste1').on('click',teste); within the success of Ajax at the end

  • I managed to solve my friend, thank you very much for the help!!!!!! Always grateful to you guys!

Show 14 more comments

1 answer

0

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

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

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

And calling him onClick="" in the boot!

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

I thank you all for your help! And for wasting a little of your time trying to help me.

THANK YOU VERY MUCH!

Browser other questions tagged javascript jquery html ajax bootstrap-3

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