Getting uidialog full contents

Question

I have an uidialog and would like to get full content of it, however for some reason I am getting the old HTML contents if I use .html(), but current live contents if I use serialize.

So, inside my dialog I have:

alert($(this).find('form').serialize()); //This serializes current live contents, as they appear in the uidialog form.
alert($(this).html()); //This shows the html before any modifications on the dialog

Why html() shows the html before modifications, while serialize() shows me a serialization with the current values as inputted?

Answer 1

You cannot obtain it with html(). I created a function that takes a serialized array and populates a container to save the dialog from the html. This is how it is called from the dialog:

//Set current vals to html before saving
setInputVals('#' + $(this).attr('id'), $(this).find('input, select, textarea').serializeArray());

And this is the function:

/*
 * Sets input vals to a container
 * 
 * @param container_id The id of the container
 * @param inputVals The serialized array that will be used to set the values
 * 
 * @return boolean. Modifies container
 */
function setInputVals(container_id, inputVals) {
    //Order by name
    var inputValsByName = new Array();
    $.each(inputVals, function(key, value) {
       inputValsByName[value.name] = value.value;
    });

    //Loop through inputs and set correct values
    $.each($(container_id + " :input"), function(key, value) {
        if (!value.name in inputValsByName) {
            return true;
        }

        //Loop through each type. Make sure you add new types here when needed. Notice that val() won't work generally
        //for changing the html, and that is why attributes were mostly used.
        if (value.type == 'radio') {
            //Remove checked attribute and add it to the correct one
            $('input:radio[name=' + value.name + ']').removeAttr('checked');
            $('input:radio[name=' + value.name + ']').filter('[value="' + inputValsByName[value.name] + '"]').attr('checked', 'checked');  
        } else if (value.type == 'checkbox') {
            //Checked attribute for checkbox
            if (inputValsByName[value.name] != undefined) {
                $(this).attr('checked', 'checked');
            } else {
                $(this).removeAttr('checked');
            }
        } else if (value.type == 'textarea') {
            //Set text to textarea
            $(this).text(inputValsByName[value.name]);
        } else if (value.type == 'select-one') {
            //Remove selected attribue from the options and add the correct one.
            $(this).find('option').removeAttr('selected');
            $(this).find('option[value="' + inputValsByName[value.name] + '"]').attr('selected', 'selected');
        } else if (value.type == 'text') {
            //Set value attribute for text input
            $(this).attr('value', inputValsByName[value.name]);
        }
     });

     return true;
} 

Tested on major browsers. Hope it helps someone! :)