Problem tr hidden does not show in the right place after json is returned

Navigation
0

I have a table that lists all users, a tr hidden in that when I click the show players button it opens shows this tr with a table inside list below the user that I am wanting to show its players. What is happening to me and for example listo 6 users click on the button to show players of the first user, it shows the tr hidden in last place of the table instead of showing just below first user

JQUERY 

$(document).on("click", "#show_jogadores", function(e) {
    e.preventDefault();
    var id_agente = $(this).data("id-agente");
    $('#content-'+id_agente+'').toggle();
});

HTML 

<table class="table table-hover table-bordered">
<thead>
<tr>
    <th class="table-check">
        Função
    </th>
    <th>Username</th>
    <th>Moeda</th>
    <th>Jogadores</th>
    <th>Credit Line</th>
    <th>Total disponível</th>
    <th>Balance</th>
    <th>Total Players Balance</th>
    <th>Crédito disponível</th>
    <th>Ações</th>
</tr>
</thead>
<tbody id="resultado_agent_tree"> 
@foreach($lista_tree as $agent_tree)
<tr>
    <td align="left">
        <div id="show-list" data-tt-id="{{ $agent_tree->user_id }}" class="fa fa-plus" data-tt-parent="" style="float: left; font-size: 18px; margin: 3px 5px 0px 0px; cursor: pointer;">
        </div>
        <div id="show-list-content" data-tt-id="{{ $agent_tree->user_id }}" class="fa fa-plus" data-tt-parent="" style="float: left; font-size: 18px; display: none; margin: 3px 5px 0px 0px; cursor: pointer;">
        </div>
        <div id="hidden-list" data-tt-id="{{ $agent_tree->user_id }}" class="fa fa-minus" data-tt-parent="" style="float: left; font-size: 18px; display: none; margin: 3px 5px 0px 0px; cursor: pointer;">
        </div>
        <div style="width: 37px; height: 25px; line-height: 23px; font-size: 12px; text-align: center;  border-radius: 12.5px; box-sizing: border-box; text-transform: uppercase; border: 1px solid #26a677; color: #26a677; float: left;">{{ $agent_tree->sign }}
        </div> 
    </td>
    <td class="table-check">
        {{ $agent_tree->username_agente }}  
    </td>
    <td class="table-check">
        {{ $agent_tree->code }}
    </td>
    <td class="table-check" align="center">
        {{ $agent_tree->count_players }}
    </td>
    <td class="table-check" align="right">
        {{ number_format($agent_tree->credit_line,2,",","") }} €
    </td>
    <td class="table-date">
        {{ number_format($agent_tree->balance_agentes,2,",","") }} €
    </td>
    <td class="table-check" align="right">
        @if($agent_tree->balance_real < 0)
            <div style="color: #ff7b84"> {{ number_format($agent_tree->balance_real,2,",","") }} €</div>
        @else   
            <div> {{ number_format($agent_tree->balance_real,2,",","") }} €</div>
        @endif  
    </td>
    <td class="table-check" align="right">
        {{ number_format($agent_tree->balance_player,2,",","") }} €     
    </td>
    <td class="table-check" align="right">
        @if($agent_tree->balance_real < 0)
            {{ number_format($agent_tree->balance_agentes -+ $agent_tree->balance_real,2,",","") }} €
        @else       
            {{ number_format($agent_tree->balance_agentes - $agent_tree->balance_real,2,",","") }} €
        @endif  
    </td>
    <td class="table-check">
        <div id="show_jogadores" data-id-agente="{{ $agent_tree->user_id }}" style="width: 100px; height: 30px; border: 1px solid #c2c5cd; text-align: center; line-height: 28px; float: left; border-right: none; cursor: pointer;">
            <p>JOGADORES</p>
        </div>
        <div style="width: 30px; height: 30px; border: 1px solid #c2c5cd; text-align: center; line-height: 28px; float: left; cursor: pointer;">
            <i id="botao_ver_opcoes" data-id-agente="{{ $agent_tree->user_id }}" class="fa fa-angle-down" aria-hidden="true"></i>
        </div>
        <div id="opcoes-{{ $agent_tree->user_id }}" style="width: 130px; margin-top: 30px; background-color: white; border: 1px solid #c2c5cd; z-index: 10; position: absolute; display: none; border-top: none;">
            <!--<div data-toggle="modal" data-target="#modal-add-credito" id="add-credito-btn" data-id-agente="{{ $agent_tree->user_id }}" data-id-line="{{ $agent_tree->credit_line }}" style="text-align: center; line-height: 30px; cursor: pointer;">TRANSFERIR</div>-->
            <div data-toggle="modal" data-target="#modal-info-agente" id="info-user-btn" data-id-agente="{{ $agent_tree->user_id }}" style="text-align: center; line-height: 30px; cursor: pointer;">INFORMAÇÕES</div>
            <!--<div data-toggle="modal" data-target="#modal-update-senha" id="change-pwd-btn" data-id-agente="{{ $agent_tree->user_id }}" style="text-align: center; line-height: 30px; cursor: pointer;">SENHA</div>
            <div style="text-align: center; line-height: 30px; cursor: pointer;">MENSAGEM</div>-->
        </div>
    </td>
