Jquery Append does not work

Asked

Viewed 548 times

1

Galera I am making a load on demand use a button that the user click on it loads the data 2 in 2, these data come from the database, but in this code I will post below does not work when I put the .

$(function(){

carregar(0, 2, "CarregarUsuario.php");

$("button.carregar-mais").click(function(evento){

    //desabilitando carregamento
    evento.preventDefault();

    var inicio = $("tbody tr").length;

    carregar(inicio, 2, "CarregarUsuario.php");
});

function carregar(inicio, maximo, url) {

    var dados = {inicio: inicio, maximo: maximo};

    $.post(url, dados, function (data) {

        for(i = 0; i < data.dados.length; i++) {

            $("tbody").append(
                "<tr>" +
                "<td>" + data.dados[i].CodigoUsuario + "</td>" + 
                "<td>" + data.dados[i].NomeUsuario + "</td>" + 
                "<td>" + data.dados[i].Email_Interno + "</td>" +
                "<td>" + data.dados[i].Senha + "</td>" +
                "</tr>"
            );
        }

        var conta = $("tbody tr").length;

        if(conta == data.resultadoQuantidade) {

            $("button.carregar-mais").hide();
        }
    },"json");
}

});

In this part here if I take out the tr ai works more I don’t know why:

                "<td>" + data.dados[i].CodigoUsuario + "</td>" + 
                "<td>" + data.dados[i].NomeUsuario + "</td>" + 
                "<td>" + data.dados[i].Email_Interno + "</td>" +
                "<td>" + data.dados[i].Senha + "</td>"

Can someone help me ?

People just below this the part that connects to the database, I think it will be clearer how the code works:

<?php

include_once("ConexaoBancoDados.php");

$inicio = $_POST['inicio'];
$maximo = $_POST['maximo'];
// var_dump($_POST);
// $inicio = 1;
// $maximo = 10;

$resultUsuarioCont = mysqli_query($conn, "SELECT * FROM usuarios");

$resultado["resultadoQuantidade"] = mysqli_num_rows($resultUsuarioCont);

$resultUsuario = mysqli_query($conn, "SELECT * FROM usuarios LIMIT $inicio, $maximo");

if($resultado["resultadoQuantidade"] > 0) {

    while($linhaUsuario = mysqli_fetch_assoc($resultUsuario)) {
        $resultadoDados[] = $linhaUsuario;
    }

    $resultado["dados"] = $resultadoDados;
}else {
    $resultado["dados"] = null;
    $resultado["resultadoQuantidade"];
}
// var_dump($resultado["dados"]);
header('Content-type: application/json');
echo json_encode($resultado);
javascript jquery

  • You could leave like this: "<tr><td>" and "</td></tr>". What is the result printable in the console the text being mounted?

  • Printed right:

  • printed this: <tr><td> </td></tr>

  • look what I did in the apped and it didn’t work:]

  • $("tbody"). append( '<tr><td> </td></tr>' );

  • You seem to have no problem with your code, see: https://jsfiddle.net/lbclucascosta/2u38s0b2/ - is probably somewhere else or other. If you can provide a more complete Fiddle for your case, help us.

  • I’ll post the part that connects to the database...

  • What comes in data.dados?

  • I’ll check here...

  • Comes an Object array with the data I bring from the database via Json.

  • When the screen is loaded I click on the button to bring more data, but when debugging there I could notice that it is not entering inside the $.post();

  • Puts a console.log(data.dados[i]); before the .append, check that all objects have the same structure and have data.

  • Because it is put the screen to automatically load 2 objects, ie two lines already comes loaded, only when I click the button click more it does not enter the post, so when I click the button does not enter the console.log(data[i])but apparently the data is coming corrector because as I said it is already automatically loaded 2 tr at the top, example: load(0, 2, "Load.php")

  • Better to say it does not enter the Post when I click the button, so it does not show the console.log

Show 9 more comments

2 answers

1

Try to give an id to your table and use the code below to see if it works.

$("#idDaTabela tr:last").after(...);

Update:

There also seems to be a problem in how you are selecting the button. Place the id "button-load-more" (see that I removed the id point) on the button and call: 

$("#button-carregar-mais").on("click", function(evento){...});

Take the example:

$(function() {
  $("#button-carregar-mais").on("click", function(evento) {
    $("#tabela tr:last").after("<tr><td>Nova Linha</td></tr>");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button-carregar-mais">
  Botão
</button>
<table id="tabela">
  <tbody>
    <tr>
      <td>Linha Existente</td>
    </tr>
  </tbody>
</table>

  • I’ll try to use it that way !

0


Guys I managed to find the problem I think I will open a new question, the problem is in php, json_encode is returning null, I do not know why, I printed the query even before passing json_encode and everything came right, but when I play the data inside this function ai returns Null.

Browser other questions tagged javascript jquery

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