使用Ajax发布到PHP脚本（Jquery）

Question

I have an application that I'm writing that, in one aspect of it, you click on a checkmark to complete a task, a popup window is displayed (using bootstrap), you enter your hours, and then that is sent to a PHP page to update the database. I'm using FF (firebug) to view the post. It's coming up red but not giving me an error. The only thing I'm doing is echoing out "sup" on the PHP page, and it's still showing errors, and I can't figure out why.

This is my initial click function:

$('.complete').on('click', function(event) {
    var id = $(this).attr('data-id');
    var tr = $(this).parent().parent();
    var span = $(tr).children('td.task-name');

    var r = (confirm('Are you sure you want to complete this task?'));

    if (r){
        addHours(id);
    } else {
        return false;
    } // end else
});

That works fine, and it fires my next function which actually fires the bootstrap modal:

function addHours(id) {

    var url = 'load/hours.php?id='+id;

    $.get(url, function(data) {

        $('<div class="modal hide fade in" id="completeTask">' + data + '</div>').modal()
        .on('shown', function() {

            pendingTask(id);

        }); // end callback 

        }).success(function() { 

        $('input:text:visible:first').focus(); 
    });

} // end function

This is also working, and the modal is displayed just fine. However, whenever I post the form to my logic page, it fails for no reason. This is the function to post the form to the logic page:

function pendingTask(id) {

$('.addHours').on('click', function(event) {

        var formData = $('form#CompleteTask').serializeObject();
            $.ajax({
                  url:'logic/complete-with-hours.php',
                  type: 'POST', 
                  dataType: 'json',
                  data: formData,
                  success: function(data) {
                      if (data.status == 'error') {     
                          $(this).attr('checked', false);
                          //location.reload();
                      } // end if       
                      else  { 
                          $(this).attr('checked', true);
                          //location.reload();
                      } // end else      
                  },
                dataType: 'json'
            });     

}); // end click

} // end function

When this is fired, I see this in my Firebug console:

I know this is a lot of information, but I wanted to provide as much information as I could. Every other post function in the application is working fine. It's just this one. Any help would be appreciated.

Thanks in advance.

Answer 1

I figured it out. I changed the post type from the structure I entered above to a standard post:

$("#CompleteTask").validate({

                submitHandler: function(form) {

                    var hours = $('#hours').val();

                        $.post('logic/complete-with-hours.php', {'hours': hours, 'id':id}, 

                            function(data){ 

                                if (data.status == 'success') { 
                                    $(checkmark).attr('checked', false);
                                    $('.message').html(data.message).addClass('success').show();                                        
                                } // end if 

                                if (data.status == 'error') { 
                                    $('.message').html(data.message).addClass('error').show();  
                                } // end else                                           
                            },
                        "json"
                        ); //end POST                                                   
                } // end submit handler 
            }); // end validate

That seemed to do the trick