Question

I’m creating a dynamic todo list. The list is downloaded from a local database and displayed in a table. At each todo there’s a submit-button which you can press and the todo is supposed to register in the database as “done”. In my code this is done through a variable called status in which a value of 1 is done, and a value of 0 is undone.

My problem is that you can press any button and all works well; new status is sent to a PHP script, which in turn modifies the status value in the database. Then the webpage automatically updates the display table. But if you try once more, on any of the other buttons, it doesn’t work. You’ll have to reload the webpage for any of the other buttons to work.

Here’s my Jquery/AJAX code:

        $(document).ready( function() {
            $('#todo_display_table input[type="submit"]').click(function(evt) {
               evt.preventDefault();

               var todo_id = $(this).val();
               //document.write(todo_id);//debug
               $.when(changeTodoStatusTo(1, todo_id)).then(updateTodoDisplay);
            });
        });

        function updateTodoDisplay() {
            $.post("./daily_todo_display.php", null, replaceTbodyHTML);
        }

        function replaceTbodyHTML(data) {
            $('#todo_display_table tbody').html(data);
        }

        function changeTodoStatusTo(newStatus, todo_id) {
            //Send til phpscript som lagrer ny status i databasen
            var parameters = {
                todo_id: todo_id,
                newStatus: newStatus
            };

            return $.post("./daily_todo_change_todo_status.php", parameters); //, printDebugInfo);
        }

I can post my PHP-scripts as well, but I have tested these separately and they seem to work. Again, all of the functionality on my page works fine, but they seem to stop working after you clicked one time.

I have checked the database and the status value only update itself the on first try(first click of any of the buttons), which would indicate that the problem lies in either the click() function or in the changeTodoStatusTo() function. Thnx for any help, and don’t hesitate to ask for more information =)

Answer 1

Are you recreating the submit buttons when you update??? It is hard to tell without seeing all of your code. Have you tried changing this:

$('#todo_display_table input[type="submit"]').click(function(evt) {

to this:

$('#todo_display_table input[type="submit"]').live('click', function(evt) {

see this if applicable: http://api.jquery.com/live/