AJAX with synchronization error

Navigation
0

Talk, guys, cool? I have a annoying problem, and since I had never used AJAX in my life I think the problem is me :( Basically it's like this, I have a GET that returns me the following 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",


            }
        ]
    }
],
}

Okay, so I have my web page that wants to list people. Everything is quiet there, listing, editing, deleting, etc. But I want to have the option to click on an icon and open a modal with the TRAINS of that person in question. The problem is there, I did something but it did not work out. Here is the code: 

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);
    });

}

It, when it opens the modal, gives me the attributes are undefined. I searched around and it looks like it's something with AJAX synchronization. Does anyone have any other logic to do this? Thankful

    
asked by anonymous 22.10.2015 / 20:37

2 answers

0

I do not know if you typed this JSON in hand, but it is incorrect. Paste the content on JSONLint.com to see the result. Make sure your GET method is actually returning a valid JSON, which in this case would be: 

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

After checking and correcting the JSON return, you need to transform your JSON string into a JavaScript object: 

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

    ... resto do código ...
}
    
22.10.2015 / 21:10
0

The biggest problem is that you are looping at nothing, since you have an array and then have another array inside, besides, the way you formatted the HTML break is incorrect too, I did an example based on bootstrap working for you to get an idea:

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>

javaScript code: 

$(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>'; 
       }
  }

Here he running: link

    
22.10.2015 / 22:21
Redemption with JQuery Running the script after clicking a link