jQuery Ajax submission problems

Question

Hi, there is a strong possibility that I'm just being stupid here as this is my first attempt at using jQuery's ajax functionality so please bear with me.

$(document).ready(function(){
  $("input.update").click(function(){
    var str = $(this).parent().serialize();
    $(this).parent().parent().block({ message: "<span class=\"loading\"><img src=\"<?php echo $siteUrl ?>/admin/template/images/loading.gif\" alt=\"loading...\" /><p>Updating...</p></span>" });
    $.ajax({
      type: "POST",
      url: "forms/update.php",
      data: str,
      success: function(){
        $("div.edit_box").unblock();
        $("div.edit_box").append("<span class=\"success\">This has been updated!</span>");
      }
    });
   return false;
   });
});

I have tried to get this working for a little while now and can't figure out why it doesn't pick up the form. All it does is just to do a normal php post without throwing any errors... Any help would be appreciated!

Forgot to add that I'm using blockUi on this as well, hence block/unblock.

Answer 1

("input.update").click(function(){

should be

$("input.update").click(function(){

Answer 2

Since it seems you're only using the 'success' callback of post you could use the .post method, which is a bit easier on the eyes. Also you can put those block calls inside ajaxStart and ajaxStop. To me it's neater. The $(this).parent().parent().block seemed wrong to me, I change it to reference the same element that is used for unblocking. I'd also be checking the output of the php script, to make sure that whatever you are 'updating' actually updated (just echo from php in xml and you'll see it on your console log)

$(function() {
    // apply click handlers to anchors
    $("input.update").click(function(e){
     // stop normal link click
     e.preventDefault();

     var str = $(this).parent().serialize();

     // send request
     var action = "forms/update.php";
     $.post(action, {data:str}, function(xml) {
      console.log(xml);
      $("div.edit_box").append("<span class=\"success\">This has been updated!</span>");

     })
    });

    // Adds a wait indicator to any ajax requests
    $(document.body).ajaxStart(function() {
       $("div.edit_box").block({ message: "<span class=\"loading\"><img src=\"<?php echo $siteUrl ?>/admin/template/images/loading.gif\" alt=\"loading...\" /><p>Updating...</p></span>" });

    }).ajaxStop(function() {
       $("div.edit_box").unblock();
       $("div.edit_box").append("<span class=\"success\">This has been updated!</span>");

    });
   });