0

Código no index.php

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title></title>
        <script type="text/javascript" src="jquery-2.2.3.min.js"></script>
        <script>
            function carregaPagina(item, pai, filho, url) {
                var caminho = item != null ? $(item).attr('data-click') : url;
                if (item != null) {
                    if ($(item).attr('data-json') != null) {
                        $('#' + $(item).attr('local-json')).html($(item).attr('data-json'));
                    }
                }
                if (pai != "" && pai != null) {
                    $('#' + pai).slideToggle(1000);
                }
                $.ajax({
                    url: caminho,
                    cache: false,
                    dataType: "html",
                    success: function (data) {
                        $('#' + filho).slideToggle(0);
                        $('#' + filho).html(data);
                        $('#' + filho).slideToggle(1000, function () {
                            if (typeof completaLoad !== 'undefined' && $.isFunction(completaLoad)) {
                                completaLoad();
                            }

                            if ($('#' + pai).css('display') !== 'none') {
                                $('#' + pai).slideToggle(0);
                            }
                        });
                    }
                });
                return false;
            }

            $(document).ready(function () {
                $(document).on('click', '.grid', function (e) {
                    if (e.handled !== true) {
                        carregaPagina(this, 'TelaConsulta', 'TelaEditar', null);
                        e.handled = true;
                    }
                    return false;
                });
            });
        </script>
        <style>
            .grid, .item, .btnVoltar {
                cursor: pointer;
            }
            #TelaConsulta {
                background-color: #81BEF7;
            }
            #TelaEditar {
                background-color: #58FAAC;
            }
            #TelaItem {
                background-color: #F6D8CE;
            }
        </style>
    </head>
    <body>
        <div id="TelaConsulta">
            <ul>
                <li><span class="grid" data-click="editar.php?id=25">Editar</span></li>
                <li><span class="grid" data-click="editar.php?id=35">Editar</span></li>
            </ul>
        </div>
        <div id="TelaEditar">
        </div>
        <div id="TelaItem">
        </div>
    </body>
</html>

Código no editar.php

<script>
    $(document).ready(function () {
        $(document).on('click', '.item', function (e) {
            if (e.handled !== true) {
                debugger;
                var url = 'item.php?id=<?php echo $_GET['id']; ?>';
                carregaPagina(null, 'TelaEditar', 'TelaItem', url);
                e.handled = true;
            }
            return false;
        });
        $('#TelaEditar .btnVoltar').click(function () {
            $('#TelaEditar').slideToggle(1000, function () {
                $('#TelaConsulta').slideToggle(1000);
                $('#TelaEditar').empty();
                $('#TelaEditar').removeAttr('style');
            });
            return false;
        });
    });
</script>
Código: <?php
    echo $_GET['id'];
?><br><br>
<span class="item">Item</span><br><br>
<span class="btnVoltar">Voltar</span>

Código no item.php

<script>
    $(document).ready(function () {
        $('#TelaItem .btnVoltar').click(function () {
            $('#TelaItem').slideToggle(1000, function () {
                $('#TelaEditar').slideToggle(1000);
                $('#TelaItem').empty();
                $('#TelaItem').removeAttr('style');
            });
            return false;
        });
        debugger;
    });
</script>
Código: <?php echo $_GET['id']; ?><br><br>
<span class="btnVoltar">Voltar</span>

No arquivo index.php clique no 1º Editar.

Na tela de editar ele mostra o Id 25, inseri um debugger no botão Item do arquivo editar.php note que quando você clica no botão ele abre a VM108.

inserir a descrição da imagem aqui

Inseri um debugger no arquivo item.php note que ele abre o VM119 e retornar Id 25.

inserir a descrição da imagem aqui

Em seguida clique no botão voltar do arquivo item.php e em seguida clique no botão de voltar do editar.php. No arquivo index.php clique no 2º Editar, ao exibir o arquivo editar.php ele retorna Id 35.

Quando você clica no botão Item no arquivo editar.php note que ele reabre o VM108.

inserir a descrição da imagem aqui

Quando é exibido o conteúdo do item.php note ele que abre o VM141 e retornar Id 25.

inserir a descrição da imagem aqui

Esta é a minha dúvida, somente na 1ª vez ele retorna o Id correto, em todas as outras tentativas ele retorna o Id do 1º acesso.

