Problem with AJAX JQuery

Question

Problem with AJAX JQuery

Navigation

#1 by (0 votes)
#2 by (0 votes)

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 1st Edit.

In the edit screen it shows Id 25, I inserted a debugger in the Item button of the edit.php file. Note that when you click the button it opens the VM108.

Iinsertedadebuggerintothefileitem.phpnotethatitopenstheVM119andreturnsId25.

Thenclickthebackbuttonoftheitem.phpfileandthenclickthebackbuttonofedit.php.Intheindex.phpfileclickonthe2ndEdit,whendisplayingthefileedit.phpitreturnsId35.

WhenyouclicktheItembuttonintheedit.phpfilenotethatitreopenstheVM108.

Whenitdisplaysthecontentsoftheitem.phpnoteitopenstheVM141andreturnsId25.

Thisismyquestion,onlyinthefirsttimeitreturnsthecorrectId,inallotherattemptsitreturnsthe1stAccessId.

Linksimulation: link

jquery ajax

asked by anonymous 13.04.2016 / 19:17

2 answers

0

Friend, in the onclick () event that you are in the <a> tag, 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 a $( selector ).click() event, instead of using an onclick () inline in the tag.

13.04.2016 / 22:11

Datatables delete the ordering in a column Copy of Vectors

score 0 · Accepted Answer

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

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

My edit.php 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'm passing the Id directly in JS, if I happen to search the value in a form field for example, there would be no need to clear the event.