How to use JSON for error class
Hey everyone. I was lucky enough to have Paolo help me with a piece of jquery code that will show the end user an error message if the data has been saved or not saved in the database. I'm looking at the code and my imagination is running wild because I'm wondering if I can just use this piece of code and import the selector type into it, and then include this entire json script in my document. This saves me from having to include the json script in 10 different documents. I hope I make sense.
$('#add_customer_form').submit(function() { // handle form submit
The "add_customer_form" id is what I would like to change for each page. If I could do this successfully, then I could create a class that would just use the rest of this json script and include it where I need it. I'm sure someone else has thought about this already, so I was wondering if anyone could give me some pointers.
Thanks!
Okay, I hit the wall so to speak. The code below is the code that is already in my form. It uses datatype for data, but I need json. What should I do? I want to replace the dumb alert box with a nice green div with 100% width where my server says everything is fine.
$.ajax({
type: "POST",
url: "body.php?action=admCustomer",
data: dataString,
success: function(){
$('#contact input[type=text]').val('');
alert( "Success! Data Saved");
}
});
a source to share
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'm right, you are essentially asking how you can make this piece of code for multiple forms without having to edit the selector. It is very easy. As long as you have the above code included in every form page, you can change the part $('#add_customer_form')
to something like $('form.json_response')
. With this selector, we're basically talking about jQuery: "any form with a classjson_response
should be handled through this submit function "- the specific class I'm using is not relevant here, the point is that you are using the class and submitting all the forms that need to have functionality. Remember jQuery works on sets of objects. I originally had this, it turned out to be 1 element, but each jQuery function is designed to work with as many elements as it matches.So, whenever you create a form you want to be processed via AJAX (and you know the server will return a JSON response with a success indicator), you can simply add any class you choose and the jQuery code will take over and handle it for you.
There is also a cleaner plugin that does this, but the above is fine too.
a source to share
Based on your question, I think you need a jQuery selector that will pick the correct form on every page of yours. If you give them all sequential classes, you can use the same code on every page:
Html
<form id="some_form_name" class="AJAX_form"> ... </form>
Choice:
$('form.AJAX_form")
a source to share