javascript recursive function

Question

I want to refresh a table when $(.excluir) is clicked. The table is load from php data. When I click the button, the php code executes, and I delete the data from the database. But I want to refresh the content of the table. So, I tried to call the function again completeTable();, but it didn't work.. The alert appears, but the table doesn't refresh.

function completeTable(){
    $.post("completa_tabela.php", {cd_turma: $('#turma').val()}, function(data){

        data = jQuery.parseJSON(data);

        $.each(data.json, function(){
            var button = "<button type='button' class='excluir' value='" + this['codigo'] + "'>X</button>";
            $('#' + this['dia_hora']).html(this['nome'] + button);
        });

        $('.excluir').click(function(){
            $.post("altera_horario.php", {excluir: true, cd_horario: $(this).val()}, function(){
                alert("$('excluir').click");
                    completeTable();
            });

        });

    });
}

How can I do that?

Satpal · Accepted Answer · 2014-02-06 20:56:31Z

2

Yours is not a recursive function. In your code you are creating elements dynamically and binding events.

You can use Event Delegation. You should use .on() using delegated-events approach.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

Change your code as

function completeTable(){
    $.post("completa_tabela.php", {cd_turma: $('#turma').val()}, function(data){
        data = jQuery.parseJSON(data);
        $.each(data.json, function(){
            var button = "<button type='button' class='excluir' value='" + this['codigo'] + "'>X</button>";
            $('#' + this['dia_hora']).html(this['nome'] + button);
        });         
    });
}

$(document).on('click','.excluir', function(){
    $.post("altera_horario.php", {excluir: true, cd_horario: $(this).val()}, function(){
        alert("$('excluir').click");
            completeTable();
    });     
});

answered Feb 6, 2014 at 20:56

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ahmm95 Over a year ago

Thanks for answering. I think that if I do like that, the event won't be recognized, because '.excluir' class hasn't been created yet... will it?

Satpal Over a year ago

@user3260711, I have used Event Delegation. So it will work for current as well as elements added in future

ahmm95 Over a year ago

You were right, I didn't know it. But I'm still with the same problem.. The php code executes, the data is deleted, I call completeTable() and the content isn't reloaded.

Satpal Over a year ago

@user3260711, What do you get when do an alert of $('#turma').val()

ahmm95 Over a year ago

Thanks man, I figured out what was going on. The function was executing normally. But it only changes the content of the <td>'s when the <td>'s id is returned from the php code. So, when I delete the data, the id of that specific data doesn't return anymore, so the table isn't modified, and the data is still in the table.

Omidam81 · Accepted Answer · 2014-02-06 20:53:43Z

-1

please use $('.excluir').bind('click', function(){}); instead of $('.excluir').click(function(){});

you can also use $('.excluir').live('click', function(){});

answered Feb 6, 2014 at 20:53

Omidam81

1,91712 silver badges21 bronze badges

1 Comment

Ethan Brown Over a year ago

-1: This does not address the OP's question, and .bind and .live have been deprecated since jQuery 1.7.

Collectives™ on Stack Overflow

javascript recursive function

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related