Link simulação: link

8
  • Publique a instrução do evento clique que você faz para chamar essa função.
    – Duque
    Commented 13/04/2016 às 17:24
  • Faz um JsFiddle e simule a dificuldade, pois ainda está confuso de entender.
    – Duque
    Commented 13/04/2016 às 17:32
  • Melhorei o texto para explicar a situação Commented 13/04/2016 às 18:52
  • Eu não consegui encontrar onde você chama esse método carregaPagina() passando os parametros a ele.
    – Duque
    Commented 13/04/2016 às 19:29
  • Adicionei um exemplo e a função que chama o carregaPagina() Commented 13/04/2016 às 20:00

2 Respostas 2

0

Amigo, no evento onclick() que você sua na tag <a>, você passa 4 parametros, mas no método checkData(), você não passa nenhum.

Tente isto:

function checkData(arg1, arg2, arg3, arg4, arg5 ) {

    var link = "/Login/Validar";

    $.ajax({
        url: link,
        type: "GET",
        cache: false
    })
    .done(function (data) {
        if (data == null || data.Sucesso == false) {
            mostraModalLogin();
        } else {
            switch ( arg1 ) {
                case "carregaPagina":
                    carregaPagina(arg1, arg2, arg3, arg4);
                    break;
            }
        }
    })
    .fail(function () {
        mostraModalEvento('LoginFalhaLogin', '0', null, false);
    });

    return false;
}

Para melhorar seu código, eu usaria um evento $( selector ).click(), ao invés de usar um onclick() inline na tag.

11
  • E aquela variável arg, tá ali só de enfeite? Commented 13/04/2016 às 20:19
  • @GabrielKatakura, poderia me dizer qual o escopo da variavel arguments ? -Não vi sua declaração no código dele, e onde é especificado que ela recebe os parametros na chamada ao onclick() ?
    – Duque
    Commented 13/04/2016 às 20:26
  • Pessoal a minha função checkData está ok, meu problema está no fato que depois que carrego a tela de edição e retorno para tela de consulta, eu seleciono outro item e quando clico no botão da cadastrar ele chama a mesma VM, ou seja, ele está passando o mesmo Id da primeira vez que acessei. Se eu clicar em inspecionar no meu fonte está tudo ok, só que por algum motivo o navegador se perde e cai sempre no debugger daquela VM do print. Commented 13/04/2016 às 20:45
  • Você testou o que publiquei ou nem se deu ao trabalho ?
    – Duque
    Commented 13/04/2016 às 20:48
  • @Duque Sim testei a sua recomendação, mas o problema persiste, parece que ele fica em cache e só tem acesso a esta VM. Commented 13/04/2016 às 20:56
0

Queria primeiramente agradecer ao colega @GabrielKatakura que me deu a ideia do que poderia ser, o problema está ocorrendo pois o evento de click continuava ativo.

Como estou carregando através de Ajax código HTML e JS não sabia que ao criar um evento de click o mesmo ficaria ativo, na tela que estou carregando estou usando a chamada $(document).on(), ao retornar para tela inicial não estou removendo o evento ao qual deveria usar a chama $(document).off().

Meu arquivo editar.php ficou assim:

<script>
    $(document).ready(function () {
        $(document).on('click', '.item', function (e) {
            if (e.handled !== true) {
                debugger;
                var url = 'item.php?id=<?php echo $_GET['id']; ?>';
                carregaPagina(null, 'TelaEditar', 'TelaItem', url);
                e.handled = true;
            }
            return false;
        });
        $('#TelaEditar .btnVoltar').click(function () {
            $('#TelaEditar').slideToggle(1000, function () {
                //Removendo evento de click
                $(document).off('click', '.item');
                $('#TelaConsulta').slideToggle(1000);
                $('#TelaEditar').empty();
                $('#TelaEditar').removeAttr('style');
            });
            return false;
        });
    });
</script>
Código: <?php
    echo $_GET['id'];
?><br><br>
<span class="item">Item</span><br><br>
<span class="btnVoltar">Voltar</span>

Esta situação ocorre pois estou passando o Id diretamente no JS, se por ventura eu buscasse o valor em um campo de formulário por exemplo, não haveria a necessidade de limpar o evento.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .