Question

I have a pretty simplistic piece of software I’m doing. I’m wanting to make a set of fields be in a jQuery modal dialog. Because of some other restrictions, it’d be easy if I did this using jQuery’s AJAX functions to communicate with my server rather than using ASP.Net’s AJAX support.

However, I’m wondering if there is any easier way than doing a straight assignment of all fields. For instance, to save all the fields I’d have to do this:

1. for each field, do json.fieldname=$('#fieldname').val()
2. send the json data.

and I must do the same for loading the data into the fields from json.

Is there an easier/less tedious way?

Answer 1

If i’m understanding correctly… you could seralize your form elements into json with a simple plugin.

 var jsonData = $.toJSON($('#myForm').serializeObject());
    $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: url,
            data: jsonData,
            dataType: "json",
            success: function(results) {
               alert('Made it!');
            },

            error: function() {
                alert('Fail Whale!');
            }
        });
};

The serialzeObject function will use the input name as the key and the value as the value of the json object.

EDIT

To make this work with a div instead of a form you can modify the plugin a bit.

Change the each loop to use this instead

var obj = {};
    var a = $(this).is('form') ? this.serializeArray() : $(this).find('input, select, textarea').serializeArray(); 


    $.each(a, function() {