how to use JSON for an error class

Question

Hey all. I was fortunate enough to have Paolo help me with a piece of jquery code that would show the end user an error message if data was saved or not saved to a database. I am looking at the code and my imagination is running wild because I am wondering if I could use just that one piece of code and import the selector type into it and then include that whole json script into my document. This would save me from having to include the json script into 10 different documents. Hope I'm making sense here.

$('#add_customer_form').submit(function() { // handle form submit

The "add_customer_form" id is what I would like to change on a per page basis. If I could successfully do this, then I could make a class of some sort that would just use the rest of this json script and include it where I needed it. I'm sure someone has already thought of this so I was wondering if someone could give me some pointers.

Thanks!

---

Well, I hit a wall so to speak. The code below is the code that is already in my form. It is using a datastring datatype but I need json. What should I do? I want to replace the stupid alert box with the nice 100% wide green div where my server says all is ok.

$.ajax({
  type: "POST",
  url: "body.php?action=admCustomer",
  data: dataString,
  success: function(){
    $('#contact input[type=text]').val('');
    alert( "Success! Data Saved");
  }
 });

Answer 1

Here is the code I used in the last question, minus the comments:

$(function() {
    $('#add_customer_form').submit(function() {
        var data = $(this).serialize();
        var url = $(this).attr('action');
        var method = $(this).attr('method');
        $.ajax({
            url: url,
            type: method,
            data: data,
            dataType: 'json',
            success: function(data) {
                var $div = $('<div>').attr('id', 'message').html(data.message);
                if(data.success == 0) {
                    $div.addClass('error');
                } else {
                    $div.addClass('success');
                }
                $('body').append($div);
            }
        });
        return false;
    });
});

If I am right, what you are essentially asking is how you can make this piece of code work for multiple forms without having to edit the selector. This is very easy. As long as you have the above code included in every page with a form, you can change the $('#add_customer_form') part to something like $('form.json_response'). With this selector we are basically telling jQuery "any form with a class of json_response should be handled through this submit function" - The specific class I'm using is not relevant here, the point is you use a class and give it to all the forms that should have the functionality. Remember, jQuery works on sets of objects. The way I originally had it the set happened to be 1 element, but every jQuery function is meant to act upon as many elements as it matches. This way, whenever you create a form you want to handle through AJAX (and you know the server will return a JSON response with a success indicator), you can simply add whatever class you choose and the jQuery code will take over and handle it for you.

There is also a cleaner plugin that sort of does this, but the above is fine too.

Answer 2

Based on your question, I think what you want is a jQuery selector that will select the right form on each of your pages. If you gave them all a consistent class you could use the same code on each page:

HTML

<form id="some_form_name" class="AJAX_form"> ... </form>

Selector:

$('form.AJAX_form")