Problem with AJAX Jquery

Asked

Viewed 198 times

0

Code in 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>

Code in edit.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>

Code in 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>

In the index.php file click on the first Edit.

On the edit screen it shows the Id 25, insert a Debugger on the Item button of the edit.php file note that when you click the button it opens the VM108.

inserir a descrição da imagem aqui

I inserted a Debugger in the item.php file note that it opens VM119 and returns Id 25.

inserir a descrição da imagem aqui

Then click the back button of the item.php file and then click the back button of the edit.php. In the index.php file click the 2nd Edit, when displaying the edit.php file it returns Id 35.

When you click the Item button in the edit.php file note that it reopens VM108.

inserir a descrição da imagem aqui

When displaying the contents of the.php item note that it opens VM141 and returns Id 25.

inserir a descrição da imagem aqui

This is my question, only the first time it returns the correct Id, in all other attempts it returns the Id of the 1st access.

Link simulation: link

jquery ajax

  • Post the event statement click that you do to call this function.

  • Do a Jsfiddle and simulate the difficulty as you are still confused to understand.

  • I improved the text to explain the situation

  • I couldn’t find where you call this method loadPagina() passing the parameters to him.

  • I added an example and the function that calls the chargePagina()

  • Friend, your code is a little problematic. You are using onclick() in the tag, but at the same time use Jquery(). I will post the possible solution.

  • What is the return of chargePagina? You are not clearing the click event by uploading a new page, the event will remain the same until you clear the event. From what I imagine this loadPagina is coming a JS together that you want to use in place of the old one, right?

  • carregaPagina is returning HTML and JS. Exactly, I even put nocache on the page, but I was not successful. How should I proceed to clear the event?

Show 3 more comments

2 answers

0

Buddy, in the onclick() event you sweat in the tag <a>, you pass 4 parameters, but in the checkData() method, you pass none.

Try this:

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;
}

To improve your code, I would use an event $( selector ).click(), instead of using an onclick() inline in the tag.

  • And that variable Arg, it’s just there for embellishment?

  • @Gabrielkatakura, could you tell me the scope of the variable Arguments ? -I didn’t see your statement in his code, and where it is specified that she receives the parameters in the call to onclick() ?

  • Personal my checkData function is ok, my problem is in the fact that after I load the edit screen and return to query screen, I select another item and when I click the sign up button it calls the same VM, I mean, he’s going through the same ID the first time I gave in. If I click to inspect in my source everything is ok, only for some reason the browser gets lost and always falls in the Debugger of that print VM.

  • You tested what I published or didn’t even bother ?

  • @Duque Sim tested your recommendation, but the problem persists, it seems that it is cached and only has access to this VM.

  • If you assemble a Fiddle with the example, I will analyze it better and for sure we will find the solution.

  • @Duque Arguments is a variable available for every function, her scope in that case is exactly the checkData function. And it doesn’t need to receive the checkData parameters, Arguments is just an object that represents the arguments of a function, and before you leave saying something like "Did you test what I published or didn’t even bother?" Be more sure of what you’re talking about, because your solution is absolutely useless. Link is made for educational purposes: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments

  • @Duke managed to separate from the project the part that is in trouble, updated in the body of the question. I added a link so you can see the source code.

  • @Gabrielkatakura the code posted by me is as I said "possible solution", I did not state in hypothese that would solve since the problem is difficult to understand.

  • @Cristianoávilasalomão would like something practical, for example a Fiddle of the project, because in this way, it is difficult to test. Believe this is not a Cache problem.

  • index.html https://jsbin.com/game/edit?html,console,output edit.html https://jsbin.com/xosava/edit?html,js,output item.html https://jsbin.com/xosava/1/edit?html,js,output

Show 6 more comments

0


I wanted to first thank my colleague @Gabrielkatakura who gave me the idea of what could be, the problem is occurring because the click event was still active.

As I am loading through Ajax HTML code and JS did not know that when creating a click event it would be active, on the screen I am loading I am using the call $(document).on(), when returning to home screen I am not removing the event to which I should use the flame $(document).off().

My.php edit file looks like this:

<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>

This situation occurs because I am passing the Id directly on JS, if by chance I looked for the value in a form field for example, there would be no need to clean the event.

Browser other questions tagged jquery ajax

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