</tr>
@endforeach 
<tr id="content-{{ $agent_tree->user_id }}" style="display: none;" bgcolor="#d6d6df">
    <td colspan="10" style="padding:0; margin:0; ">
        <div class="table-responsive alt-table">
            <table style=" margin: 10px auto; width: 50%;" class="table table-bordered">
                 <thead>
                    <tr bgcolor="#e0e0e2">
                        <th class="table-check">
                            ID do Jogador
                        </th>
                        <th>Username</th>
                        <th>Primeiro Nome</th>
                        <th>Sobrenome</th>
                        <th>Balance</th>
                        <th>Ações</th>
                    </tr>
                </thead>
                <tbody>
                     @foreach($players as $players_dados)
                    <tr>
                        <td class="table-check">
                            {{ $players_dados->id }}
                        </td>
                        <td class="table-check">
                            {{ $players_dados->username }}
                        </td>
                        <td class="table-check">
                            {{ $players_dados->f_name }}
                        </td>
                        <td class="table-check">
                            {{ $players_dados->l_name }}
                        </td>
                        <td class="table-check">
                            {{ number_format($players_dados->balance,2,",","") }} €
                        </td>
                        <td class="table-check">
                            <div class="btn-group">
                                <button type="button" data-toggle="modal" data-target="#modal-add-credito-jogador" id="add-credito-btn-jogador" data-id-jogador="{{ $players_dados->id }}" class="btn btn-success"><i class="fa fa-usd" aria-hidden="true"></i></button>
                                <button type="button" data-toggle="modal" data-target="#modal-update-senha" id="change-pwd-btn" data-id-jogador="{{ $players_dados->id }}" class="btn btn-success"><i class="fa fa-key" aria-hidden="true"></i></button>
                            </div>
                        </td>
                    </tr>
                    @endforeach 
                </tbody>
            </table>

Asyoucanseeinthephototheyellowarrowthatcontentshouldshowbelowtheusercarlosandshowedbelow.

JSON

$return['conteudo'].='<trdata-tr-pai="'.$resultado->parent.'">
                <td>
                    '.$botao_mais.'
                    <table width="100" style="margin-left:20px;">
                        <tr>
                            <td align="left">
                                <div style="width: 37px; height: 25px; line-height: 23px; font-size: 12px; text-align: center;  border-radius: 12.5px; box-sizing: border-box; text-transform: uppercase; border: 1px solid #26a677; color: #26a677; float:left;">'.$resultado->sign.'</div> 
                            </td>
                        </tr>
                    </table>
                </td>
                <td class="table-check">
                    '.$resultado->username_agente.'  
                </td>
                <td class="table-check">
                    '.$resultado->code.'  
                </td>
                <td class="table-check" align="center">
                    '.$resultado->count_players.'
                </td>
                <td class="table-check" align="right">
                    '.number_format($resultado->credit_line,2,",","").' €
                </td>
                <td class="table-date">
                    '.number_format($resultado->balance_agentes,2,",","").' €
                </td>
                <td class="table-check" align="right">
                    '.$balance.'
                </td>
                <td class="table-check" align="right">
                    '.number_format($resultado->balance_player,2,",","").' €    
                </td>
                <td class="table-check" align="right">
                   '.$credito_disponivel.' 
                </td>
                <td class="table-check">
                    <div id="show_jogadores" data-id-agente="'.$resultado->user_id.'" style="width: 100px; height: 30px; border: 1px solid #c2c5cd; text-align: center; line-height: 28px; float: left; border-right: none; cursor: pointer;">
                        <p>JOGADORES</p>
                    </div>
                    <div style="width: 30px; height: 30px; border: 1px solid #c2c5cd; text-align: center; line-height: 28px; float: left; cursor: pointer;">
                        <i id="botao_ver_opcoes" data-id-agente="'.$resultado->user_id.'" class="fa fa-angle-down" aria-hidden="true"></i>
                    </div>
                    <div id="opcoes-'.$resultado->user_id.'" style="width: 130px; margin-top: 30px; border: 1px solid #c2c5cd; background-color: white; position: absolute; z-index: 10; display: none; border-top: none;">
                        <div data-toggle="modal" data-target="#modal-add-credito" id="add-credito-btn" data-id-agente="'.$resultado->user_id.'" data-my-balance="'.Auth::user()->balance_real.'" data-my-available-credit="'.Auth::user()->credit_line.'" data-id-line="'.$resultado->balance_real.'" data-id-credit-line="'.$resultado->credit_line.'" style="text-align: center; line-height: 30px; cursor: pointer;">TRANSFERIR</div>
                        <div data-toggle="modal" data-target="#modal-info-agente" id="info-user-btn" data-id-agente="'.$resultado->user_id.'" style="text-align: center; line-height: 30px; cursor: pointer;">INFORMAÇÕES</div>
                        <div data-toggle="modal" data-target="#modal-update-senha" id="change-pwd-btn" data-id-agente="'.$resultado->user_id.'" style="text-align: center; line-height: 30px; cursor: pointer;">SENHA</div>
                        <div style="text-align: center; line-height: 30px; cursor: pointer;">MENSAGEM</div>
                    </div>
                </td>
            </tr>
            <tr id="content-'.$resultado->user_id.'" style=" display:none; bgcolor="#d6d6df">
                <td colspan="10" style="padding:0; margin:0; ">
                    <div class="table-responsive alt-table">
                        <table style=" margin: 10px auto; width: 50%;" class="table table-bordered">
                             <thead>
                                <tr bgcolor="#e0e0e2">
                                    <th class="table-check">
                                        ID do Jogador
                                    </th>
                                    <th>Username</th>
                                    <th>Primeiro Nome</th>
                                    <th>Sobrenome</th>
                                    <th>Balance</th>
                                    <th>Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                '.$conteudo_players.'
                            </tbody>
                        </table>
                    </div>    
                </td>    
            </tr>
        ';

    }
    return response()->json($return);
}
    
asked by anonymous 04.05.2017 / 15:25

1 answer

0

I'm not sure what preprocessor you're using to be able to use these elements @if / @foreach / etc, but it's clear that the problem is in the order you build these tables: 

<table class="table table-hover table-bordered">
    <!-- etc. -->
    <tbody id="resultado_agent_tree"> 
        @foreach($lista_tree as $agent_tree)
            <tr>
                <!-- Cria a linha de cada utilizador -->
                <div id="show_jogadores" data-id-agente="{{ $agent_tree->user_id }}"
                     style="/* estilos CSS */">
                <p>JOGADORES</p>
              </div>
            <tr>
        @endforeach
        <tr id="content-{{ $agent_tree->user_id }}" style="display: none;"
            bgcolor="#d6d6df">
            <td colspan="10" style="padding:0; margin:0; ">
                <div class="table-responsive alt-table">
                    <table style=" margin: 10px auto; width: 50%;"
                           class="table table-bordered">
                        <thead>
                            <!-- etc. -->
                        </thead>
                        <tbody>
                            @foreach($players as $players_dados)
                                <tr>
                                    <!-- somente aqui vão as informações dos jogadores -->
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

As you can see, you create a table, and then open the <tbody> iteras on users, creating a <tr> line for each one. After you iterate through all of them , you create a last line <tr> , hidden, and inside it you create another table whose body iterates over $players to list the players of a single user (probably the last one ).

What you really want is to end that @endforeach immediately before the closing tag </tbody> instead of doing so immediately after the tag % how are you doing? So it will generate a% s of% s, one for each user, alternately of the user and the respective players.

The corrected code looks like this: 

<table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th class="table-check">
                Função
            </th>
            <th>Username</th>
            <th>Moeda</th>
            <th>Jogadores</th>
            <th>Credit Line</th>
            <th>Total disponível</th>
            <th>Balance</th>
            <th>Total Players Balance</th>
            <th>Crédito disponível</th>
            <th>Ações</th>
        </tr>
    </thead>
    <tbody id="resultado_agent_tree"> 
        @foreach($lista_tree as $agent_tree)
            <tr>
                <td align="left">
                    <div id="show-list" data-tt-id="{{ $agent_tree->user_id }}" class="fa fa-plus" data-tt-parent="" style="float: left; font-size: 18px; margin: 3px 5px 0px 0px; cursor: pointer;">
                    </div>
                    <div id="show-list-content" data-tt-id="{{ $agent_tree->user_id }}" class="fa fa-plus" data-tt-parent="" style="float: left; font-size: 18px; display: none; margin: 3px 5px 0px 0px; cursor: pointer;">
                    </div>
                    <div id="hidden-list" data-tt-id="{{ $agent_tree->user_id }}" class="fa fa-minus" data-tt-parent="" style="float: left; font-size: 18px; display: none; margin: 3px 5px 0px 0px; cursor: pointer;">
                    </div>
                    <div style="width: 37px; height: 25px; line-height: 23px; font-size: 12px; text-align: center;  border-radius: 12.5px; box-sizing: border-box; text-transform: uppercase; border: 1px solid #26a677; color: #26a677; float: left;">{{ $agent_tree->sign }}
                    </div> 
                </td>
                <td class="table-check">
                    {{ $agent_tree->username_agente }}  
                </td>
                <td class="table-check">
                    {{ $agent_tree->code }}
                </td>
                <td class="table-check" align="center">
                    {{ $agent_tree->count_players }}
                </td>
                <td class="table-check" align="right">
                    {{ number_format($agent_tree->credit_line,2,",","") }} €
                </td>
                <td class="table-date">
                    {{ number_format($agent_tree->balance_agentes,2,",","") }} €
                </td>
                <td class="table-check" align="right">
                    @if($agent_tree->balance_real < 0)
                        <div style="color: #ff7b84"> {{ number_format($agent_tree->balance_real,2,",","") }} €</div>
                    @else   
                        <div> {{ number_format($agent_tree->balance_real,2,",","") }} €</div>
                    @endif  
                </td>
                <td class="table-check" align="right">
                    {{ number_format($agent_tree->balance_player,2,",","") }} €     
                </td>
                <td class="table-check" align="right">
                    @if($agent_tree->balance_real < 0)
                        {{ number_format($agent_tree->balance_agentes -+ $agent_tree->balance_real,2,",","") }} €
                    @else       
                        {{ number_format($agent_tree->balance_agentes - $agent_tree->balance_real,2,",","") }} €
                    @endif  
                </td>
                <td class="table-check">
                    <div id="show_jogadores" data-id-agente="{{ $agent_tree->user_id }}" style="width: 100px; height: 30px; border: 1px solid #c2c5cd; text-align: center; line-height: 28px; float: left; border-right: none; cursor: pointer;">
                        <p>JOGADORES</p>
                    </div>
                    <div style="width: 30px; height: 30px; border: 1px solid #c2c5cd; text-align: center; line-height: 28px; float: left; cursor: pointer;">
                        <i id="botao_ver_opcoes" data-id-agente="{{ $agent_tree->user_id }}" class="fa fa-angle-down" aria-hidden="true"></i>
                    </div>
                    <div id="opcoes-{{ $agent_tree->user_id }}" style="width: 130px; margin-top: 30px; background-color: white; border: 1px solid #c2c5cd; z-index: 10; position: absolute; display: none; border-top: none;">
                        <!--<div data-toggle="modal" data-target="#modal-add-credito" id="add-credito-btn" data-id-agente="{{ $agent_tree->user_id }}" data-id-line="{{ $agent_tree->credit_line }}" style="text-align: center; line-height: 30px; cursor: pointer;">TRANSFERIR</div>-->
                        <div data-toggle="modal" data-target="#modal-info-agente" id="info-user-btn" data-id-agente="{{ $agent_tree->user_id }}" style="text-align: center; line-height: 30px; cursor: pointer;">INFORMAÇÕES</div>
                        <!--<div data-toggle="modal" data-target="#modal-update-senha" id="change-pwd-btn" data-id-agente="{{ $agent_tree->user_id }}" style="text-align: center; line-height: 30px; cursor: pointer;">SENHA</div>
                        <div style="text-align: center; line-height: 30px; cursor: pointer;">MENSAGEM</div>-->
                    </div>
                </td>
            </tr>
        <!-- NOTA: O @endforeach que estava aqui não devia estar -->
            <tr id="content-{{ $agent_tree->user_id }}" style="display: none;" bgcolor="#d6d6df">
                <td colspan="10" style="padding:0; margin:0; ">
                    <div class="table-responsive alt-table">
                        <table style=" margin: 10px auto; width: 50%;" class="table table-bordered">
                             <thead>
                                <tr bgcolor="#e0e0e2">
                                    <th class="table-check">
                                        ID do Jogador
                                    </th>
                                    <th>Username</th>
                                    <th>Primeiro Nome</th>
                                    <th>Sobrenome</th>
                                    <th>Balance</th>
                                    <th>Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($players as $players_dados)
                                    <tr>
                                        <td class="table-check">
                                            {{ $players_dados->id }}
                                        </td>
                                        <td class="table-check">
                                            {{ $players_dados->username }}
                                        </td>
                                        <td class="table-check">
                                            {{ $players_dados->f_name }}
                                        </td>
                                        <td class="table-check">
                                            {{ $players_dados->l_name }}
                                        </td>
                                        <td class="table-check">
                                            {{ number_format($players_dados->balance,2,",","") }} €
                                        </td>
                                        <td class="table-check">
                                            <div class="btn-group">
                                                <button type="button" data-toggle="modal" data-target="#modal-add-credito-jogador" id="add-credito-btn-jogador" data-id-jogador="{{ $players_dados->id }}" class="btn btn-success"><i class="fa fa-usd" aria-hidden="true"></i></button>
                                                <button type="button" data-toggle="modal" data-target="#modal-update-senha" id="change-pwd-btn" data-id-jogador="{{ $players_dados->id }}" class="btn btn-success"><i class="fa fa-key" aria-hidden="true"></i></button>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach 
                            </tbody>
                        </table>
                        <!-- NOTA: Aqui termina a parte do código que
                             colaste na pergunta; continuo as tags de
                             fechamento assumindo que não há mais nada
                             de interessante além daqui -->
                    </div>
                </td>
            </tr>
        <!-- NOTA: É *AQUI* que devia estar o @endforeach -->
        @endforeach
    </tbody>
</table>

As for your "JSON" (actually PHP that returns a fragment of HTML within what I assume to be a JSON dictionary), it seems , assuming the </tr> you put on the penultimate line (before <tr> ) is the end of a loop that iterates over users and that } is correctly generated for each user in that putative loop . I just do not understand why there are two ways to generate the same table, but this code should be correct.

    
04.05.2017 / 19:20
Grant all script error OnListItemClick not working in ListFragment