Tabs inside modal returning data

Asked

Viewed 43 times

2

I am creating a page that displays the data that was registered and within this data I have the option to View, Edit, Terminate and Delete the record.

In this case, the option to View, Edit and Quit is triggered by the same button, where the user will change the option for a Tab inside the modal, but only the first Tab that is the information works, the others only work in the first record but do not work for the others, getting stuck.

I will post the code below the part I am doing and would like to know what could be done to fix this problem.

Follow the code below:

     <?PHP
        if(isset($_REQUEST["btnBuscar"])) { 
            $sql_dados = "SELECT  [id],[data],[data_abertura],[designacao],[abordagem],[ponta_a],[localidade_a]
                ,[ponta_b],[localidade_b],[operadora],[contrato],[velocidade],[degrau],[incidente_caixa],[wo_caixa]
                ,[fer_abert],[chamado_operadora],[ambiente],[solucao_problem],[req_sisgt],[data_norm],[status]
                ,[valor],[rota_dur_inc],[usuario_cad],[usuario_alt],[usuario_end],[descricao],[historico]
                 FROM [Ocorrencias].[dbo].[tb_pnl_ocorrencias] WHERE data BETWEEN '$data_ini_' AND '$data_fim_ 23:59:59' ORDER BY data DESC" ;
            } else { 

                $sql_dados = "SELECT  [id],[data],[data_abertura],[designacao],[abordagem],[ponta_a],[localidade_a]
                ,[ponta_b],[localidade_b],[operadora],[contrato],[velocidade],[degrau],[incidente_caixa],[wo_caixa]
                ,[fer_abert],[chamado_operadora],[ambiente],[solucao_problem],[req_sisgt],[data_norm],[status]
                ,[valor],[rota_dur_inc],[usuario_cad],[usuario_alt],[usuario_end],[descricao],[historico]
                 FROM [Ocorrencias].[dbo].[tb_pnl_ocorrencias] WHERE data BETWEEN '$dataAt' AND '$dataAt 23:59:59' ORDER BY data DESC" ;

            } //echo $sql_dados;
    ?>
    <!--Fim do segundo bloco PHP--> 

    <!--Bloco que irá gerar o Excel e irá filtrar o resultado-->
    <form accept-charset="windows-1252" method="POST" action="../UTILS/ocor_xls.php"><!--Aqui irá fazer a ação para gerar o XLS-->

        <input type='hidden' name='datai' value='<?=$data_ini?>'/> 
        <input type='hidden' name='dataf' value='<?=$data_fim?>'/> 

        <!--Campo para escolher a quantidade 
        de registros a exibir na página-->
        <?=$data_texto;?>
        <p style="font-size:15px; margin-left:15px;">   
        <button  type="submit" style="Border:none; background-image:url('../IMG/excel.jpg'); width: 22px; height: 22px;" title="Gerar Excel" value="Gerar Excel">
        </button>       
        <!--Exibir <select name="formExibir" class="bempequeno">
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
        </select> Registros-->

        <label style="margin-left: 500px;">Filtrar:</label>
        <input type="search" class="mediolargo"  name="caixaPesquisa" placeholder="Filtrar..." id="pesquisa_oco" 
        onkeyup="minhaPesquisa()"/> 
        </p>
        <p style="font-size:15px; margin-left:15px;"> 

        </p>

    </form>     

    <div class="exibirResultados">
        <table id="pnlOcorrencias"> 
            <tr> 

            <th style="width:210px; text-align:center;" onclick="sortTable(0)" class="clickOrder">Designação
                <span class="clickOrderText">Clique no titulo para ordenar em ordem alfabética</span>
            </th>

            <th style="min-width:110px; text-align:center;" onclick="sortTable(1)" class="clickOrder">Operadora
                <span class="clickOrderText">Clique no titulo para ordenar em ordem alfabética</span>
            </th>

            <th style="width:100px; text-align:center;" onclick="sortTable(2)" class="clickOrder">Velocidade
                <span class="clickOrderText">Clique no titulo para ordenar em ordem alfabética</span>
            </th>

            <th style="width:115px; text-align:center;" onclick="sortTable(3)" class="clickOrder">Ponta A
                <span class="clickOrderText">Clique no titulo para ordenar em ordem alfabética</span>
            </th>

            <th style="width:120px; text-align:center;" onclick="sortTable(4)" class="clickOrder">Ponta B
                <span class="clickOrderText">Clique no titulo para ordenar em ordem alfabética</span>
            </th>

            <th style="width:110px; text-align:center;" onclick="sortTable(5)" class="clickOrder">Incidente Caixa
                <span class="clickOrderText">Clique no titulo para ordenar em ordem alfabética</span>
            </th>

            <th style="width:140px; text-align:center;" onclick="sortTable(6)" class="clickOrder">Data Indisponibilidade
                <span class="clickOrderText">Clique no titulo para ordenar em ordem alfabética</span>
            </th>

            <th style="width:140px; text-align:center;" onclick="sortTable(7)" class="clickOrder">Data Normalização
                <span class="clickOrderText">Clique no titulo para ordenar em ordem alfabética</span>
            </th>

            <th style="width:20px; text-align:center;"  class="clickOrder">
                <span class="clickOrderText">Abrir Ocorrência</span>
            </th>

            <th style="width:20px; text-align:center;"  class="clickOrder">
                <span class="clickOrderText">Excluir</span>
            </th>
        </tr> 

        <!--Script para pesquisar na tabela -->
                <script> 
                    //Script usado para refinar a pesquisa da tabela 
                    function minhaPesquisa() { 
                        //declaração de variáveis 
                        var div, input, filter, table, tr,thead, td, i;
                        input = document.getElementById("pesquisa_oco");
                        filter = input.value.toUpperCase();
                        table = document.getElementById("pnlOcorrencias"); 
                        thead = table.getElementsByTagName("thead");
                        tr = table.getElementsByTagName("tr");
                        th = table.getElementsByTagName("th");

                        // Loop through all table rows, and hide those who don't match the search query
                        for (i = 1; i < tr.length; i++) {
                            tr[i].style.display = "none";
                                for(var j=0; j<th.length; j++){
                                    td = tr[i].getElementsByTagName("td")[j];      
                                    if (td) {
                                        if (td.innerHTML.toUpperCase().indexOf(filter.toUpperCase()) > -1) {
                                        tr[i].style.display = "";
                                        break;      
                                        }   
                                    }
                                }
                            } 
                        }       
                </script> 


                <!--Script para ordernar a tabela retirado do W3Schools-->
                <script>
                        function sortTable(n) {
                            var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
                            table = document.getElementById("pnlOcorrencias");
                            switching = true;

                            //Set the sorting direction to ascending:
                            dir = "asc"; 

                            /*Make a loop that will continue until
                            no switching has been done:*/

                            while (switching) {
                            //start by saying: no switching is done:
                            switching = false;
                            rows = table.getElementsByTagName("TR");
                            /*Loop through all table rows (except the
                            first, which contains table headers):*/
                            for (i = 1; i < (rows.length - 1); i++) {
                            //start by saying there should be no switching:
                            shouldSwitch = false;
                            /*Get the two elements you want to compare,
                            one from current row and one from the next:*/
                            x = rows[i].getElementsByTagName("TD")[n];
                            y = rows[i + 1].getElementsByTagName("TD")[n];
                            /*check if the two rows should switch place,
                            based on the direction, asc or desc:*/
                            if (dir == "asc") {
                                if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                                //if so, mark as a switch and break the loop:
                                shouldSwitch= true;
                                break;
                            }
                            } else if (dir == "desc") {
                                if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                                //if so, mark as a switch and break the loop:
                                shouldSwitch= true;
                                break;
                                }
                            }
                        }
                        if (shouldSwitch) {
                            /*If a switch has been marked, make the switch
                            and mark that a switch has been done:*/
                            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                            switching = true;
                            //Each time a switch is done, increase this count by 1:
                            switchcount ++;      
                        } else {
                            /*If no switching has been done AND the direction is "asc",
                        set the direction to "desc" and run the while loop again.*/
                        if (switchcount == 0 && dir == "asc") {
                            dir = "desc";
                            switching = true;
                            }
                        }
                    }
                }
                </script>

                <!--Terceiro bloco de PHP, executa a consulta-->
                <?

                    //echo $sql_dados;
                    $rsql_ver = $sql->execute($sql_dados); //Executa a Query

                        while (!$rsql_ver->EOF){ //Tratamento dos registros retornados na Query 

                                $id = $rsql_ver->Fields['id']->Value;
                                $data = $rsql_ver->Fields['data']->Value;
                                $data_abertura = $rsql_ver->Fields['data_abertura']->Value;
                                $designacao = $rsql_ver->Fields['designacao']->Value;
                                $abordagem = $rsql_ver->Fields['abordagem']->Value; 
                                $ponta_a = $rsql_ver->Fields['ponta_a']->Value; 
                                $localidade_a = $rsql_ver->Fields['localidade_a']->Value; 
                                $ponta_b = $rsql_ver->Fields['ponta_b']->Value; 
                                $localidade_b = $rsql_ver->Fields['localidade_b']->Value; 
                                $operadora = $rsql_ver->Fields['operadora']->Value;
                                $contrato = $rsql_ver->Fields['contrato']->Value; 
                                $velocidade = $rsql_ver->Fields['velocidade']->Value;
                                $degrau = $rsql_ver->Fields['degrau']->Value; 
                                $incidente_caixa = $rsql_ver->Fields['incidente_caixa']->Value; 
                                $wo_caixa = $rsql_ver->Fields['wo_caixa']->Value; 
                                $fer_abert = $rsql_ver->Fields['fer_abert']->Value; 
                                $chamado_operadora = $rsql_ver->Fields['chamado_operadora']->Value; 
                                $ambiente = $rsql_ver->Fields['ambiente']->Value; 
                                $solucao_problem = $rsql_ver->Fields['solucao_problem']->Value; 
                                $req_sisgt = $rsql_ver->Fields['req_sisgt']->Value; 
                                $data_norm = $rsql_ver->Fields['data_norm']->Value;
                                $status = $rsql_ver->Fields['status']->Value; 
                                $descricao = $rsql_ver->Fields['descricao']->Value;
                                $historico = $rsql_ver->Fields['historico']->Value;
                                $valor = $rsql_ver->Fields['valor']->Value; 
                                $rota_dur_inc = $rsql_ver->Fields['rota_dur_inc']->Value; 
                                $usuario_cad = $rsql_ver->Fields['usuario_cad']->value; 
                                $usuario_alt = $rsql_ver->Fields['usuario_alt']->Value; 
                                $usuario_end = $rsql_ver->Fields['usuario_end']->Value;     

                                echo "
                                    <tr>
                                        <td>$designacao</td>
                                        <td>$operadora</td>
                                        <td>$velocidade</td>
                                        <td>$ponta_a</td>
                                        <td>$ponta_b</td>
                                        <td>$incidente_caixa</td>
                                        <td>$data</td>
                                        <td>$data_norm</td>

                                        <!--Botões--> 
                                            <td style='white-space: nowrap; width:20px;' class='nosort'>
                                                <button type='button' title='Informação' class='' data-toggle='modal' data-target='#myModal$id' id='btninfo'><img src='../IMG/info.png' width='20px' height='20px'/></button>
                                            </td>

                                            <td style='white-space: nowrap; width:20px;' class='nosort'> 
                                                <button type='button' title='Excluir' class='' data-toggle='modal' data-target='#myModalExcluir$id'><img src='../IMG/erase.png' width='20px' height='20px'/></button>
                                            </td>
                                    </tr>
                                ";

                ?> 
                <!--Fim do Terceiro bloco de PHP--> 

                <!--Estilo que será usado no modal-->
                <style> 

                    /* Style the tab */
                    div.tab { 
                        overflow: hidden;
                        border: 1px solid #ccc;
                        background-color: #f1f1f1;      
                    }       

                    .tablinks { 
                        font-family: Tahoma, Verdana, Segoe, sans-serif;
                        font-size: 16px;
                        color: #2e6ebd; 
                        background-color: #eaf4fd;
                        width: 155px;
                        height: 40px;
                        border-radius: 10px 10px 0px 0px;
                    }

                    .tablinks:hover { 
                        color: #e1703a;
                    }



                    /* Style the tab content */
                    .tabcontent {
                        display: none;
                        padding: 6px 12px;
                        border: 1px solid #ccc;
                        border-top: none;
                        background-color: #FFFFFF;
                    }   

                    .lista-exibe { 
                        list-style: none; 
                        background-color: #FFFFFF;

                    } 

                    .lista-historico { 
                        list-style: none; 

                    } 

                    .lista-historico li:nth-child(odd) { 
                        background-color: #ccc;     
                    }

                    .lista-historico li:nth-child(even) { 
                        background-color: #fff;
                    }

                </style>


                <!--Início do Modal em TAB--> 

                <div id="myModal<?=$id;?>" class="modal fade" role="dialog"> 

                    <!--Conteúdo do modal--> 
                    <div class="modal-content" style="width:1000px; background-color: #d5e6f2;"> 

                        <!--Cabeçalho do modal--> 
                        <div class="modal-header" style="background-color: #d5e6f2; padding: 2px 16px; color: #FFFFFF; height: 50px;">
                            <p style="font-size: 20px; text-align:center; background-color: #b3cce5; color: #0028a5">Ocorrência de nº <b><?=$id;?></b></p>
                        </div> 
                        <!--Fim do Cabeçalho-->

                        <!--Corpo do modal--> 
                        <div class="modal-body" style="background-color: #d5e6f2;">

                            <ul class="nav nav-tabs" id="tabContent" >  
                                <li class="active" style="font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 16px; color: #2e6ebd; background-color: #eaf4fd;  ">
                                    <a href="#registro" data-toggle="tab">Registro de Usuarios</a>
                                </li>

                                <li style="font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 16px; color: #2e6ebd; background-color: #eaf4fd; ">
                                    <a href="#altOco" data-toggle="tab">Alterar Ocorrências</a>
                                </li>
                                <li style="font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 16px; color: #2e6ebd; background-color: #eaf4fd; ">
                                    <a href="#encOco" data-toggle="tab">Encerrar Ocorrências</a>
                                </li>
                            </ul>

                            <div class="tab-content">

                                <div class="tab-pane active" id="registro">
                                    <div id="iniciaisInfo">
                                        <p style="font-size: 20px; background-color: #e1edf6;"><b>Dados da Ocorrência:</b></p>
                                            <ul class="lista-exibe">
                                                <li><b>Designação:</b>&nbsp;<?=$designacao;?></li>
                                                <li><b>Ambiente:</b>&nbsp;<?=$ambiente;?></li>          
                                                <li><b>Operadora:</b>&nbsp;<?=$operadora;?></li>
                                                <li><b>Velocidade:</b>&nbsp;<?=$velocidade;?></li>
                                                <li><b>Degrau:</b>&nbsp;<?=$degrau;?></li>
                                                <li><b>Contrato:</b>&nbsp;<?=$contrato;?></li>
                                                <li><b>Abordagem:</b>&nbsp;<?=$abordagem;?></li>
                                                <li><b>Rota durante incidente:</b>&nbsp;<?=$rota_dur_inc;?></li>
                                                <li><b>Equipamento A:</b>&nbsp;<?=$ponta_a;?></li>
                                                <li><b>Localidade A:</b>&nbsp;<?=$localidade_a;?></li> 
                                                <li><b>Equipamento B:</b>&nbsp;<?=$ponta_b;?></li>
                                                <li><b>Localidade B:</b>&nbsp;<?=$localidade_b;?></li> 
                                                <li><b>Incidente Caixa:</b>&nbsp;<?=$incidente_caixa;?></li>
                                                <li><b>WO Caixa:</b>&nbsp;<?=$wo_caixa;?></li>
                                                <li><b>Ferramenta de abertura:</b>&nbsp;<?=$fer_abert;?></li>
                                                <li><b>Chamado operadora:</b>&nbsp;<?=$chamado_operadora;?></li>
                                                <li><b>Data/hora de indisponibilidade:</b>&nbsp;<?=$data;?></li>
                                                <li><b>Data/hora abertura:</b>&nbsp;<?=$data_abertura;?></li>   
                                                <li><b>Data/Hora normalização:</b>&nbsp;<?=$data_norm;?></li>
                                                <li><b>Requisição SISGT:</b>&nbsp;<?=$req_sisgt;?></li> 
                                                <li><b>Status:</b>&nbsp;<?=$status;?></li>
                                            </ul>

                                        <p style="font-size: 20px; background-color: #e1edf6;"><b>Registro de usuários:</b></p>         
                                            <ul class="lista-historico"> 
                                                <li><?=$historico;?></li>
                                            </ul>       


                                        <p style="font-size: 20px; background-color: #e1edf6;"><b>Solução do problema:</b></p> 
                                            <ul class="lista-exibe"> 
                                                <li><?=$solucao_problem;?></li>
                                            </ul>           
                                    </div>          

                                </div>      

                                <div class="tab-pane " id="altOco">
                                    <iframe src="AlterarOcorrencias.php?id=<?echo $id;?>" style="width: 950px; height: 600px;  "></iframe>
                                </div>

                                <div class="tab-pane " id="encOco">
                                    <iframe src="EncerraOcorrencia.php?id=<?echo $id;?>" style="width: 950px; height: 300px;  "></iframe>
                                </div>

                            </div>              

                        </div>
                        <!--Fim do Corpo do modal-->


                        <!--Rodapé do modal-->
                        <div class="modal-footer" style="background-color: #d5e6f2; padding: 2px 16px; color: #FFFFFF"> 
                            <h4 style="text-align: left">CGR-CETEC27</h4>
                            <button type="button" class="botaoG" data-dismiss="modal">Fechar Janela</button>
                        </div> 
                        <!--Fim do rodapé-->
                    </div> 
                </div>



                <!--Quanrto bloco em PHP --Final do tratamento de registros--> 
                <?              
                //$cont++;


                    $rsql_ver->MoveNext();          
                }   

                ?>  
No answers

Browser other questions tagged

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