Use of . append() or . html() - jQuery

Asked

Viewed 483 times

0

I am unable to insert html into an element.

JS

function carregaAgendamento() {
var url = "http://prestoexpress.com.br/vistoria/json.php";
$.getJSON(url, function(result) {
  console.log(result);
  $.each(result, function(i, field) {

    var id = field.id;
    var dataVistoriaAgenda = field.dataVistoriaAgenda;
    var tipoImovel = field.tipoImovel;
    var tipoVistoria = field.tipoVistoria;
    var codImovel = field.codImovel;

    $("#vistoria-agenda").append('<li><a href="#"><h2>'
      +codImovel+" "+dataVistoriaAgenda+'</h2><p>'
      +"Tipo: "+tipoVistoria+" Tipo Imóvel: "+tipoImovel+'</p></a></li>');
   });
 });
};

HTML

<body>
<p>Vistorias Agendadas</p>
<ul id="vistoria-agenda" data-role="listview" data-inset="true">

</ul>
</body>
javascript jquery html

  • Ezekiel check if his return really has something, see: http://answall.com/a/175701/14262 the question is very similar, and the boy’s mistake was the return json

  • @Marcelobonifazio is returning yes [{"id":"1","dataVistoriaAgenda":"2017-02-06","dataVistoria":"0000-00-00 00 00:00",""address":"Rua São Rafael, 34","typeImovel":"Residencial","comments":""","typeVistoria":"Output","status":"Pendente","typeImovel":"16524"}]

  • 3

    https://jsfiddle.net/k9n3jLd3/2/ apparently your code is ok

1 answer

1


Ezequiel, the site was unavailable at the time of my reply, so I created a json.php file to test and pasted your json that you wrote in the comment on it. I removed the interrogations(??) from the middle of the json so as not to make an error. I called your function and turned it good.

Output example:

Planned Surveys

16524 2017-02-06

Type: Outlet Property Type: Residential

Follow the code used to test:

json.php

[{"id":"1","dataVistoriaAgenda":"2017-02-06","dataVistoria":"0000-00-00 00:00:00","endereco":"Rua São Rafael, 34","tipoImovel":"Residencial","comentarios":"","tipoVistoria":"Saída","status":"Pendente","codImovel":"16524"}]

index php.

<!DOCTYPE html>
<html>
<head>
<title>Teste Carrega Agendamento</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
function carregaAgendamento() 
{
    //var url = "http://prestoexpress.com.br/vistoria/json.php";  // Site indisponível no momento

    var url='json.php'; // com json fake informado no comentário pra ver rodando
                        // Apenas removi umas "??" para não dar erro 

    $.getJSON(url, function(result) 
    {

      console.log(result);
      $.each(result, function(i, field) 
      {
            var id = field.id;
            var dataVistoriaAgenda = field.dataVistoriaAgenda;
            var tipoImovel = field.tipoImovel;
            var tipoVistoria = field.tipoVistoria;
            var codImovel = field.codImovel;

            $("#vistoria-agenda").append('<li><a href="#"><h2>' + codImovel + ' ' + dataVistoriaAgenda + '</h2><p>' +
            ' Tipo: ' + tipoVistoria + '<br>'+
            ' Tipo Imóvel: ' + tipoImovel + '</p></a></li>');
       });

    });

};  

window.onload=carregaAgendamento;
</script>   

</head>
<body>

    <p>Vistorias Agendadas</p>
    <ul id="vistoria-agenda" data-role="listview" data-inset="true">

    </ul>

</body>
</html>
  • 1

    I was able to solve using listvivew('refresh'); at the end of the append.. It might be a conflict because I’m using Jquery Mobile. thanks

Browser other questions tagged javascript jquery html

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