0

Fala galera, tranquilo? Estou com um problema chato, e como nunca tinha usado AJAX na vida acho que o problema sou eu :( Basicamente é assim, tenho um GET que me retorna o seguinte JSON:

{
"result": 1,
"content": [
    {
        "PessoaId": "2",
        "PessoaNome": "Otavio",
        "PessoaTimeId": "1",
        "PessoaCategoriaId": "0",
        "Treinos": [
            {
                "TreinoId": "2",
                "TreinoNome": "Resistencia",
                "TreinoData": "2015-10-19",
                "TreinoHorario": "15:44:00",


            }
        ]
    }
],
}

Ok, ai eu tenho a minha pagina web que quer listar as pessoas. Tudo tranquilo até ai, listando, editando, deletando etc. Mas quero ter a opção de clicar em um icone e abrir um modal com os TREINOS dessa pessoa em questão. O problema está ai, eu fiz algo mas não deu certo. Segue o código:

function getTreinos(AvaliacaoId){
var url = '../getters/getAvaliacaoById.php?TimeId='+TimeId+'&AvaliacaoId='+AvaliacaoId;
var data = "";

    $.get(url, function(response){
        serverResponse = response;
        console.log(response.content.Treinos);
         if(response.result == 1){
            for(i in response.content.Treinos){
                console.log(response.content.Treinos);
                 data +='\
                <tr>\
                    <td> </td>\
                    <td>'+response.content[i].Treinos.TreinoNome+'</td>\
                    <td></td>\
                    <td>'+response.content[i].Treinos.TreinoData+'</td>\
                    <td>'+response.content[i].Treinos.TreinoHorario+'</td>\
                    <td>'+response.content[i].Treinos.TreinoFinalizado+'</td>\
                    <td></td>\
                </tr>';
       }
        $('.treino-body').append(data);           

        var width = new Array();
        $(".treino-body tr:eq(0)").find('td').each(function (position){
            width[position] = $(this).outerWidth();
        });
        $(".treino-header tr").find('th').each(function (position){
            $(this).css("width", width[position]+5);
        });
           callModalNovo();

    }
else
    alert(response.exception);
    });

}

Ele, quando abre a modal, me da que os atributos são undefined. Pesquisei por ai e parece que é algo com a sincronização do AJAX. Alguem tem alguma outra logica pra fazer isso? Grato

2 Respostas 2

0

Não sei se você digitou esse JSON na mão, mas ele está incorreto. Cole o contéudo no site JSONLint.com para ver o resultado. Verifique se seu método GET realmente está retornando um JSON válido, que no caso seria:

{
    "result": 1,
    "content": [
        {
            "PessoaId": "2",
            "PessoaNome": "Otavio",
            "PessoaTimeId": "1",
            "PessoaCategoriaId": "0",
            "Treinos": [
                {
                    "TreinoId": "2",
                    "TreinoNome": "Resistencia",
                    "TreinoData": "2015-10-19",
                    "TreinoHorario": "15:44:00"
                }
            ]
        }
    ]
}

Depois de verificar e corrigir o retorno do JSON, você precisa transformar sua JSON string em um objeto JavaScript:

$.get(url, function(response){
    response = JSON.parse(response);

    ... resto do código ...
}
1
  • Então, eu meio que modifiquei ele pra colar aqui haha, mas o original ta ok, já testei no Postman
    – LMaker
    22/10/2015 às 20:39
0

O problema maior é que você está fazendo o loop em nada, pois vc tem um array e depois tem outro array dentro, além disso, a forma que você formatou a quebra da HTML está incorreta também, eu fiz um exemplo baseado no bootstrap funcionando para você ter uma ideia:

Modal:

<!-- Button trigger modal -->
   <button type="button" class="btn btn-primary btn-lg" data-id="1" data-toggle="modal" data-title="Treinos" data-target="#element" data-button="Salvar|Fechar">
     Abrir Modal 1
   </button>

 <!-- Modal -->
  <div class="modal fade" id="element" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="myModalLabel">Modal title 1</h4>
         </div>
         <div class="modal-body">
             content entra aqui
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default hidden new" data-dismiss="modal">Novo botão</button>  
           <button type="button" class="btn btn-default close-changes" data-dismiss="modal">Close</button>
           <button type="button" class="btn btn-primary save-changes" data-dismiss="modal">Save changes</button>
         </div>
       </div>
     </div>
   </div>

Código javaScript:

$(document).ready(function() {

    $('#element').on('show.bs.modal', function(event) {

        $target = {};

        ['id','button', 'title','content'].forEach(function(value, key) {
            $target[value] = $(event.relatedTarget).data(value);
        });

       $(".new").addClass('hidden');
        $(".modal-title").text($target.title);
        $(".modal-body").html(myHTML());
        if ($target.id == 1) {
            var buttons = $target.button.split('|');

             $(".close-changes").text(buttons[0]);
             $(".save-changes").text(buttons[1]);
        }
 });

});

  function myHTML() {
      var response = {
                "result": 1,
                "content": [
                    {
                        "PessoaId": "2",
                        "PessoaNome": "Otavio",
                        "PessoaTimeId": "1",
                        "PessoaCategoriaId": "0",
                        "Treinos": [
                            {
                                "TreinoId": "2",
                                "TreinoNome": "Resistencia",
                                "TreinoData": "2015-10-19",
                                "TreinoHorario": "15:44:00",
                            }
                        ]
                    }
                ],
                }
          if (response.result == 1) {
           var list = [];
            if (response.content.length > 0) {
               list = ['<tr>',
                        '<td>',response.content[0].Treinos[0].TreinoId,'</td>',
                        '<td>',response.content[0].Treinos[0].TreinoNome,'</td>',
                        '<td>',response.content[0].Treinos[0].TreinoData,'</td>',
                        '<td>',response.content[0].Treinos[0].TreinoHorario,'</td>',
                     '</tr>'].join("\n");
            }
       return '<table class="table table-bordered">' + list + '</table>'; 
       }
  }

Aqui ele rodando: http://jsfiddle.net/ivanferrer/faf63qL8/

1
  • Opa , valeu! vou dar uma olhada
    – LMaker
    22/10/2015 às 20:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .