Hidden tr problem does not show in right place after returned json

Asked

Viewed 55 times

0

I have a table that lists all users, a tr hidden where when I click on the Show Players button opens shows this tr with a table inside list below the user that I am wanting to show his players. What is happening to me and that for example I list 6 users I click on the button to show players of the first user, shows the tr hidden last from 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>

inserir a descrição da imagem aqui As you can see in the photo the yellow arrow that content should show below the user carlos and showed below.

JSON

  $return['conteudo'] .= '
            <tr data-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);
}
jquery

  • I can’t see the image, so tell me: does it show the right <tr> only last in the table? Or does it show the last <tr> of the table?

  • it shows the right tr just never in the right place has to always appear below the user

  • If you take the None display from the <tr> it is pressing in the right place?

  • also not the users will listing when I click a button but returns a json that brings the users children and this tr hidden but I took the display:None and it is not showing in the right place

  • So the problem is not in this js code or in the show/Hide of the element. Maybe you should change the question or go running tests alone to find out the problem. = T

  • I put php that and returned has the such tr below the problem should be there see now if you can help me

Show 1 more comment

1 answer

0

I’m not sure which preprocessor you’re using to use those elements @if/@foreach/etc, but it is clear that the problem lies in the order you construct 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 see, you create a table, and after you open the <tbody> iterates on users, creating a line <tr> for each one. After you iterate through them all, you create one last line <tr>, hidden, and within it you create another table in whose body iterates on $players to list players from a single user (probably the last one).

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

The corrected code would look 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 suppose is a JSON dictionary), it looks like correct, assuming that the } which you placed on the antepenultimate line (before the return response()->json($return);) is the end of a loop which iterates on users and which $conteudo_players is correctly generated for each user in that loop putative. I just don’t understand why there are two ways to generate the same table, but this code should be correct.

  • I don’t understand how the code as you put it in the answer is the same as mine at least as far as I can tell if I’m wrong

  • You’re wrong: Note how, in your code, the first @endforeach is just before of the line <tr id="content-{{ $agent_tree->user_id }}"... The same way I put it in the code I put in the reply. This is the error: @endforeach has to be just before the </tbody> beyond the end of the code you put in the question (your html only goes to the end of the <table> internal containing player information).

  • I don’t understand sorry you can edit the answer and how it should look exactly my html I put in the question in the right way

  • And also how JSON should look please I return json by jquery through the after function()

  • I put the HTML fixed, just with a few comments saying <!-- NOTA: etc. --> to draw attention to the differences with the code you posted. See if there is any doubt left, and if you can, explain why and how this Markup AJAX generators replace what you generate using this HTML + Preprocessor code.

  • I corrected it the way you put itbut not solved after listing all I open each player Primiero for example opens below all of the table users that has the icon + load list users below associated with it open in those users the list of players appears in the right place but The parent user if going to see his players shows at the end of the table too

  • It won’t be because I’m using this var dad = $(this). Parent(). Parent(); and then to list the users By pressing on the + use its parent.after(date.content); it will not be therefore

  • If this refers to the <div id="show-list"> with the icon + that you carry, yes, but it may be that the event is hanging on the <td> which is his father. Maybe it’s safer that you use $(this).parent('tr'), that will seek among the ancestors of this the most recent that matches the selector you pass by parameter - in this particular case, the first tag <tr> that he finds. Anyway, check for me who is the this when that variable pai is defined.

  • yes this refers <div id="show-list"> I normally think this and so I entered Parent('tr') and when clicking on the more or list anything

  • this var pai = $(this). Parent(). Parent(); it was made by a friend of mine and it works but I think it is not the most correct it was done so that when you click on the most always list the users associated to it below it can be what is giving problems because not that the correct way

Show 5 more comments

Browser other questions tagged jquery

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