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");
  }
 });

Hey nutjob. :) I think the part of your question that is confusing me is the "JSON script" part. Are you actually referring to the code I put in your last question to handle the form submission? Do you mean you want to abstract it out into a plugin sort of thing so you can just call that on a particular form on a page and have it handle everything nicely? — Paolo Bergantino
– Paolo Bergantino, Commented May 22, 2009 at 2:17
Wait, what does this have to do with JSON? What on earth is a "JSON Script" ? — Breton
– Breton, Commented May 22, 2009 at 2:18
Hi Paolo.. Thanks for the reply. Actually what I am talking about is exactly what you have said. I want to abstract your code and simply include it where I may need it. I'm referring to the JSON script as the JQuery code you posted, not the PHP or the html. I told you a was newer than new to all this. :) — user109162
– user109162, Commented May 22, 2009 at 2:21
"dataString" is not a data type. I don't see where you define it, but if you use the serialize() on it, it IS a JSON object. if your server is then returning JSON, you have to add an extra parameters, dataType: 'json', and have your success callback receive it. — Paolo Bergantino
– Paolo Bergantino, Commented May 22, 2009 at 4:09

Community · Accepted Answer · 2017-05-23 12:19:36Z

2

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.

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered May 22, 2009 at 2:23

Paolo Bergantino

490k83 gold badges523 silver badges437 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

user109162 Over a year ago

Thanks Paolo. What I was wondering, and it may not be feasable, but I am big on code reuse. If I could save just that single code and maybe put it into a function and import the new selestor value, I wouldn't need to actually have 25 lines. I would just have the javascript tags that point to this single piece of code.

user109162 Over a year ago

I'm sorry, I still don't think I am that clear. I just got off work and my mind is mush. :)

Paolo Bergantino Over a year ago

That's what I am talking about. You can just save the above code in something like ajaxform.js, have a script tag like <script type="text/javascript" src="ajaxform.js"></script> in any page that has a form, and if you give it the right class (json_response in my example), the jQuery code will always handle it.

user109162 Over a year ago

Ok... so if I am understanding you correctly, I wouldn't even need to change the id selector in your JQ code only make sure to include the class selectors (.error and .success) in my html. Am I right?

Paolo Bergantino Over a year ago

You would need to change the ID selector if you want multiple forms to be matched by this (unless you give them all the same ID...). Presumably you have an external stylesheet where you keep the styles for .error and .success. If you include those in every page with a form and you include the javascript in every page with a form, everything would be taken care of. I'm sorry if I'm not being very clear I guess I'm not very good at explaining this stuff, haha.

|

acrosman · Accepted Answer · 2009-05-22 02:26:31Z

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")

answered May 22, 2009 at 2:26

acrosman

12.9k10 gold badges42 silver badges56 bronze badges

Collectives™ on Stack Overflow

how to use JSON for an error class

2 Answers 2

17 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

17 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related