Check ajax return, it works only the first time

Question

Check ajax return, it works only the first time

Navigation

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

1

Good morning friends, I have this code:

$(document).ready(function(){
    $('button').on('click',function(e){
        e.preventDefault();
        var codigo = $(this).attr('id');            
        $.ajax({
            type: 'post', 
            url: '<?= base_url('posts/apaga'); ?>',
            data: 'codigo='+codigo,                
            success: function(msg){
                if(msg.indexOf("Erro") > -1){
                    $('#ret_apaga_post').html(msg);                        
                }else{
                    $('#reload_post').html(msg);
                }

            }
        });
    });
});

The situation is that I have a list of data returned from the database, and I have a delete button for each record.

What happens, is that depending on the return PHP , I need to load on different divs. I found tips on msg.indexOf("Erro") , on jquery contains selector and also str.match(/Erro/) , but only work the first time.

I also tried to add ajax cache: false , also to no avail.

Thank you in advance.

javascript jquery ajax codeigniter

asked by anonymous 27.10.2017 / 13:49

2 answers

navbar-fixed-top bootstrap occupying entire browser Load page inside a div with Ajax

score 1 · Answer 1

Some good practices that I defined as my rules with AJAX:

Always send data through an object no matter what type of request (GET / POST / PUT ...)
Always work with data return in JSON

With just these two items, the url is treating the return of success, I do everything!

$(document).ready(function(){
    $('button').on('click',function(e){
        e.preventDefault();
        var codigo = $(this).attr('id');            
        $.ajax({
            type: 'post', 
            url: '<?php echo base_url('posts/apaga'); ?>',
            data: {'codigo': codigo},  
            dataType: 'json'              
            success: function(msg){
                if (msg.erro) {
                    $('#ret_apaga_post').html(msg);                        
                } else {
                    $('#reload_post').html(msg);
                }
            }
        });
    });
});

And now your backend has to return a data type in JSON, try this:

public function apaga() {
    $dados = array(
        'erro' => true,
        'mensagem' => 'Houve um erro :/'
    );
    header('Content-Type: application/json');
    echo json_encode($dados);
}

score 0 · Answer 2

More detailed example of the problem, in fact the code in the question is correct, the problem is that by reloading via ajax part of DOM , this new piece of code remains invisible to the jquery that has just been used.

To not use blessed mutation observer , I'd rather give reload to jquery, eg:

<div id='div_reload_sempre'> <input type='text' value='pode ser apagado 1'> <button id='id_input_1'>1</button> <br> <input type='text' value='pode ser apagado 2'> <button id='id_input_2'>2</button> </div>

//essa div acima, tem uma cópia exata apenas do conteudo dela em outro arquivo 'php' por exemplo com nome 'conteudo_div_reload'

<div id='recarrega_este_js'> <script> $('button').on('click',function()){ //aqui vão parametros ajax normal como na pergunta success: function(msg){ $('#div_reload_sempre').html('conteudo_div_reload'); //aqui acima, vai recarregar a div, com os dados que ficaram apos o delete, ou seja la o que fizerem $('#recarrega_este_js').html('conteudo_desse_script'); //aqui acima, esse jquery tem de ser recarregado após o delete feito, senao no proximo botão que for clicado, pro jquery, ele não existe mais } } </script> </div>

//mesma coisa para o script, tem de ter um outro arquivo com esse conteúdo nele
//nesse caso eu salvo esse conteudo dentro de um arquivo 'php' mesmo, achei mais prático que um 'js' por causa do framework que uso