1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Modal não fecha corretamente

Bom noite, estou tendo um problema com o modal que busca um determinado cliente para uma Ordem de Serviço.

Segue parte do codigo do modal, localizado na pagina de ordem de serviço:

 <!-- Modal de Clientes -->
            <div class="modal fade" id="openModalListCli" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="col-lg-12">
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <h3 class="panel-title"><i class="fa fa-list-alt"></i> Lista de Clientes </h3>
                                </div>
                                <div class="panel-body">
                                    <%@include file="selectCli.jsp" %>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Segue o aquivo "selectCli.jsp" que é incluso no modal:

<%-- 
    Document   : selectCli
    Created on : 02/10/2015, 16:32:29
    Author     : Ale
--%>

<%@page import="java.util.ArrayList"%>
<%@page import="dao.ClienteDAO"%>
<%@page import="brain.Cliente"%>
<%@page import="brain.Cliente"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Lista de Clientes</title>
        <!-- DataTables -->
        <link rel="stylesheet" href="assets/plugins/datatables/dataTables.bootstrap.css">
        <!-- Bootstrap 3.3.5 -->
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        <!-- Ionicons -->
        <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
        <!-- Theme style -->
        <link rel="stylesheet" href="assets/dist/css/AdminLTE.min.css">
        <!-- AdminLTE Skins. Choose a skin from the css/skins
             folder instead of downloading all of them to reduce the load. -->
        <link rel="stylesheet" href="assets/dist/css/skins/_all-skins.min.css">

    </head>
    <body>

        <%            ArrayList<Cliente> clientes = new ClienteDAO().listarClientes();
        %>
        <div class="box-body">
            <table id="tabelaCli" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Cód</th>
                        <th>Nome</th>
                        <th>Endereço</th>
                        <th>Telefone</th>
                    </tr>
                </thead>
                <tbody>
                    <%
                        for (int i = 0; i < clientes.size(); i++) {
                    %>
                    <tr>
                        <td><%= clientes.get(i).getCodcli()%></td>
                        <td><%= clientes.get(i).getNome()%></td>
                        <td><%= clientes.get(i).getLogradouro() + ", " + clientes.get(i).getNumero() + " (" + clientes.get(i).getComplemento() + ")" + " - " + clientes.get(i).getBairro() + " - " + clientes.get(i).getCidade()%></td>
                        <td><%= clientes.get(i).getTelefone() + " - " + clientes.get(i).getCelular()%></td>
                    </tr>
                    <%
                        }
                    %>   

                </tbody>
            </table>
        </div><!-- /.box-body -->
        <!-- jQuery 2.1.4 -->
        <script src="assets/plugins/jQuery/jQuery-2.1.4.min.js"></script>
        <!-- Bootstrap 3.3.5 -->
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>
        <!-- FastClick -->
        <script src="assets/plugins/fastclick/fastclick.min.js"></script>
        <!-- AdminLTE App -->
        <script src="assets/dist/js/app.min.js"></script>
        <!-- AdminLTE for demo purposes -->
        <script src="assets/dist/js/demo.js"></script>
        <!-- SlimScroll -->
        <script src="assets/plugins/slimScroll/jquery.slimscroll.min.js"></script>
        <!-- DataTables -->
        <script src="assets/plugins/datatables/jquery.dataTables.min.js"></script>
        <script src="assets/plugins/datatables/dataTables.bootstrap.min.js"></script>
        <!-- page script -->
        <script>
            $(function () {
                $('#tabelaCli').DataTable({
                    "paging": true,
                    "lengthChange": true,
                    "searching": true,
                    "ordering": true,
                    "info": true,
                    "autoWidth": true
                });
            });
        </script>
        <!--script que pega valor da tabela clientes e preenche os campos do cadastro-->
        <script language="javascript">
            $(document).ready(function () {
                $('#tabelaCli tr').click(function () {
                    // escreve no console
                    console.log($(this).find('td').eq(0).html());
                    console.log($(this).find('td').eq(1).html());

                    // atribui valor ao campo de dados
                    $('#codCli').val($(this).find('td').eq(0).html());
                    $('#nomeCli').val($(this).find('td').eq(1).html());

                    // fecha janela após clique
                    $('#openModalListCli').modal('hide');
                });
            });
        </script>
    </body>
</html>

Meu problema é o seguinte, ao clicar em uma linha da tabela o modal deveria se fechar e colocar os parâmetros nos seus devidos campos, o que acontece corretamente. Porém a janela modal não fecha totalmente, ela até some, porém a pagina "pai" fica "opaca" e não consigo mais navegar nela.

Alguém sabe oque pode estar acontecendo?

Abraço

  • Já utilizou depurou pelo navegador F12, talvez você encontre alguma alerta sobre algum conflito, Não se esqueça que se você estiver usando alguma funcionalidade do JQUERY ele sempre precisa vir antes de tudo! Já pensou na possibilidade de importar esses scripts fora do modal?

    Joel Ramos   03 de nov de 2015
  • Joel, resolvido o problema! Na verdade fiz o que você disse, importei os scripts fora do modal, porém o problema persistiu. Então notei que tinha uns scripts "desnecessários", removi eles e resolveu. Acho que tava dando conflito com os scripts. Obrigado pela atenção!

    Alessandro Antoniolli   04 de nov de 2015
  • Que bom, ainda tinha pensado em falar sobre a quantidade de scripts importados, se tudo isso era necessário.

    Joel Ramos   04 de nov de 2015
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

1 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags java javascript jquery ou faça a sua própria pergunta.