Using serializeArray for non-form objects?

Question

I'm trying to post some data built from some non-form elements but I can't seem to crack it.

How can I create an array in the same format as serializeArray() does with form fields?

I've tried several variations on this but it only picks up the last .active tag.

$('li.tag.active').each(function() {
    values = {};
    values['tagID'] = $(this).attr('id');
});

$.post("/scripts/php/process.php",{     
    'data': data,
    funcName : 'tagResults'
},function(results){
    $("#results").html(results);
}) 

Answer 1

ok - found this in the end which works exactly as if it was input fields with serializeArray()...

function getTags(){

        var data = new Array();

        $('li.tag.active').each(function() {
                data.push({ 'name':$(this).attr("name"), 'value':$(this).attr("id")});
         });

         $.post("/scripts/php/process.php",{ 
             'data': data,
             funcName : 'tagResults'
        }) 

}

Answer 2

Adding this function to your JS code allows you to serialize any object with "name" and "value" attributes.. I usually use it to serialize forms. I know you said these controls are formless, but I would imagine, this could be used to serialize any object with a name/value attribute. It also looks easy enough to change it to look for other attributes of an object, like ID. It's hard to tell exactly what you're doing there as you do not show the definition of "data" or the usage of "values"

    $.fn.serializeObject = function()
    {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

Then just add it to your url string

var dataToPassToAjax = 'allData=' + myObject.serializeObject();

If you are only passing ONE value, you don't need to serialize.

$.post("/scripts/php/process.php",{ 'data': 'data=' + $('li.tag.active').id, funcName : 'tagResults' }). 

then in process.php, just get the value of $_REQUEST['data'] and it will have your ID

Answer 3

Best answer I've seen from Ob. and Guntram: jQuery serialize / serializeArray from an element that is not a form

$('div :input').serializeArray()

In addition to inputs, this picks up select and textarea. Sweet.

Answer 4

With this function you can make any set of elements serializable:

function makeSerializable(elem) {
  return $(elem).prop('elements', $('*', elem).andSelf().get());
}

Then you can use it like this:

var arr = makeSerializable('li.tag.active').serializeArray();

or

var $elem = $('li.tag.active');
var data = makeSerializable($elem).serialize();