Trouble with ajaxForm

Question

So, here is the problem I have: I am trying to submit a form using jQuery and ajaxForm (the Form plugin). However, when I click the submit button, I get no response (and no errors). There are required fields on the form and the response I am currently expecting is an alert informing me that one (or more) required fields are missing and detailing which fields need data to successfully complete the form.

The application is built in CodeIgniter, which is why the form action looks the way it does.

Here is my jQuery code:

$(function () {

  $("#div_id").dialog({

    autoOpen: false,
    closeOnEscape: true,
    modal: true,
    width: 600,
    title: "A Title",
    buttons: {

      "SUBMIT": function() {

        $("#form_id").ajaxForm({

          dataType: "json",
          success: function(response) {

            response = $.parseJSON(response);
            alert(response['message']);
          }
        });
      },
      "CANCEL": function() {

        // Some clean up here
        $("#div_id").dialog("close");
      }
    },
    close: function() {

      // Some clean up here
      $("#div_id").dialog("close");
    }
  });
});

Here is the form tag:

<form method="post" id="form_id" action="/controller/function">

Also, I am correctly linking in the ajaxForm plug-in. So, the issue does not live there. I am still learning jQuery and any help is appreciated. I have been looking through http://www.malsup.com/jquery/form/ and the jQuery documentation, as well, but have not found an answer.

Thank you in advance!

Answer 1

I have solved the problem. For anyone who finds this question and answer in the future, this is what I had to do:

First, this is a sample onload function (assuming you are using jQuery):

$(function () {
  $("#div_id").dialog({

  autoOpen: false,
  closeOnEscape: true,
  modal: true,
  width: 600,
  title: "Your Title",
  buttons: {

    "SUBMIT": function() { $("#form_id").submit() },
    "CANCEL": function() {

      // Other clean-up functions here
      $("#div_id").dialog("close");
    }
  },
  close: function() {

    // Other clean-up functions here
    $("#div_id").dialog("close");
  }
  });
});

Be sure that your submit() call is placed inside

function(){ }

When I was not doing this, my forms kept trying to submit themselves as soon as the page loaded. When I placed them in the line of code above, this stopped.

---

Everything that follows comes after the onload function above.

Second, set your ajaxForm options variable:

var ajaxFormOptionsVariable = {

  beforeSubmit:  ajaxFormPreSubmitFunction,
  success:       ajaxFormPostSubmitFunction,
  type:          "post",
  dataType:      "json"
};

Now, a few quick word about your ajaxForm options. What should be obvious (but may not be - and that is OK) is that you may name your variable anything you want. What may be less obvious is that you will need a separate variable for every form dialog you will have on a page. Be careful with your naming!

The functions named as your "beforeSubmit" function and "success" functions may also be named anything you want. If you have different forms that require different treatment, then you need to have different functions defined for each form. Again, be careful with your naming!

Your "beforeSubmit" function is optional. You can also use "get" for "type" and I know there are other options for "dataType", but I do not know them (and currently do not need them). However, if you do not want your data submitted as a json object, then please do some research on the plug-in to find your options.

Third, instantiate your ajaxForm object:

$('#form_id').ajaxForm(ajaxFormOptionsVariable);

Fourth, define your "beforeSubmit" and "success" functions:

function ajaxFormPreSubmitFunction(response, statusText, xhr, $form) {

  // Whatever processing you want to do before the form is submitted - 
  // probably validation
}

function ajaxFormPostSubmitFunction(response, statusText, xhr, $form) {

  // Whatever processing you want to do after the form is submitted
  // This is where displaying a message to the user happens
}

A few quick words about the arguments provided to your callback functions. First, response is where whatever you get back from the server is going to be. Second, you do not need to

response = $.parseJSON(response);

The response gets parsed automagically. In my script's post submit callback, I actually return an array where one element is a true/false value and the other is whatever message I want to display to the user, like this:

if (response['result'] == true) {

  $("#success_dialog").html(response['message']);
  $("#success_dialog").dialog("open");
}
else {

  $("#error_dialog").html(response['message']);
  $("#error_dialog").dialog("open");
}

So, that is it. I had my code all wrong in order to get this done. After some frustration, I have it working. I wanted to come back and share it so the question could be marked answered (to prevent anyone wasting their time on this since I have solved it) and also to help anyone who might stumble across this message in the future.