Question

I am creating a dynamic todo-list on a webpage. On the page you have a form for registering todo’s and a table showing all the registrated todo’s. The idea is that you register something you want done in a form, hit the submit button, and then the todo-list-table is automatically updated with the latest registered todo. My script manages all of this except for automatically updating the latest registered todo.
Here’s my code:

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

                var todo = $('#todo_registration input[name="daily_todo"]').val();
                $('#todo_registration input[name="daily_todo"]').val(null);

                $.when( registerTodo(todo) )
                    .then (
                        updateTodoDisplay()
                    );
            });
        });

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

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

        function registerTodo(todo) {
            var parameters = {
                daily_todo: todo,
                registration_button: 'clicked'
            };

            $.post("./daily_todo_registration.php", parameters); //, printRegistrationStatus);
        }

I have checked that the script successfully registrates the todo in the database. The php-script that gets the updated todo-list also works. My problem, I think, is that the function updateTodoDisplay() doesn’t wait for the AJAX call in registerTodo() to successfully complete before it runs. But I thought my use of #.when() was supposed to make updateTodoDisplay() wait.

I know making the AJAX call synchronous would probably fix my problem, but in my opinion that is a bad solution. I only want this one and only function to wait for the AJAX call to complete. Thus I want the rest of the webpage to function while these calls are made.

Any one know a fix for my problem? Thnx.

Answer 1

What you need is possible, but it looks like you have an error in your code.

Change the

.then (
     updateTodoDisplay()
);

to

.then (function(){ updateTodoDisplay(); } );

or even

.then (updateTodoDisplay);

The problem is that when you are registering the callback, in your current code you are passing the result of executing updateTodoDisplay() instead of passing it as a function. That is why you get it executed right away.